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.

Horizontal Card

Project Alpha

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

Updated 2h ago Active

Login Card

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>

Vue: GnLoginCard

<GnLoginCard
  title="Sign in"
  username-label="Username"
  password-label="Password"
  submit-text="Sign in"
  remember-me
  forgot-href="/forgot"
  signup-href="/signup"
  @submit="handleLogin"
/>

User Card — Compact

Eugene Sukhodolskiy goldmikki@gmail.com

User Card — Full

Eugene Sukhodolskiy goldmikki@gmail.com Lead Frontend Engineer

User Card Compact HTML

<article class="card user-card user-card-compact">
  <div class="user-card-body">
    <a class="profile-identity" href="#">
      <span class="identity">
        <span class="avatar avatar-primary avatar-sm is-online">
          <img src="..." alt="">
        </span>
        <span class="identity-content">
          <span class="identity-title">Name</span>
          <span class="identity-meta">email@example.com</span>
        </span>
      </span>
    </a>
    <div class="user-card-actions">
      <button class="btn-icon" aria-label="Edit">
        <i class="ph ph-pencil-simple"></i>
      </button>
    </div>
  </div>
</article>

User Card Full HTML

<article class="card user-card">
  <div class="user-card-body">
    <span class="identity">
      <span class="avatar avatar-primary is-online">
        <img src="..." alt="">
      </span>
      <span class="identity-content">
        <span class="identity-title">Name</span>
        <span class="identity-meta">email@example.com</span>
      </span>
    </span>
    <span class="user-card-role">Role</span>
    <div class="user-card-actions">
      <button class="btn btn-primary btn-small">View profile</button>
      <button class="btn btn-accent btn-small">Message</button>
    </div>
  </div>
</article>

Vue: GnUserCard

<GnUserCard
  name="Eugene Sukhodolskiy"
  email="goldmikki@gmail.com"
  role="Lead Frontend Engineer"
  :avatar="{ src: '...', status: 'online' }"
  href="/profile"
  :actions="[
    { icon: 'ph-user', label: 'View profile', variant: 'primary' },
    { icon: 'ph-chat-circle', label: 'Message', variant: 'accent' }
  ]"
/>

<GnUserCard
  name="Eugene Sukhodolskiy"
  email="goldmikki@gmail.com"
  :avatar="{ src: '...', status: 'online' }"
  href="/profile"
  compact
  :actions="[
    { icon: 'ph-pencil-simple', label: 'Edit profile' },
    { icon: 'ph-sign-out', label: 'Logout' }
  ]"
/>