Components / UI components / Data Display
Data DisplayExperimental alpha
Card
A composed content surface with a heading, description, body and footer.
Card preview
Component library
Reusable website and AI controls.
Explore focused examples, controlled interactions and documented application responsibilities.
Interactions use local sample data.
Usage and props
Group related content with Header, Title, Description, Content and Footer. These parts accept your children; render your own header and footer content. Set Title.as to match the page heading level. Choose a heading level appropriate to the page. Add aria-labelledby only when the card should be a named region.
childrenReactNode (optional)- Your content, with or without the supplied compound parts.
aria-labelledbystring (optional)- Point to the title id when the section should be a named region.
classNamestring (optional)- Add application styles to the section. Each compound part also accepts className.
These are the main props for the example. The package's TypeScript declarations include the full API.