Skip to content
DocPensieve
0.2.0

Card

The simplest

A card reduced to its body.
<Card>
  <CardBody>A card reduced to its body.</CardBody>
</Card>

The examples of this page narrow some cards through style, which every theme understands; the look proper comes further down.

With its three parts

Header

The body of the card. It takes the remaining space when several cards sit side by side.

Card footer

With an image

CardImage goes wherever you want in the card. At the top or at the bottom, it follows the corners; between two blocks, it stays square.

Image at the top
The top corners follow those of the card.
Image at the bottom
The bottom corners follow those of the card.
<Card>
  <CardImage src="./icons/banner.svg" alt="" />
  <CardBody>…</CardBody>
</Card>

alt defaults to the empty string: a decorative image is thus passed over by screen readers, rather than announced by its file name. An image that carries meaning deserves a written alt.

A grid of cards

It is the most common use. Stretching each card to the height of its column aligns them whatever the content.

With the Tailwind theme, the h-full utility does it:

Stateless

Components are rendered at build time. None of them keeps state or listens to events.

Dependency-free
The delivered HTML loads nothing.
No surprises

What cannot be rendered stops the build rather than disappearing silently.

<Columns>
  <Column>
    <Card className="h-full">…</Card>
  </Column>
</Columns>

Elevation

This card carries a shadow.
<Card elevated>…</Card>

Fully clickable

Go to the columns
The whole card is a link, not just the title.
 
<Card href="./columns/">…</Card>

A relative target starts from the page, an absolute target from the version root — the same rules as for a Markdown link.

A highlighted figure

Nothing specific to the component: a card, a little typography, and the footer carrying the caption.

0
bytes of JavaScript runtime
on every page
9
components
usable without an import
1
stylesheet
per version

A warning card

To check before publishing

A generated site can compile without error and contain dead links. docpensieve check reads the output back.

The look through className

The component offers no typography prop: the theme's utilities take care of it, and win over the default style.

Centred, in capitals

Small, italic body.
<Card className="border-indigo-400 bg-indigo-50">
  <CardHeader className="text-center uppercase tracking-wide text-indigo-700">
    Centred, in capitals
  </CardHeader>
  <CardBody className="text-sm italic">Small, italic body.</CardBody>
</Card>

The component rules live in the components layer, below the utilities: a className set at use always wins, even to undo the default style.

No border, no background, no inner padding.