Cards

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

Card title

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

Status title
OK

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.

Horizontal Card

Project Alpha

Compact horizontal layout for content listings, search results, and entity rows.

Updated 2h ago Active
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>
Horizontal Card HTML 
<div class="card card-horizontal">
  <div class="card-media">
    <img src="/assets/imgs/cover.png" alt="">
  </div>
  <div class="card-body">
    <h3 class="card-title">
      <a href="/projects/alpha">Project Alpha</a>
    </h3>
    <div class="card-content">
      <p>Description text.</p>
    </div>
    <div class="card-footer">
      <span>Updated 2h ago</span>
      <span class="badge badge-success">Active</span>
    </div>
  </div>
</div>
Vue: GnHorizontalCard 
<GnHorizontalCard
  image="/assets/imgs/cover.png"
  title="Project Alpha"
  title-href="/projects/alpha"
  icon="ph-arrow-right">
  <p>Description text.</p>
  <template #footer>
    <span>Updated 2h ago</span>
    <GnBadge variant="success">Active</GnBadge>
  </template>
</GnHorizontalCard>