Use <Card> to present related content in a bordered panel. Add an optional title, icon, or href in the header, then put any page content (paragraphs, lists, or code blocks) in the card body.
Wrap multiple cards in <CardGroup> to lay them out in a responsive grid. Set cols to control how many cards appear per row.
<Card title="Installation">
Run the install command, then verify the CLI is available.
</Card>A card with a title shows a header above the body content. Omit title, icon, and href to render body content only.
<Card title="Installation">
Install the package with your preferred package manager:
```bash
npm install @myorg/my-package
```
</Card>Add href to show an external-link button in the card header. The button uses the same link component as other docs.page navigation; it does not make the entire card clickable.
<Card title="Learn more" href="/components">
Browse the components overview for tabs, callouts, and accordions.
</Card>Add icon to show a Font Awesome icon beside the title. Pass the icon slug without the fa- prefix, for example gear for a settings icon or book for documentation.
<Card title="Documentation" icon="book">
Read the reference pages for properties, behavior, and examples.
</Card>Combine title, icon, and href when you need a labeled card with a navigation action:
<Card title="Components" icon="square" href="/components">
Jump to the components overview.
</Card>The text shown in the card header. Use short, scannable titles such as Installation or API reference.
The header renders when title, icon, or href is set.
A link destination for the external-link button in the card header.
The button appears in the top-right of the header. The card body is not clickable; only the button navigates.
A Font Awesome icon slug displayed beside the title. Pass the slug without the fa- prefix, for example gear or book.
Brand icons use their brand slug (for example, github). See Icon for details.
Use <CardGroup> to arrange multiple cards in a grid. By default, cards flow into two equal columns.
<CardGroup>
<Card title="Installation" icon="gear">
Install the package and verify the CLI.
</Card>
<Card title="Documentation" icon="book" href="/components">
Browse component reference pages.
</Card>
</CardGroup>Set cols to change the number of columns, for example three cards per row on wider layouts.
<CardGroup cols={3}>
<Card title="Tabs" icon="folder" href="/components/tabs">
Switchable content panels.
</Card>
<Card title="Accordion" icon="chevron-down" href="/components/accordion">
Expandable sections.
</Card>
<Card title="Callouts" icon="message" href="/components/callouts">
Emphasized notes and warnings.
</Card>
</CardGroup>The number of columns in the card grid.
Defaults to 2.
| Condition | Result |
|---|---|
title, icon, and href all omitted on <Card> | Renders body content only (no header) |
href set | Shows an external-link button in the header; body is not clickable |
icon set | Renders a Font Awesome icon beside the title in the header |
cols omitted on <CardGroup> | Uses a two-column grid |
Any content as <Card> children | Rendered in the card body |
- Components overview: card grid used on the components landing page
- Icon: Font Awesome icon slugs for the
iconproperty - Callouts: emphasized panels for notes and warnings inside cards