Cards contain content and actions about a single subject.
To implement the Card component, you need to import at least Card and CardBody components:
import { Card, CardBody } from '@react-ui-org/react-ui';
And use it:
See API for all available options.
Default card is designed for non-white background. You may want to either use the raised variant or customize the default appearance to make the card stand out on white surfaces.
Use optional CardBody and CardFooter components to provide your content with expected spacing.
Use medium or low-emphasis buttons when there are more cards, e.g. in a grid. It will help you keep the UI clean and easy to scan.
Card, or Paper? Card is a versatile surface for displaying content. However, there is also the Paper component. While Card is designed for displaying items (and also supports more visual options), Paper is usually used to hold larger content areas like lists, grids, or forms.
Aside from the CardBody element, you can add a CardFooter to better separate your card's actions from the rest of the content.
Import all necessary components:
import { Card, CardBody, CardFooter } from '@react-ui-org/react-ui';
And use them:
👉 CardFooter is required in case you need to align the actions of multiple cards with varying height of content.
Add optional shadow to lift the card above surface.
Use a dense card when you need to save space on screen. Other elements in the card should be also smaller to keep the card contained and easy to scan.
Combine Card with ScrollView to enable scrolling for card content.
Card supports all component colors to cover different needs of your app.
Entire card can appear disabled. However, you'll still need to manually disable its interactive elements to disallow user's interaction.
In addition to the options below in the component's API section, you
can specify React synthetic events or any HTML attribute you like. All
attributes that don't interfere with the API are forwarded to the root <div>
HTML element. This enables making the component interactive and helps to improve
its accessibility.
👉 Refer to the MDN reference for the full list of supported attributes of the div element.
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node | — | true | Slot for individual card elements that build up the inner layout:
|
| color | 'success' │ 'warning' │ 'danger' │ 'help' │ 'info' │ 'note' │ 'light' │ 'dark' | 'light' | false | Color variant to clarify importance and meaning of the card. |
| dense | bool | false | false | Make the card more compact. |
| disabled | bool | false | false | If |
| raised | bool | false | false | Add shadow to pull the card above surface. |
Space your content with CardBody. See Card Composition for all details.
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node | — | true | Content of the card. |
Separate your card actions with CardFooter. See Card Composition for all details.
| Prop name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node | null | false | Card actions, usually buttons. |
| Custom Property | Description |
|---|---|
--rui-Card__padding | Padding shared by card header, body and footer |
--rui-Card__border-width | Border width |
--rui-Card__border-radius | Corner radius |
--rui-Card--dense__padding | Padding of dense card |
--rui-Card--raised__box-shadow | Box shadow of raised card |
--rui-Card--disabled__background-color | Card background color in disabled state |
--rui-Card--disabled__opacity | Card opacity in disabled state |
It's possible to adjust the theme of specific color variant. Naming convention looks as follows:
--rui-Card--<COLOR>__<PROPERTY>
Where:
<COLOR> is one of supported
component colors
(see color variants and API),<PROPERTY> is one of color (color of text), border-color, or
background-color.