vwc-card 2.30.1
Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-card@2.30.1
Install via package.json:
"@vonage/vwc-card": "2.30.1"
About this version
Cards contain content and actions about a single subject.
<vwc-card heading="Hello Card!"
icon="home">
<div slot="media">Some media</div>
<vwc-button slot="actions">Action Button</vwc-button>
</vwc-card>
| 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 |
| 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 |
content |
Slot for content of the card. If exist, overrides the heading, subtitle, card-text and header-icon
|
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;
}Please see this example: Grid Example
| 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 |
