# Card > Structured card, with header, body, footer and image. ## The simplest A card reduced to its body. ```mdx A card reduced to its body. ``` 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. ```mdx … ``` `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. ```mdx … ``` With the custom theme, a class of your own does it — here `full-height`, from `theme/99-docpensieve.css`: 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. ```mdx … ``` ```css .full-height { block-size: 100%; } ``` ## Elevation This card carries a shadow. ```mdx … ``` ## Fully clickable Go to the columns The whole card is a link, not just the title. ```mdx … ``` 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
12
components
 usable without an import
1
stylesheet
 per version
0
bytes of JavaScript runtime
 on every page
12
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. 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. ```mdx Centred, in capitals Small, italic body. ``` 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. The component offers no typography prop: the look comes from classes of your own, written in the `theme/` folder — here those of `theme/99-docpensieve.css`. Centred, in capitals Small, italic body. ```mdx Centred, in capitals Small, italic body. ``` ```css .highlight { border-color: var(--dp-accent); background: var(--dp-accent-soft); } .caps { text-transform: uppercase; letter-spacing: 0.05em; } ``` The component rules live in the `components` layer, those of the theme folder in none: a class of yours always wins, even to undo the default style. No border, no background, no inner padding. The commonest row is a row of cards; [Columns](/versions/latest/components/columns/) shows how to keep them the same height, which a grid alone does not.