Card

Overview

Cards contain content and actions that relate information about a subject. A card is identifiable as a single, contained unit and can hold anything from images to headlines, supporting text, buttons, lists, and other components.

Demo

Props

PropertyDescriptionTypeValuesDefaultRequired
titleThe title for the cardstringstring
buttonLabelThe text used for the buttonstringstring
toWhere the card should link tostringstring
additionalLinkTextThe text for the additional Linkstring | undefinedstring | undefined
additionalLinkAdd an additional link to the complex cardstring | undefinedstring | undefined
variantChange the variant of the cardCardVariant | undefined"simple" | "basic" | "basic-button-middle" | "decorative" | "decorative-icon" | "complex""simple"
imageThe src for the card imagestring | undefinedstring | undefined
loadingToggle lazy loading of the imagesCardLoading | undefined"eager" | "lazy""lazy"
contentThe content of the cardstring | undefinedstring | undefined
altThe alt text for the image. Leave blank if the image is purely decorative.string | undefinedstring | undefined""
dateAdd a date to the cardDate | undefinedDate | undefined
containContains the image to the content size for complex cardsboolean | undefinedboolean | undefinedfalse

Slots

NameDescriptionType
defaultThe content for the card.any
iconThe icon for the card.any