Card

A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card

Card Text Content

Headline

Add a headline attribute to add card headline title.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-card headline="Vivid Card Component"></vwc-card>

Subtitle

Add a subtitle attribute to add card subtitle.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-card
	subtitle="Extra text below the card headline"
	headline="Vivid Card Component"
></vwc-card>

Text

Add a text attribute to add text to the card.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-card
	text="The card can contain multiple lines of text."
	headline="Vivid Card Component"
	subtitle="Extra text below the card headline"
></vwc-card>

Icon

The icon attribute displays an icon from the icon library, which prefixes the Card's headline.
To add custom icons or to postfix icons, use the graphic slot.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-card
	icon="chat-line"
	headline="Vivid Card Component"
	subtitle="Extra text below the card headline"
></vwc-card>

Appearance

The appearance attribute to change the card's appearance.

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-layout>
	<vwc-card
		appearance="elevated"
		headline="Elevated"
		subtitle="this is the card default appearance"
	></vwc-card>
	<vwc-card
		appearance="outlined"
		headline="Outlined"
		subtitle="this appearance set a border to the card same as elevation='0' "
	></vwc-card>
	<vwc-card
		appearance="ghost"
		headline="Ghost"
		subtitle="present the card template without background or shadow"
	></vwc-card>
</vwc-layout>

Elevation

Control the elevation depth by adding the elevation attribute.
The elevation is applied only with the default appearance (appearance='elevated').

<!-- Feel free to edit the code below. The live preview will update as you make changes. -->
<vwc-layout>
	<vwc-card
		elevation="2"
		headline="Elevation 2"
		class="card-elevated"
	></vwc-card>
	<vwc-card
		elevation="4"
		headline="Elevation 4 - default"
		class="card-elevated"
	></vwc-card>
	<vwc-card
		elevation="8"
		headline="Elevation 8"
		class="card-elevated"
	></vwc-card>
	<vwc-card
		elevation="12"
		headline="Elevation 12"
		class="card-elevated"
	></vwc-card>
	<vwc-card
		elevation="16"
		headline="Elevation 16"
		class="card-elevated"
	></vwc-card>
	<vwc-card
		elevation="24"
		headline="Elevation 24"
		class="card-elevated"
	></vwc-card>
</vwc-layout>

<style>
	.card-elevated {
		margin: 16px;
	}
</style>