Cards

Primary card

Primary Card is used to highlight key information or actions, drawing attention to important content within a layout in a visually constistent manner.

Card title

A description very interesting that presumably relates to the card.

Prop
Type
Default value
Prop

title

Type
string
Default value
Prop
description
Type
string
Default value
Prop
icon
Type
Default value
Prop
iconUrl
Type
string
Default value
Prop
infoUrl
Type
string
Default value
Prop
infoText
Type
string
Default value
Prop
size
Type
"sm", "md"
Default value
"md"
Prop
hasShadow
Type
boolean
Default value
false
Prop
isSelected
Type
boolean
Default value
false
Prop
alignContent
Type
"center", "start", "end"
Default value
"center"
Prop
disabled
Type
boolean
Default value
false
Prop
topBadgeText
Type
string
Default value
Prop
onButtonClick
Type
(value: string) => void
Default value

Secondary card

Secondary Card is used to display important and often repeated Information.

Card title

experimental

A description very interesting that presumably relates to the card.

Read more

© 2025 ClickHouse, Inc. HQ in the Bay Area, CA and Amsterdam, NL.