vwc-card 2.25.7
Install from the command line:
Learn more about npm packages
$ npm install @vonage/vwc-card@2.25.7
Install via package.json:
"@vonage/vwc-card": "2.25.7"
About this version
Cards contain content and actions about a single subject.
<vwc-card heading="Hello Card!"
icon="home"
badge-content="This is the badge content"
>
<div slot="media">Some media</div>
<div>This is my content</div>
<vwc-button slot="actions">Action Button</vwc-button>
</vwc-card>
| name | attr/prop/reflected | type | description |
|---|---|---|---|
heading |
reflected | string | The heading text |
header-icon |
reflected | string | A valid vivid icon type |
badge-content |
reflected | string | A content to show in a badge (for info and CTA modes) |
layout |
reflected | large |
basic |
| name | description |
|---|---|
graphics |
Content to show in the header icon section. If exists, overrides the icon attribute’s definition |
actions |
Content to show in the actions section. If exists, overrides the action-icon and action-text attributes definitions |
media |
Slot to add anything inside the media area |
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 |
