Layout

Cards for grouped dashboard content

Cards bundle headers, body content, and actions into a predictable surface for dashboards and marketing layouts. Use them in React apps and Next.js pages that need modular content blocks.

Usage this month

Resets on the first of next month.

72%

of included API calls consumed

Production card patterns

Twenty reusable card compositions built only from the existing Card primitive and its exported sections.

20 variants

Pulse Analytics Hub

Real-time reporting for growing SaaS teams.

$149

Maya Chen

VP Operations at Northstar

128

Projects

94%

SLA

Teams

Operations

How elite teams design decision loops

A practical guide to reducing ambiguity without adding meeting load.

Pro

Popular

$29/seat

For teams ready to automate recurring work.

Unlimited workflows
Advanced permissions
Priority support

“The platform gave our product and support leaders one shared operating picture. We stopped debating status and started improving outcomes.”

+18.4%

42.8k

Qualified product events this week

Workspace summary

Updated 2 minutes ago

Release readiness92%

Open approvals14

At-risk workflows3

Usage threshold reached

Your ingestion volume is at 82% for the current billing cycle.

Automation rules

Route work, assign owners, and escalate blockers without brittle scripts.

Workflow Console

Annual subscription, 10 seats

Qty 1$2,900

May

ScaleOps roundtable

San Francisco, CA

Remote

Senior Frontend Engineer

Design Systems · Full-time · US/EU overlap

Analytics for product teams

Instructor: Lena Ortiz · 18 lessons

Progress64%

Release notes radio

Episode 42 · Platform reliability

Ravi Kumar

Shared a deployment insight

We cut review time by pairing release ownership with automated risk signals. The biggest win was fewer context-switching escalations.

Pipeline health

Weekly conversion by stage

Conversion

31.8%

Velocity

4.2 days

Noor Patel

Design Systems Lead

Owns component quality, accessibility reviews, and release polish for the product surface.

Q2 operating review.pdf

8.4 MB · Updated today

Invoice #ZT-2048

Due May 30, 2026

Amount due

$4,820.00

Pending

No documents yet

Upload contracts, invoices, or onboarding files to keep this workspace organized.

Card variants examples

Appearance, size, and rounded radius tokens with a minimal header layout. Code blocks start with Variant: for the row.

Appearance: DEFAULT, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: MD, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GHOST, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ELEVATED, Size: MD, Rounded: MD

Brief supporting description.

Appearance: SKY, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ROSE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: PURPLE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: PINK, Size: MD, Rounded: MD

Brief supporting description.

Appearance: ORANGE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: YELLOW, Size: MD, Rounded: MD

Brief supporting description.

Appearance: TEAL, Size: MD, Rounded: MD

Brief supporting description.

Appearance: INDIGO, Size: MD, Rounded: MD

Brief supporting description.

Appearance: EMERALD, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRAY, Size: MD, Rounded: MD

Brief supporting description.

Appearance: AMBER, Size: MD, Rounded: MD

Brief supporting description.

Appearance: VIOLET, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-BLUE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-GREEN, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-RED, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-YELLOW, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-PURPLE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-TEAL, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-INDIGO, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-PINK, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GRADIENT-ORANGE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: SM, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: MD, Rounded: MD

Brief supporting description.

Appearance: GLASS, Size: LG, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: SM

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: MD

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: LG

Brief supporting description.

Appearance: OUTLINE, Size: MD, Rounded: FULL

Brief supporting description.

CSS variable overrides

Card CSS variables

Override these card variables on :root, a theme selector, or a component wrapper.

