vwc-card

Cards contain content and actions about a single subject.

Usage

<vwc-card heading="Hello Card!" icon="home">
   <div slot="media">Some media</div>
   <vwc-button slot="footer">Action Button</vwc-button>
</vwc-card>

API

Properties/Attributes

| name |attr/prop/reflected|type| description | |--------|--- |--- |-------------------------------| | heading |reflected|string| The heading text | | subtitle |reflected|string| The sub-heading text | | text |reflected|string| The card text | | icon |reflected|string| A valid vivid icon type | | elevation |reflected|string| control the card elevation dp |

Slots

| name | description | |-----------|------------------------------------------------------------------------------------------------------------| | graphic | Content to show in the header icon section. If exists, overrides the header-icon attribute’s definition | | meta | Slot for action content in the card header | | media | Slot to add anything inside the media area | | footer | Slot for action content placed the card footer | | main | Slot for content of the card. If exist, overrides the heading, subtitle, card-text and header-icon |

Styling tips

Setting card's width

The width of the card is set via its wrapper's width. Hence, if you wrap a card like this:

<div class="card-wrapper">
 <vwc-card></vwc-card>
</div>

Then your style should have:

.card-wrapper {
 width: 300px;
}

Using the cards in a grid

Please see this example: Grid Example

CSS Custom Properties

| Property | Default | Description | |--------------------------------|--------------------------------------------------|--------------------------------------------------| | --title-line-clamp | none | Controls the number of lines of the title that will be present before trim & ellipsis | | --subtitle-line-clamp | none | Controls the number of lines of the sub-title that will be present before trim & ellipsis |