Card
Default
Default card with padding and border
Base
| Class | Description |
|---|---|
.ui-card | Base class |
Variant
| Class | Value |
|---|---|
.ui-card--subtle | subtle |
.ui-card--muted | muted |
Size
| Class | Value |
|---|---|
.ui-card--sm | sm |
.ui-card--lg | lg |
Flush
| Class | Description |
|---|---|
.ui-card--flush | flush |
Interactive
| Class | Description |
|---|---|
.ui-card--interactive | interactive |
Responsive
| Class | Description |
|---|---|
.ui-card--responsive | responsive |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-card-padding |
var(--ui-space-4) |
Padding on all sides |
--ui-card-border-width |
var(--ui-border-width-sm) |
Border thickness |
--ui-card-bg |
var(--ui-color-bg) |
Background color |
--ui-card-border-color |
var(--ui-color-border) |
Border color |
--ui-card-radius |
var(--ui-radius-md) |
Corner radius |
--ui-card-bg-subtle |
var(--ui-color-bg-subtle) |
Bg subtle |
--ui-card-bg-muted |
var(--ui-color-bg-muted) |
Bg muted |
--ui-card-padding-sm |
var(--ui-space-2) |
Padding on all sides at small size |
--ui-card-padding-lg |
var(--ui-space-6) |
Padding on all sides at large size |
--ui-card-bg-hover |
var(--ui-color-bg-subtle) |
Bg hover |
--ui-card-border-color-hover |
var(--ui-color-border-strong) |
Border color hover |
--ui-card-bg-active |
var(--ui-color-bg-muted) |
Bg active |
Background Variants
Default background
Subtle background
Muted background
<div class="ui-card">Default background</div>
<div class="ui-card ui-card--subtle">Subtle background</div>
<div class="ui-card ui-card--muted">Muted background</div>Padding Variants
Small padding
Default padding
Large padding
No padding (flush)
<div class="ui-card ui-card--sm">Small padding</div>
<div class="ui-card">Default padding</div>
<div class="ui-card ui-card--lg">Large padding</div>
<div class="ui-card ui-card--flush">No padding (flush)</div>Interactive
Hover and click this card
Interactive subtle card
<div class="ui-card ui-card--interactive">Hover and click this card</div>
<div class="ui-card ui-card--interactive ui-card--subtle">Interactive subtle card</div>Responsive Container Query
Responsive Card
Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.
<!-- Switches to horizontal layout when container is wide enough. Requires a parent with container-type: inline-size (use ui-container-inline utility). -->
<div class="ui-container-inline">
<div class="ui-card ui-card--responsive">
<div class="ui-card__media" style="background: var(--ui-color-bg-muted); min-block-size: 6rem"></div>
<div class="ui-card__body">
<strong>Responsive Card</strong>
<p>Stacks vertically in narrow containers, switches to side-by-side at >= 30rem.</p>
</div>
</div>
</div>