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

Select Variant

Props

Property	Description	Type	Values	Default	Required
title	The title for the card	string	string		✓
buttonLabel	The text used for the button	string	string		✓
to	Where the card should link to	string	string		✓
additionalLinkText	The text for the additional Link	string \| undefined	string \| undefined
additionalLink	Add an additional link to the complex card	string \| undefined	string \| undefined
variant	Change the variant of the card	CardVariant \| undefined	"simple" \| "basic" \| "basic-button-middle" \| "decorative" \| "decorative-icon" \| "complex"	"simple"
image	The src for the card image	string \| undefined	string \| undefined
loading	Toggle lazy loading of the images	CardLoading \| undefined	"eager" \| "lazy"	"lazy"
content	The content of the card	string \| undefined	string \| undefined
alt	The alt text for the image. Leave blank if the image is purely decorative.	string \| undefined	string \| undefined	""
date	Add a date to the card	Date \| undefined	Date \| undefined
contain	Contains the image to the content size for complex cards	boolean \| undefined	boolean \| undefined	false

Slots

Name	Description	Type
default	The content for the card.	any
icon	The icon for the card.	any