Card

9th lightest of the thirty-two, by js weight

A surface with optional header and footer bands. The thinnest component here, and the one with the weakest claim to being one.

Example (a11y tier)

Your plan renews on the first of the month.

Import

import Card from 'abaabil/card'         // structure only

import Card from 'abaabil/card/styled'  // + CSS

import Card from 'abaabil/card/a11y'    // + heading, region

Why this is a borderline component

A card is a box with a border, and this library's own rule for the comparison table says a generic layout primitive does not count as a component. By that rule this one barely qualifies.

It is here for two reasons. The header and footer bands are the part people rewrite every time. And a card is the most common place a heading level gets chosen badly, which the a11y tier has something to say about.

There is no default heading level

The right level depends on where the card sits in the document, which the component cannot know, and a page of <h3>s under no <h2> is a broken outline that looks completely fine. So headingLevel is required alongside heading, and passing the heading without it warns in development and renders no heading element rather than guessing.

Passing a heading also makes the card a named region that a screen reader user can jump to. Passing nothing leaves a plain <div>, which is usually what you want: a page of twelve cards announced as twelve named regions is twelve extra stops on the way to the content. Accordion's group works the same way, for the same reason.

No shadow

A border and a surface already say “separate object”. One elevation stamped onto every block flattens the hierarchy it is meant to create, and a consumer who does not want a shadow should not have to unset one.

Props

Prop	Type	Default	Tier	Description
`header`	ReactNode	—	all	Rendered in its own band above the body.
`footer`	ReactNode	—	all	Rendered in its own band below it.
`heading`	ReactNode	—	a11y	Rendered as a real heading and used as the card's name.
`headingLevel`	2 \| 3 \| 4 \| 5 \| 6	—	a11y	Required alongside `heading`.
`className`	string	—	all	Merged with the base class.