Shipping the docs site
This card is an `article` with an `h2` title, and the title names it.
Card
Card groups related content on one surface: an optional cover, a header with a title, extra content and a close button, then the content, a footer and an action strip. Other props go to the root element.
Demos
Basic
A title makes the card a section named by its heading.
Size
size sets the padding and the title size: small, medium, large or huge.
Cover
cover sits above the header, edge to edge, such as an image.
Hoverable
hoverable lifts the card under the pointer: a soft shadow in Elegant, a longer ink shadow in Brutal.
Header extra, footer and action
headerExtra sits at the end of the header, footer under the content and action in a strip on a quieter surface at the bottom.
Bordered
bordered={false} drops the border (and Brutal’s shadow). A ConfigProvider’s bordered sets the default.
Segmented
segmented draws lines between the parts. true divides them all; an object picks the parts, and "soft" keeps a line inside the padding.
Closable
closable adds a × button to the header that calls onClose. The card does not hide itself.
No title
Without a title, header extra or close button there is no header.
Scrollable content
With contentScrollable and a height on the card, only the content scrolls, in a ScrollArea; the header and footer stay put.
Embedded
embedded uses a quieter surface, for a card inside another surface.
Semantics
tag picks the element (section for a titled card, div otherwise) and titleLevel the heading level (h3 by default). A titled section, article or aside is named by its title.
Part styles
Each part takes a class name and a style.
Card Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
title | ReactNode | undefined | The heading; it also names the card. | Unreleased |
titleLevel | 1 | 2 | 3 | 4 | 5 | 6 | 3 | The title’s heading level. | Unreleased |
tag | section | article | aside | div | section with a title, else div | The element to render. | Unreleased |
children / content | ReactNode | undefined | The content; children override content. | Unreleased |
cover | ReactNode | undefined | Above the header, edge to edge. | Unreleased |
headerExtra | ReactNode | undefined | At the end of the header. | Unreleased |
footer | ReactNode | undefined | Under the content. | Unreleased |
action | ReactNode | undefined | A bottom strip on a quieter surface. | Unreleased |
size | small | medium | large | huge | medium | Padding and title size. | Unreleased |
bordered | boolean | true | Shows a border; defaults to ConfigProvider’s bordered. | Unreleased |
hoverable | boolean | false | Lifts the card under the pointer. | Unreleased |
embedded | boolean | false | Uses a quieter surface. | Unreleased |
segmented | boolean | CardSegmented | false | Lines between the parts. | Unreleased |
closable | boolean | false | Adds a × button to the header. | Unreleased |
onClose | (event: MouseEvent<HTMLButtonElement>) => void | undefined | Runs when × is clicked. | Unreleased |
contentScrollable | boolean | false | Only the content scrolls; give the card a height. | Unreleased |
headerClassName / headerStyle | string / CSSProperties | undefined | Class and style of the header. | Unreleased |
headerExtraClassName / headerExtraStyle | string / CSSProperties | undefined | Class and style of the header extra. | Unreleased |
contentClassName / contentStyle | string / CSSProperties | undefined | Class and style of the content. | Unreleased |
footerClassName / footerStyle | string / CSSProperties | undefined | Class and style of the footer. | Unreleased |
CardSegmented
| Name | Type | Description |
|---|---|---|
content | boolean | "soft" | The line between the header and the content. |
footer | boolean | "soft" | The line above the footer. |
action | boolean | The line above the action area. |
title, headerExtra, cover, footer and action all take a ReactNode. The close button is always reachable by keyboard.