Card
A card is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card
Add a headline attribute to add card headline title.
Add a subtitle attribute to add card subtitle.
Add a text attribute to add text to the card.
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.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
Card component supports two clickable modes:
Use the href attribute to change the card wrapper to a link. When doing so, all of the native attributes of <a> are supported, including target.
See Client-Side Navigation for more information on how to integrate with Vue Router.
Setting the clickable-card attribute switches the card wrapper to a <button>, allowing you to trigger programmatic actions e.g. using the click event.
The HTML specification does not allow one interactive element to be nested within another. Therefore, you should not use any links or buttons inside slots when using the href or clickable-card attributes.
The appearance attribute to change the card's appearance.
Control the elevation depth by adding the elevation attribute.
The elevation is applied only with the default appearance (appearance='elevated').