Card and CardGroup

Three variants, chosen by which optional prop is set - icon (or no icon at all), img, or method:

Single card

A Card links to a page (via href) and shows an icon, title, and description.

No icon

Just omit icon entirely - the title and description still lay out normally with no gap left behind.

<CardGroup cols={2}>
  <Card title="Single card" icon="star" href="/some-page/">
    A short description under the title.
  </Card>
  <Card title="No icon" href="/some-page/">
    icon is entirely optional.
  </Card>
</CardGroup>

Set img instead of icon for a full-width image above the title - useful for a more visual card, like a screenshot or illustration:

Image card

Set img to any image path or URL - it renders full-width above the title instead of icon’s small glyph.

<Card title="Image card" img="/images/card-demo.svg">
  Renders full-width above the title.
</Card>

Set method for an API-reference style card - a solid, colored badge (GET/POST/PUT/PATCH/DELETE, any other value renders gray) next to the title instead of an icon:

Get pets

GET

List every pet in the store.

Add a pet

POST

<Card title="Get pets" method="GET" href="/api/pets/get-pets/">
  List every pet in the store.
</Card>

Card props

titlestringrequired

iconstring

Icon name or literal emoji — see Icons.

imgstring

Image path or URL — renders full-width above the title instead of icon.

methodstring

"GET"/"POST"/"PUT"/"PATCH"/"DELETE" render as a colored badge next to the title; any other value renders gray.

hrefstring

Renders as a <div> instead of a link if omitted.

CardGroup props

colsnumberdefault: 2