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

string | number

default:"md"

Internal padding. Presets: xs, sm, md, lg, xl, 2xl.

string

default:"lg"

Border radius. Presets: sm, md, lg, xl, 2xl.

string

default:"sm"

Shadow depth: none, sm, md, lg.

string

default:"surface"

Background color. Can be surface, primary, a hex code, or a linear-gradient(...) string.

boolean

default:"true"

Whether to show a border.

boolean

default:"true"

Whether the card takes up 100% width.

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>

Overview

Components

Guides

Card

Card

Usage

Props

Examples

Gradient Background

With Actions

​Card

​Usage

​Props

​Examples

​Gradient Background

​With Actions

Card

Usage

Props

Examples

Gradient Background

With Actions