Edit page

Card

Cards contain content and actions about a single subject.

Basic Usage

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:

Hello!

See API for all available options.

General Guidelines

  • 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.

Card Composition

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:

Hello! I'm card with footer.

👉 CardFooter is required in case you need to align the actions of multiple cards with varying height of content.

Raised Card

Add optional shadow to lift the card above surface.

Hello! I'm raised card with footer.

Dense Card

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.

Hello! I'm dense card. Everything is smaller here.

Scrollable Card

Combine Card with ScrollView to enable scrolling for card content.

Hello! I'm scrollable card. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.

Color Variants

Card supports all component colors to cover different needs of your app.

Hello! I'm primary variant of card.
Hello! I'm secondary variant of card.
Hello! I'm success variant of card.
Hello! I'm warning variant of card.
Hello! I'm danger variant of card.
Hello! I'm help variant of card.
Hello! I'm info variant of card.
Hello! I'm note variant of card.
Hello! I'm light (default) variant of card.
Hello! I'm dark variant of card.

States

Disabled State

Entire card can appear disabled. However, you'll still need to manually disable its interactive elements to disallow user's interaction.

Hello! I'm a disabled card.
Hello! I'm a disabled raised card.
Hello! I'm a disabled success variant of card.

API

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Slot for individual card elements that build up the inner layout: CardBody, CardFooter, or ScrollView.

color'primary' │ 'secondary' │ 'success' │ 'warning' │ 'danger' │ 'help' │ 'info' │ 'note' │ 'light' │ 'dark''light'false

Color variant to clarify importance and meaning of the card.

denseboolfalsefalse

Make the card more compact.

disabledboolfalsefalse

If true, the card will be disabled.

idstringundefinedfalse

ID of the root HTML element.

raisedboolfalsefalse

Add shadow to pull the card above surface.

CardBody

Space your content with CardBody. See Card Composition for all details.

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Content of the card.

CardFooter

Separate your card actions with CardFooter. See Card Composition for all details.

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Card actions, usually buttons.

Theming

Common Theming Options

Custom PropertyDescription
--rui-Card__paddingPadding shared by card header, body and footer
--rui-Card__border-widthBorder width
--rui-Card__border-radiusCorner radius
--rui-Card--dense__paddingPadding of dense card
--rui-Card--raised__box-shadowBox shadow of raised card
--rui-Card--disabled__background-colorCard background color in disabled state
--rui-Card--disabled__opacityCard opacity in disabled state

Theming Variants

It's possible to adjust the theme of specific color variant. Naming convention looks as follows:

--rui-Card--<COLOR>__<PROPERTY>

Where: