Card
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A bordered container with optional header and footer sections.
Import
import { Card } from "~lib/layout/card";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | Yes | N/A | Card body content |
title | string | No | N/A | Header text, kept to one line |
footer | ReactNode | No | N/A | Footer content |
padding | "none" | "sm" | "md" | "lg" | No | "md" | Body padding |
fill | boolean | No | false | Fill the parent's height |
Examples
Simple
With Title
With Title and Footer
Long Title
The title always stays on one line and ends in "…" when it does not fit, so a long title in a slim column never takes room from the body.
No Padding
Fill
Set fill to stretch the card to the height of whatever it sits in. The body then takes the
room the title and footer leave, so a chart inside with width="100%" height="100%" grows to
fit without you working out its height.