Default Card
Default Card
This is a simple card with default props.
default-card.tsx
<Card title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />Card
The Card component is a flexible container for displaying information, media, and actions in a consistent layout.
Usage & Examples
Visual variants
Themes
primary
Default Card
This is a simple card with default props.
secondary
Default Card
This is a simple card with default props.
tertiary
Default Card
This is a simple card with default props.
quaternary
Default Card
This is a simple card with default props.
States
success
Default Card
This is a simple card with default props.
warning
Default Card
This is a simple card with default props.
error
Default Card
This is a simple card with default props.
info
Default Card
This is a simple card with default props.
Sizes
xs
Default Card
This is a simple card with default props.
small
Default Card
This is a simple card with default props.
medium
Default Card
This is a simple card with default props.
large
Default Card
This is a simple card with default props.
Variants
solid
Default Card
This is a simple card with default props.
outline
Default Card
This is a simple card with default props.
glass
Default Card
This is a simple card with default props.
Rounding
none
Default Card
This is a simple card with default props.
medium
Default Card
This is a simple card with default props.
large
Default Card
This is a simple card with default props.
Shadows
none
Default Card
This is a simple card with default props.
light
Default Card
This is a simple card with default props.
strong
Default Card
This is a simple card with default props.
visual-variants.tsx
// Themes
<Card theme="primary" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card theme="secondary" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card theme="tertiary" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card theme="quaternary" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// States
<Card state="success" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card state="warning" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card state="error" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card state="info" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// Sizes
<Card size="xs" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card size="small" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card size="medium" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card size="large" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// Variants
<Card variant="solid" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card variant="outline" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card variant="glass" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// Rounding
<Card rounding="none" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card rounding="medium" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card rounding="large" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// Shadows
<Card shadow="none" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card shadow="light" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
<Card shadow="strong" title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />Interaction states
Disabled
Default Card
This is a simple card with default props.
Loading
Loading content...
interaction-states.tsx
// Disabled
<Card disabled title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />
// Loading
<Card loading title="Default Card" description="This is a simple card with default props." imageUrl={Logo} />