ZAO造

Card

A surface that groups related content without adding interaction of its own.

Preview

Su uses the Quiet instrument direction. Use the mode switcher above to see light and dark.

The storage ring is the first chart study. Read the data visualization guideline.

Layout

Related content and an open instrument readout, separated by a fine rule.

640px

North workspace

Workspace / 001
Operational

Review settings before they are shared with your team.

Active members
12
Last update
Today

Total capacity: 100 parts.

Record 01 / live

480px

North workspace

Workspace / 001
Operational

Review settings before they are shared with your team.

Active members
12
Last update
Today

Total capacity: 100 parts.

Record 01 / live

Usage

  • Use a card when content needs a distinct surface and a clear boundary.
  • Put headings and actions inside the card. Keep the card itself non-interactive.
  • Choose Split for content beside data, Stacked for a single reading column, Compact for a short summary, or Media when a visual leads the content.
  • Compose the layout with children and spacing classes. Each layout uses the same Card and follows the selected finish.

API

PropValuesDefault
childrenReactNode—
classNamestring—
div propsHTML div attributes—

Example

import { Button, Card } from '@zao/react';

<Card className="flex flex-col gap-4">
  <h2 className="type-heading">North workspace</h2>
  <p className="type-body text-muted">Review the settings.</p>
  <div className="flex flex-wrap justify-end gap-2 border-t border-subtle pt-4">
    <Button variant="secondary">Review settings</Button>
    <Button>Manage storage</Button>
  </div>
</Card>

Accessibility

Card is a plain content container. It does not enter the tab order; headings, links, and buttons inside it keep their native semantics.