Cards
Cards are frosted-glass content containers built from .ziom-card plus
optional -header, -body, and -footer regions.
Header, Body & Footer
Card Title
Card content goes here. Cards use a subtle glass background and hairline border.
HTML
<div class="ziom-card">
<div class="ziom-card-header">
<h3 class="ziom-card-title">Card Title</h3>
<button class="ziom-btn ziom-btn-sm ziom-btn-secondary">Action</button>
</div>
<div class="ziom-card-body">
Card content goes here. Cards use a subtle glass background and hairline border.
</div>
<div class="ziom-card-footer">
<button class="ziom-btn ziom-btn-secondary">Cancel</button>
<button class="ziom-btn ziom-btn-primary">Save</button>
</div>
</div>Interactive Card
Adds a hover lift and shadow — useful for clickable cards and links.
Hover me — I lift and cast a deeper shadow.
HTML
<div class="ziom-card ziom-card-interactive">
<div class="ziom-card-body">
Hover me — I lift and cast a deeper shadow.
</div>
</div>Info Cards
Total Revenue
$24,500
+12% from last month
Active Leads
312
Across 14 buildings
HTML
<div class="ziom-info-card">
<div class="ziom-info-card-label">Total Revenue</div>
<div class="ziom-info-card-value">$24,500</div>
<div class="ziom-info-card-description">+12% from last month</div>
</div>
<div class="ziom-info-card">
<div class="ziom-info-card-label">Active Leads</div>
<div class="ziom-info-card-value">312</div>
<div class="ziom-info-card-description">Across 14 buildings</div>
</div>Card Grid
Use .ziom-card-grid with a count modifier (-2 through -6).
One
Two
Three
HTML
<div class="ziom-card-grid ziom-card-grid-3">
<div class="ziom-card"><div class="ziom-card-body">One</div></div>
<div class="ziom-card"><div class="ziom-card-body">Two</div></div>
<div class="ziom-card"><div class="ziom-card-body">Three</div></div>
</div>