Card
Group information visually with an optional header
Source ↗️ Report Issue ↗️Improve visual hierarchy of your pages with the help of Card
components. Group related information together, label sections, or create layouts.
This is a card with a paragraph
Card Types
Cards come in different shapes and sizes. You can create them with or without title using the title
prop, and change visual appearance with the compact
and secondary
props:
Card without title
Card with title
Compact card without title
Compact card with title
Secondary card without title
Secondary card with title
API
Prop | Purpose |
---|---|
element | Set the HTML tag used for the card. Defaults to section . Use Element in React. |
title | Sets a title for the card. |
titleTag | Sets the HTML tag of the title. Defaults to span . Use TitleTag in React. |
compact | Style the card as compact. Defaults to false . |
secondary | Style the card as secondary with a background color. Defaults to false . |
className | Pass additional CSS classes for the card. |
bodyClassName | Pass additional CSS classes for the body of the card. |
Request improvement for this page