139 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-card-fg: oklch(20.8% 0.042 265.755);
  --zui-card-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-card-ring-focus: oklch(44.6% 0.043 257.281);
  --zui-card-default-border: #0000001a;
  --zui-card-default-bg: #0000000d;
  --zui-card-default-shadow: 0 1px 2px rgba(15,23,42,0.08);
  --zui-card-glass-border: #00000026;
  --zui-card-glass-bg: #0000001a;
  --zui-card-glass-shadow: 0 8px 24px rgba(15,23,42,0.12);
  --zui-card-outline-border: #00000026;
  --zui-card-outline-bg: transparent;
  --zui-card-ghost-border: transparent;
  --zui-card-ghost-bg: transparent;
  --zui-card-elevated-border: #0000001a;
  --zui-card-elevated-bg: oklch(96.8% 0.007 247.896 / 0.8);
  --zui-card-elevated-shadow: 0 12px 32px rgba(15,23,42,0.12);
  --zui-card-sky-border: oklch(44.3% 0.11 240.79);
  --zui-card-sky-bg: oklch(97.7% 0.013 236.62);
  --zui-card-rose-border: oklch(45.5% 0.188 13.697);
  --zui-card-rose-bg: oklch(96.9% 0.015 12.422);
  --zui-card-purple-border: oklch(43.8% 0.218 303.724);
  --zui-card-purple-bg: oklch(97.7% 0.014 308.299);
  --zui-card-pink-border: oklch(45.9% 0.187 3.815);
  --zui-card-pink-bg: oklch(97.1% 0.014 343.198);
  --zui-card-orange-border: oklch(47% 0.157 37.304);
  --zui-card-orange-bg: oklch(98% 0.016 73.684);
  --zui-card-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-card-yellow-bg: oklch(98.7% 0.026 102.212);
  --zui-card-teal-border: oklch(43.7% 0.078 188.216);
  --zui-card-teal-bg: oklch(98.4% 0.014 180.72);
  --zui-card-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-card-indigo-bg: oklch(96.2% 0.018 272.314);
  --zui-card-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-card-emerald-bg: oklch(97.9% 0.021 166.113);
  --zui-card-gray-border: oklch(27.8% 0.033 256.848);
  --zui-card-gray-bg: oklch(98.5% 0.002 247.839);
  --zui-card-amber-border: oklch(47.3% 0.137 46.201);
  --zui-card-amber-bg: oklch(98.7% 0.022 95.277);
  --zui-card-violet-border: oklch(43.2% 0.232 292.759);
  --zui-card-violet-bg: oklch(96.9% 0.016 293.756);
  --zui-card-gradient-blue-border: oklch(42.4% 0.199 265.638);
  --zui-card-gradient-blue-from: oklch(97% 0.014 254.604);
  --zui-card-gradient-blue-to: oklch(97.7% 0.014 308.299);
  --zui-card-gradient-green-border: oklch(44.8% 0.119 151.328);
  --zui-card-gradient-green-from: oklch(98.2% 0.018 155.826);
  --zui-card-gradient-green-to: oklch(98.6% 0.031 120.757);
  --zui-card-gradient-red-border: oklch(44.4% 0.177 26.899);
  --zui-card-gradient-red-from: oklch(97.1% 0.013 17.38);
  --zui-card-gradient-red-to: oklch(97.1% 0.014 343.198);
  --zui-card-gradient-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-card-gradient-yellow-from: oklch(98.7% 0.026 102.212);
  --zui-card-gradient-yellow-to: oklch(98% 0.016 73.684);
  --zui-card-gradient-purple-border: oklch(43.8% 0.218 303.724);
  --zui-card-gradient-purple-from: oklch(97.7% 0.014 308.299);
  --zui-card-gradient-purple-to: oklch(97.1% 0.014 343.198);
  --zui-card-gradient-teal-border: oklch(43.7% 0.078 188.216);
  --zui-card-gradient-teal-from: oklch(98.4% 0.014 180.72);
  --zui-card-gradient-teal-to: oklch(98.4% 0.019 200.873);
  --zui-card-gradient-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-card-gradient-indigo-from: oklch(96.2% 0.018 272.314);
  --zui-card-gradient-indigo-to: oklch(97.7% 0.014 308.299);
  --zui-card-gradient-pink-border: oklch(45.9% 0.187 3.815);
  --zui-card-gradient-pink-from: oklch(97.1% 0.014 343.198);
  --zui-card-gradient-pink-to: oklch(96.9% 0.015 12.422);
  --zui-card-gradient-orange-border: oklch(47% 0.157 37.304);
  --zui-card-gradient-orange-from: oklch(98% 0.016 73.684);
  --zui-card-gradient-orange-to: oklch(97.1% 0.013 17.38);
  --zui-card-header-border: #0000001a;
  --zui-card-footer-border: #0000001a;
  --zui-card-title-fg: oklch(12.9% 0.042 264.695);
  --zui-card-description-fg: oklch(55.4% 0.046 257.417);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-card-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-card-ring-offset-dark: oklch(12.9% 0.042 264.695);
  /* ...same variables with -dark at the end */
}

What it does

Cards are intentionally dumb containers: push business logic up a layer.

Use consistent padding tokens so grids align across breakpoints.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Keep heading levels coordinated with surrounding page structure for SEO and accessibility.

Common use cases

Surface KPI summaries on analytics landing pages.
Group related settings with a clear title and footer actions.
Present catalog items with media, price, and CTA rows.
Stack quick links in responsive grids.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Card component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize card with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Card implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.