Card — Zyna UI

Variants

Workspace

Q1 Report

Libya Aid Programme · 2024

Published

Void

Dark Variant

Deepest layer · dashboard use

Classified

Priority

Glow Variant

High-priority surface · animated

Urgent

Small

Small Variant

Reduced padding · dense layouts

Dense

<!-- Base -->
<div class="card">
  <div class="card-header">Workspace</div>
  <div class="card-body">
    <p class="card-title">Q1 Report</p>
    <p class="card-subtitle">Libya Aid Programme · 2024</p>
    <span class="badge badge-success badge-pulse">Published</span>
  </div>
  <div class="card-footer" style="display:flex;gap:0.5rem">
    <button class="btn btn-ghost btn-sm">Dismiss</button>
    <button class="btn btn-primary btn-sm">View</button>
  </div>
</div>

<!-- Dark variant — deepest background layer -->
<div class="card card-dark">
  <div class="card-header">Void</div>
  <div class="card-body">
    <p class="card-title">Dark Variant</p>
    <p class="card-subtitle">Deepest layer · dashboard use</p>
    <span class="badge badge-secondary">Classified</span>
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary btn-sm">Access</button>
  </div>
</div>

<!-- Glow variant — animated gold pulse border -->
<div class="card card-glow">
  <div class="card-header">Priority</div>
  <div class="card-body">
    <p class="card-title">Glow Variant</p>
    <p class="card-subtitle">High-priority surface · animated</p>
    <span class="badge badge-warning">Urgent</span>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">Action</button>
  </div>
</div>

<!-- Small variant — reduced padding for dense layouts -->
<div class="card card-sm">
  <div class="card-header">Small</div>
  <div class="card-body">
    <p class="card-title">Small Variant</p>
    <p class="card-subtitle">Reduced padding · dense layouts</p>
    <span class="badge badge-info">Dense</span>
  </div>
  <div class="card-footer" style="display:flex;gap:0.5rem">
    <button class="btn btn-ghost btn-sm">Skip</button>
    <button class="btn btn-secondary btn-sm">Save</button>
  </div>
</div>

Shapes

Bevel

Octagonal bevel

Round

Rounded corners

<div class="card card-bevel">
  <div class="card-header">Bevel</div>
  <div class="card-body">
    <p class="card-subtitle">Octagonal bevel</p>
  </div>
</div>

<div class="card card-round">
  <div class="card-header">Round</div>
  <div class="card-body">
    <p class="card-subtitle">Rounded corners</p>
  </div>
</div>

CSS Variable API

These are element-level tokens (Tier 2) — set them on a specific card element to override the genre defaults for that instance only. To change all cards globally, use the Genre Builder via Tier 1 tokens →

Variable	Default	Description
--card-gradient	linear-gradient(145deg, rgba(18,16,28,0.97)…)	Base colour gradient (scanlines overlay automatically)
--card-border-color	rgba(255,255,255,0.05)	Border colour
--card-shadow	0 24px 70px rgba(0,0,0,0.60)…	Box shadow
--card-bracket-color	color-mix(in oklch, var(--zyna) 42%, transparent)	Corner L-bracket stroke colour
--card-bracket-size	20px	Corner bracket arm length
--card-bar-gradient	linear-gradient(90deg, …)	Top luminescent power-bar gradient
--card-bar-shadow	genre default	Top power-bar glow (box-shadow)
--card-title-text-shadow	genre default	Title text glow (set to none to suppress genre neon)
--card-header-bg	genre default	Header background colour (overrides genre tint)
--card-header-border	genre default	Divider line between header/body and body/footer
--card-header-color	genre default	Header label text colour
--card-header-text-shadow	genre default	Header text glow (set to none to suppress genre neon)
--card-header-dot-color	genre default	Status dot colour
--card-header-dot-shadow	genre default	Status dot glow (box-shadow)
--card-animation	none	CSS animation shorthand (e.g. zyna-card-pulse 4s ease-in-out infinite)
--card-glow-lo	rgba(0,0,0,0)	Pulse glow colour at rest (used by zyna-card-pulse keyframe)
--card-glow-hi	rgba(0,0,0,0)	Pulse glow colour at peak (used by zyna-card-pulse keyframe)

Custom Variant

Override only the variables you need. The cyan "cyber" example below creates an electric-blue card.

Cyber

Cyber Variant

Custom cyan theme

Active

.card-cyber {
  --card-gradient:         linear-gradient(145deg, rgba(0,20,30,0.97) 0%, rgba(0,10,18,0.97) 100%);
  --card-border-color:     rgba(0,212,255,0.22);
  --card-shadow:           0 0 0 1px rgba(0,212,255,0.15), 0 8px 32px rgba(0,0,0,0.6);
  --card-bracket-color:    rgba(0,212,255,0.55);
  --card-bar-gradient:     linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.55) 25%, rgba(0,212,255,0.55) 75%, transparent 100%);
  --card-bar-shadow:       0 0 14px rgba(0,212,255,0.7), 0 0 32px rgba(0,212,255,0.3);
  --card-title-text-shadow:  none;
  --card-header-bg:          rgba(0,212,255,0.06);
  --card-header-border:      rgba(0,212,255,0.18);
  --card-header-color:       rgba(0,212,255,0.9);
  --card-header-text-shadow: none;
  --card-header-dot-color:   rgba(0,212,255,0.7);
  --card-header-dot-shadow:  0 0 8px rgba(0,212,255,0.7), 0 0 20px rgba(0,212,255,0.35);
  --card-glow-lo:          rgba(0,212,255,0.12);
  --card-glow-hi:          rgba(0,212,255,0.26);
  --card-animation:        zyna-card-pulse 4s ease-in-out infinite;
}

.badge-cyber {
  --badge-bg:    rgba(0,212,255,0.12);
  --badge-color: rgba(0,212,255,0.9);
  --badge-glow:  drop-shadow(0 0 5px rgba(0,212,255,0.45));
}

.btn-cyber {
  --btn-bg:                rgba(0,212,255,0.45);
  --btn-color:             rgba(0,212,255,0.9);
  --btn-scan-color:        rgba(0,212,255,0.18);
  --btn-hover-bg:          rgba(0,212,255,0.92);
  --btn-hover-color:       rgba(220,248,255,1);
  --btn-hover-filter:      drop-shadow(0 0 14px rgba(0,212,255,0.85)) drop-shadow(0 0 42px rgba(0,212,255,0.3));
  --btn-hover-text-shadow: 0 0 14px rgba(0,212,255,0.8);
}

When to Use

Use cards to group semantically related information: a record, a report, an entity. Cards create visual containers that let users compare items in a grid.

✓ Do

Use .card-glow for featured, selected, or highlighted items
Use .card-dark for embedded cards on lighter backgrounds
Use .card-sm for dense list-style layouts
Include a card-header to label the data context
Keep card content focused: one primary piece of info with supporting detail

✗ Don't

Don't nest cards inside cards
Don't omit the card-header when the data context isn't obvious from the content
Don't mix variants in the same grid without a clear reason
Don't overload a card with more than 2–3 data points. Use a detail page instead.
Don't use cards as navigation elements unless you add a clear CTA