Card
Displays a card with header, content, and footer.
Login to your account
Enter your email below to login to your account
Installation
Usage
<Card>
<Card.Header>
<Card.Title> {"Card Title"->React.string} </Card.Title>
<Card.Description> {"Card Description"->React.string} </Card.Description>
<Card.Action> {"Card Action"->React.string} </Card.Action>
</Card.Header>
<Card.Content>
<p> {"Card Content"->React.string} </p>
</Card.Content>
<Card.Footer>
<p> {"Card Footer"->React.string} </p>
</Card.Footer>
</Card>Examples
Size
Use the size=Sm prop to set the size of the card to small. The small size variant uses smaller spacing.
Scheduled reports
Weekly snapshots. No more manual exports.
- Choose a schedule (daily, or weekly).
- Send to channels or specific teammates.
- Include charts, tables, and key metrics.
Image
Add an image before the card header to create a card with an image.
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.
API Reference
Card
The Card component is the root container for card content.
CardHeader
The CardHeader component is used for a title, description, and optional action.
CardTitle
The CardTitle component is used for the card title.
CardDescription
The CardDescription component is used for helper text under the title.
CardAction
The CardAction component places content in the top-right of the header (for example, a button or a badge).
CardContent
The CardContent component is used for the main card body.
CardFooter
The CardFooter component is used for actions and secondary content at the bottom of the card.