Card
A <Card> component is a versatile UI element used to display content in a concise, visually organized format.
It’s typically presented as a rectangular box with various content elements such as images, text, buttons, and icons.
Cards are ideal for grouping related information and making it easily digestible, often used to display previews of articles, products, user profiles, and other content types.
Anatomy
The <Card> component consists of a container which is basically a <div>. You can pass any content and components as children to the component.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | default | full | The available sizes of this component. |
Usage
The <Card> component enhances the visual hierarchy and organization of content, making it easier for users to engage with various pieces of information.
Elevation layer
<Card> uses the raised elevation layer to create a visual distinction between the card and the background.
According to our design guidelines, the card should be used on top of the sunken or default layer.
sunken layer 👍
default layer 👍
Same layer like card 👎
Use Card on top of default or sunken layers.
Don’t use card in cards or same elevation layers.
Props
children?ReactNode;
p?PaddingSpaceProp;
pb?PaddingBottomProp;
pl?PaddingLeftProp;
pr?PaddingRightProp;
pt?PaddingTopProp;
px?PaddingSpacePropX;
py?PaddingSpacePropY;
space?GapSpaceProp;
0