Card

Component to support the structuring of information.

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.

Anatomy of card 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.

Variant
Size
The selected theme does not has any options for "variant".
PropertyTypeDescription
variant-The available variants of this component.
sizedefault | fullThe 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 👍

Earliest event date:
7/8/2025
Latest event date:
7/9/2025
Total events:
10

default layer 👍

Earliest event date:
7/8/2025
Latest event date:
7/9/2025
Total events:
10

Same layer like card 👎

Earliest event date:
7/8/2025
Latest event date:
7/9/2025
Total events:
10
Do

Use Card on top of default or sunken layers.

Don't

Don’t use card in cards or same elevation layers.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
children?
ReactNode;
p?
PaddingSpaceProp;
Padding of the component. You can see allowed tokens here.
pb?
PaddingBottomProp;
Set the bottom padding for the element. You can see allowed tokens here.
pl?
PaddingLeftProp;
Set the left padding for the element. You can see allowed tokens here.
pr?
PaddingRightProp;
Set the right padding for the element. You can see allowed tokens here.
pt?
PaddingTopProp;
Set the top padding for the element. You can see allowed tokens here.
px?
PaddingSpacePropX;
Padding horizontal (left and right) of the component.
py?
PaddingSpacePropY;
Padding vertical (top and bottom) of the component. You can see allowed tokens here.
space?
GapSpaceProp;
The space between the children. You can see allowed tokens here.
Defaults to:
0
Last update: 6 months ago