Cards

Container with padding, border, and shadow variants.

Variants

Default

Subtle primary tint.

Primary

Stronger primary tint.

Secondary

Secondary color tint.

Glass

Frosted glass blur.

Alert Cards

Information

This is an informational alert.

Confirm Action

Are you sure you want to proceed?

API Reference

Classes

Class	Description
`.card`	Base container
`.card:alert`	Alert variant

Modifiers

Class	Description
`pri`	Primary tint
`sec`	Secondary tint
`gla`	Glass effect

Usage

<!-- Basic card -->
<div class="card">
  <h3>Title</h3>
  <p>Content</p>
</div>

<!-- Card variants -->
<div class="card:pri">...</div>
<div class="card:sec">...</div>
<div class="card:gla">...</div>

<!-- Alert with actions -->
<div class="card:alert">
  <h3>Alert Title</h3>
  <p>Alert message</p>
  <div class="flex:cluster g-xs">
    <button class="btn:sec-sm out">Cancel</button>
    <button class="btn:pri-sm out">Confirm</button>
  </div>
</div>