Card
Bordered surface with standard padding for panels. Pair with CardHeader and CardBody for structured content.
Card Props
| Prop | Type | Default | Description |
|---|---|---|---|
fixed | boolean | — | Sets flex:none so the card sizes to content inside a flex column. |
children | ReactNode | — | Card contents. |
CardHeader Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Header title content. |
sub | ReactNode | — | Dim sub-label shown after the title. |
right | ReactNode | — | Right-aligned slot for actions, links, or meta. |
CardBody Props
CardBody extends HTMLAttributes<HTMLDivElement> with no custom props.
Examples
Basic card with header and body
With sub and right actions
import { Card, CardHeader, CardBody } from "@solarius/onset";
import type {
CardProps,
CardHeaderProps,
CardBodyProps,
} from "@solarius/onset";