A surface container for grouping related content, data, or actions into a cohesive unit.
Preview
Card Title
A concise description of the content.
Card footer
Code
VUE
<Card />Props
Heading shown at the top of the card
Body text content inside the card
Optional footer text content
Applies a subtle drop shadow
Shows a border around the card
Adds a hover lift and shadow effect
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | "Card Title" | — | Heading shown at the top of the card |
description | string | "A concise description of the content." | — | Body text content inside the card |
footer | string | "Card footer" | — | Optional footer text content |
shadow | boolean | true | — | Applies a subtle drop shadow |
bordered | boolean | true | — | Shows a border around the card |
hoverable | boolean | false | — | Adds a hover lift and shadow effect |
Usage
Use cards to create visual separation between distinct content sections. Avoid nesting cards within cards. For a list of similar items, consider a table or list layout instead.
Accessibility
Cards are generic containers — maintain correct heading hierarchy based on page context.
If the card is interactive (hoverable), ensure a focusable element such as a link or button is present inside.