Cards
Primary Card
Primary Card is used to highlight key information or actions, drawing attention to important content within a layout in a visually consistent manner.
Card title
A description very interesting that presumably relates to the card.
Prop | Type | Default value |
|---|---|---|
Prop title | Type string | Default value "" |
Prop description | Type string | Default value "" |
Prop alignContent | Type "start" | "center" | "end" | Default value "center" |
Prop infoUrl | Type string | Default value "" |
Prop infoText | Type string | Default value "Learn more" |
Prop size | Type "sm" | "md" | "lg" | Default value "md" |
Prop hasShadow | Type boolean | Default value false |
Prop topBadgeText | Type string | Default value "" |
Prop topBadgeState | Type "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info" | Default value "default" |
Prop icon | Type IconName | Default value "" |
Secondary Card
Secondary Card is used for supplementary information or actions, providing a more subtle visual treatment compared to Primary Card.
Prop | Type | Default value |
|---|---|---|
Prop title | Type string | Default value "" |
Prop description | Type string | Default value "" |
Prop alignContent | Type "start" | "center" | "end" | Default value "center" |
Prop infoUrl | Type string | Default value "" |
Prop infoText | Type string | Default value "Learn more" |
Prop size | Type "sm" | "md" | "lg" | Default value "md" |
Prop hasShadow | Type boolean | Default value false |
Prop topBadgeText | Type string | Default value "" |
Prop topBadgeState | Type "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info" | Default value "default" |
Prop icon | Type IconName | Default value "" |
Prop iconUrl | Type string | Default value "" |
Horizontal Card
Horizontal Card displays content in a side-by-side layout, ideal for showcasing items with images and descriptions.
Horizontal Card
This card displays its content in a horizontal layout with an image.
Prop | Type | Default value |
|---|---|---|
Prop title | Type string | Default value "" |
Prop description | Type string | Default value "" |
Prop alignContent | Type "start" | "center" | "end" | Default value "start" |
Prop infoUrl | Type string | Default value "" |
Prop infoText | Type string | Default value "Learn more" |
Prop size | Type "sm" | "md" | "lg" | Default value "md" |
Prop hasShadow | Type boolean | Default value false |
Prop topBadgeText | Type string | Default value "" |
Prop topBadgeState | Type "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info" | Default value "default" |
Prop iconUrl | Type string | Default value "" |
Promotion Card
CardPromotion is a promotional card component that displays a label with an icon, often used for notifications, alerts, or important messages.
Basic Promotion
Dismissible Promotion
Hover State
Active State
Prop | Type | Default value |
|---|---|---|
Prop label | Type string | Default value The text label for the card |
Prop icon | Type IconName | Default value Icon name to display in the card |
Prop dismissible | Type boolean | Default value Whether the card can be dismissed |