Homecomponentsstructural
Card
A versatile container for creating cards and sections.
Use Card to display content related to a single subject.
Inset
Use the inset property to add inset (padding) inside the card.
$100
$300
$400
$500
Border Color
Use the borderColor property to set the border color.
gray
blue
indigo
orange
Background Color
Use the backgroundColor property to set the background color.
gray
blue
indigo
orange
Eyebrow
Use the eyebrow property to add eyebrow content to the card.
Hello world!
gray
Hello world!
blue
Hello world!
indigo
Hello world!
orange
You can use custom elements in the eyebrow. All Text components can inherit their colors.
Nutritionist
2d ago
gray
Title
Use the title property to set card's title. By default, the title will be a level 4 heading.
Your Projects
You can provide your own Heading component to use instead of the default.
Nutritionist
Subtitle
Use the subtitle property to set card's subtitle. By default, the subtitle will be a level 5 heading.
Your Projects
3 active, 2 archived
You can provide your own Heading component to use instead of the default.
Your Projects
3 active, 2 archived
Shadow
Use the elevation property to add shadows to the card.
Your Projects
Your Projects
Your Projects
Your Projects
Your Projects
Sections
Use the CardSection component to add sections to the card.
Logo Design
Pause or resume targeted messaging to your customers.
View and edit the message sent to your customers.
Section Spacing
Use the spacing property to add space between sections. By default, it is $300.
Logo Design
Pause or resume targeted messaging to your customers.
View and edit the message sent to your customers.
Section Title
Use the title property to set the title of the section. By default, the section title will be a level 5 heading.
Logo Design
Enable targeted messages
Pause or resume targeted messaging to your customers.Message template
View and edit the message sent to your customers.Section Icon
Use the icon property to set the icon of the section.
Logo Design
Enable targeted messages
Pause or resume targeted messaging to your customers.Message template
View and edit the message sent to your customers.API
Card
children
Required
ReactNode
as
ElementType<any>
inset
spacing
borderColor
HueName
backgroundColor
HueName
white
eyebrow
ReactNode
title
ReactNode
subtitle
ReactNode
elevation
400
100
200
300
500
data
DataAttributeMap
CardSection
children
Required
ReactNode
title
ReactNode
icon
IconComponent