Skip to content
DOL Studio

Card

Design: extension Code: Code only surfacecontainer

Live preview

LinkCard primitive

Wraps Card with title + description + arrow indicator. Click goes nowhere in this demo.

Import & files

Import
import { Card } from "@/components/ui/Card";
Source file
components/ui/Card.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
padding 'sm' | 'md' | 'lg' 'md' —
hoverable boolean false —

Usage

Never nest Card inside Card (slop-03). Flatten via spacing + typography hierarchy instead.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • Basic surface card

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Card
Domain: general · Category: layout
Design: extension · Code: code-only


## Description
Base surface block - white bg + `border-slate-100` + soft shadow. Building block for FeatureCard, StatBlock, etc.


## Import
```ts
import { Card } from "@/components/ui/Card";
```
Source: `components/ui/Card.tsx`


## Props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
| `padding` | `'sm' | 'md' | 'lg'` | 'md' |  |
| `hoverable` | `boolean` | false |  |


## Usage
Never nest Card inside Card (slop-03). Flatten via spacing + typography hierarchy instead.


## Examples
- **Basic surface card**

Related

  • Kid Card
    Pressable surface

    KidCard

    KIDCode only
  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • FeatureCard

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).