Cards

Card подходит для компактных виджетов и контентных блоков. Цветовые состояния карточек задаются модификаторами `card-success`, `card-warning`, `card-error`, `card-info`.

Card title

Карточка для контента, виджетов, статусов.

Status title

Primary status card with a short description.

Default

Neutral card for a module, widget, or section.

Pending

Warning state for items that need attention.

Failed

Error state for failed actions or blocked flows.

Info

Informational card for contextual metadata.

Queued

Secondary state for queued or background work.

Monthly usage

84.2%

+12.8% vs previous period

Quick action

Create workflow

Use action cards for primary next steps, onboarding prompts, and compact empty state actions.

Cards HTML

<div class="card status-card card-success">
  <span class="card-title">Status title</span>
  <div class="card-content">
    <div class="status-icon-container">
      <div class="status-icon">
        <i class="ph ph-check-circle"></i>
        OK
      </div>
    </div>
    <p class="status-name">Primary status card.</p>
  </div>
</div>

Metric Card HTML

<div class="card metric-card">
  <div class="card-content">
    <div class="metric-card-header">
      <p class="metric-card-label">Monthly usage</p>
      <span class="metric-card-icon"><i class="ph ph-chart-line-up"></i></span>
    </div>
    <p class="metric-card-value">84.2%</p>
    <div class="metric-card-meta">
      <span class="metric-card-delta">+12.8%</span>
      <span>vs previous period</span>
    </div>
  </div>
</div>

Action Card HTML

<div class="card action-card">
  <div class="card-content">
    <span class="action-card-kicker">Quick action</span>
    <h3 class="action-card-title">Create workflow</h3>
    <p class="action-card-text">
      Use action cards for primary next steps and compact empty state actions.
    </p>
    <div class="action-card-actions">
      <button class="btn btn-secondary btn-small">Preview</button>
      <button class="btn btn-accent btn-small">Create</button>
    </div>
  </div>
</div>