Card & CardGrid

content

Surface card with optional kicker eyebrow, title, and body text.CardGrid wraps cards in an auto-fit grid layout.

Preview

Scale1.00

tokens

Design Tokens

CSS custom properties for color, typography, spacing, and motion -- the single source of truth.

css

Component CSS

Framework-agnostic stylesheet. Get the full look with zero JavaScript.

solid

SolidJS Components

Typed, accessible, CSS-first components for interactive surfaces.

Usage

import { Card, CardGrid } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<CardGrid>
  <Card kicker="01" title="Authentication">
    Verify identity with OAuth 2.0 + OIDC.
  </Card>
  <Card kicker="02" title="Authorization">
    Relationship-based access control.
  </Card>
</CardGrid>

Props — Card

Prop	Type	Default	Description
`kicker`	`string`	--	Eyebrow label
`title`	`string`	--	Card heading (h4)
`children`	`JSX.Element`	--	Body content
`class`	`string`	--	Additional CSS classes

Props — CardGrid

Prop	Type	Default	Description
`children`	`JSX.Element`	--	Card elements
`class`	`string`	--	Additional CSS classes

Accessibility

Structure: Uses semantic h4 for card titles within document flow.
Contrast: Kicker text uses --muted on --surface (AA compliant).
Responsive: Grid auto-fits down to single column on narrow viewports.

Do / Don't

Do

Use CardGrid for 2-4 related items with comparable content length.

Don't

Don't nest interactive controls inside cards unless the card is an explicit link or action target.