---
url: /api/css/card.md
---
# CSS: card

`.instui-card` · stable — A surface container that accepts arbitrary content.

`base` is the default elevated surface. Use `nested` for a bordered card inside a base card. Padding and corner radii scale with the Card's own width; legacy markup without a `.content` wrapper uses viewport breakpoints.

**Source:** [card.css](https://github.com/thedannywahl/pantoken/blob/main/formats/components/src/components/card/card.css)

## Accessibility

Use `<article>` as the card element when the card is a self-contained unit of content;
use `<section>` when grouped within a larger landmark. In `-variant-container`, prefer
`<section>` elements as direct children so each bordered region carries semantic meaning.

## Usage

@import "@pantoken/components/components.css";

```css
@import "@pantoken/components/components.css";
@import "@pantoken/components/card.css";
```

## Examples

Content card -nocard

```html
<article class="instui-card -variant-base">
  <div class="content">
    <h2>Card title</h2>
    <p>Content here.</p>
  </div>
</article>
```

Container card -nocard

```html
<article class="instui-card -variant-base">
  <div class="content">
    <section class="instui-card -variant-nested">
      <div class="content">First section</div>
    </section>
    <section class="instui-card -variant-nested">
      <div class="content">Second section</div>
    </section>
  </div>
</article>
```

-automatica11y -nocard

```html
<article class="instui-card" data-a11y-root>
  <div class="content">
    <h2>Card title</h2>
    <p>Content here.</p>
    <button class="instui-button" data-a11y-trigger>Action</button>
  </div>
</article>
```

## Modifiers

| Modifier | Description |
| --- | --- |
| `.-variant-base` | Standard content card; children are unstyled. Default when no variant is set. |
| `.-variant-container` | Deprecated — use `.-variant-nested`. |
| `.-variant-content` | Deprecated — use `.-variant-base`. |
| `.-variant-nested` | Border-only surface for a card inside a base card. |

## Conditions

| Type | Query | Description |
| --- | --- | --- |
| container | `(width >=20rem)` | — |
| container | `(width >=40rem)` | — |
| media | `(min-width: 20rem)` | — |
| media | `(min-width: 40rem)` | — |

## Tokens consumed

| Token | Type | Value |
| --- | --- | --- |
| `--instui-component-card-background-color` | `<color>` | `light-dark(#ffffff, #1C222B)` |
| `--instui-component-card-border-radius-base-lg` | `<length>` | `1rem` |
| `--instui-component-card-border-radius-base-md` | `<length>` | `1rem` |
| `--instui-component-card-border-radius-base-sm` | `<length>` | `0.75rem` |
| `--instui-component-card-border-radius-nested-lg` | `<length>` | `0.75rem` |
| `--instui-component-card-border-radius-nested-md` | `<length>` | `0.5rem` |
| `--instui-component-card-border-radius-nested-sm` | `<length>` | `0.5rem` |
| `--instui-component-card-nested-border-color` | `<color>` | `light-dark(#E8EAEC, #2D3D49)` |
| `--instui-component-card-padding-base-lg` | `<length>` | `1.5rem` |
| `--instui-component-card-padding-base-md` | `<length>` | `1rem` |
| `--instui-component-card-padding-base-sm` | `<length>` | `0.75rem` |
| `--instui-component-card-padding-nested-lg` | `<length>` | `1rem` |
| `--instui-component-card-padding-nested-md` | `<length>` | `0.75rem` |
| `--instui-component-card-padding-nested-sm` | `<length>` | `0.5rem` |
| `--instui-component-shared-tokens-spacing-gap-cards-nested-containers-lg` | `<length>` | `1rem` |
| `--instui-component-shared-tokens-spacing-gap-cards-nested-containers-md` | `<length>` | `0.75rem` |
| `--instui-component-shared-tokens-spacing-gap-cards-nested-containers-sm` | `<length>` | `0.5rem` |
| `--instui-component-shared-tokens-stroke-width-sm` | `<length>` | `0.0625rem` |
| `--instui-elevation-card` | `none \| <shadow>#` | — |