Card

A simple unstyled container element. Pass data-color and data-size to drive your design token styles.

Features

Unstyled container element.

Supports color and size variants via data attributes.

Composable with any child content.

Example

Wire UI

Wireframe primitives for modern frameworks

Anatomy


import { Card, Avatar } from '@wire-ui/react'
 
<Card>
<Avatar.Root>
<Avatar.Fallback>W</Avatar.Fallback>
</Avatar.Root>
<div>
<h3>Wire UI</h3>
<p>Wireframe primitives for modern frameworks</p>
</div>
</Card>

Styling

Card passes data-color and data-size as standard HTML attributes. Use them as CSS hooks for your design tokens.


<Card color="primary" size="large" className="
  [data-color=primary]:bg-gray-50
  [data-color=inverse]:bg-black [data-color=inverse]:text-white
  [data-size=small]:p-3
  [data-size=large]:p-6
" />

Using data attributes

Card sets data-color and data-size from their respective props.


[data-color="primary"] { background: #f5f5f5; }
[data-color="inverse"] { background: #000; color: #fff; }
[data-size="small"]    { padding: 0.75rem; }
[data-size="large"]    { padding: 1.5rem; }

Props

All standard HTMLAttributes<HTMLDivElement> — className, onClick, etc. data-color and data-size are passed through as standard HTML attributes and used as CSS hooks.

Styling with data attributes


[data-color="blue"]  { background: var(--color-blue-50); }
[data-color="green"] { background: var(--color-green-50); }
[data-size="small"]  { padding: var(--space-2); }
[data-size="large"]  { padding: var(--space-6); }