Skip to main content

​
Card

The Card component is a versatile container used to group related content. It provides built-in support for shadows, borders, backgrounds (including gradients), and standard padding presets.

​
Usage

<Card padding="lg">
  <Title value="Card Title" />
  <Text value="This is the card content." />
</Card>

​
Props

​
padding
string | number
default:"md"
Internal padding. Presets: xs, sm, md, lg, xl, 2xl.
​
radius
string
default:"lg"
Border radius. Presets: sm, md, lg, xl, 2xl.
​
shadow
string
default:"sm"
Shadow depth: none, sm, md, lg.
​
background
string
default:"surface"
Background color. Can be surface, primary, a hex code, or a linear-gradient(...) string.
​
border
boolean
default:"true"
Whether to show a border.
​
fullWidth
boolean
default:"true"
Whether the card takes up 100% width.
​
size
string
Size preset that affects padding (sm, md, lg).

​
Examples

​
Gradient Background

<Card background="linear-gradient(135deg, #FF6B6B 0%, #556270 100%)" theme="dark">
  <Text value="Gradient Card" color="white" />
</Card>

​
With Actions

Cards support built-in confirm/cancel button configurations (passed as props) or can contain custom actions in the children. 
<Card 
  confirm={{ label: "Save", action: { type: "save" } }}
  cancel={{ label: "Cancel", action: { type: "cancel" } }}
>
  <Text value="Confirm action?" />
</Card>