<section class="section docs-section" id="cards">
                  <h2 class="section-title">Cards</h2>
                  <p class="docs-section-description">Card подходит для компактных виджетов и контентных блоков. Цветовые состояния карточек задаются модификаторами &#96;card-success&#96;, &#96;card-warning&#96;, &#96;card-error&#96;, &#96;card-info&#96;.</p>
                  <div class="cards">
                    <div class="card">
                      <h3 class="card-title">Card title</h3>
                      <div class="card-content">
                        <img src="/assets/imgs/gnexus-mark.svg" alt="" class="card-thumb">
                        <p>Карточка для контента, виджетов, статусов.</p>
                      </div>
                      <div class="card-footer">
                        <button class="btn btn-accent" type="button">Action</button>
                      </div>
                    </div>
                  </div>
                  <div class="block mt-6">
                    <div class="row g-4">
                      <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 with a short description.</p>
                        </div>
                      </div>
                      <div class="card status-card card-primary">
                        <span class="card-title">Default</span>
                        <div class="card-content">
                          <div class="status-icon-container">
                            <div class="status-icon">
                              <i class="ph ph-stack"></i>
                            </div>
                          </div>
                          <p class="status-name">Neutral card for a module, widget, or section.</p>
                        </div>
                      </div>
                      <div class="card status-card card-warning">
                        <span class="card-title">Pending</span>
                        <div class="card-content">
                          <div class="status-icon-container">
                            <div class="status-icon">
                              <i class="ph ph-warning"></i>
                            </div>
                          </div>
                          <p class="status-name">Warning state for items that need attention.</p>
                        </div>
                      </div>
                      <div class="card status-card card-error">
                        <span class="card-title">Failed</span>
                        <div class="card-content">
                          <div class="status-icon-container">
                            <div class="status-icon">
                              <i class="ph ph-warning-octagon"></i>
                            </div>
                          </div>
                          <p class="status-name">Error state for failed actions or blocked flows.</p>
                        </div>
                      </div>
                      <div class="card status-card card-info">
                        <span class="card-title">Info</span>
                        <div class="card-content">
                          <div class="status-icon-container">
                            <div class="status-icon">
                              <i class="ph ph-info"></i>
                            </div>
                          </div>
                          <p class="status-name">Informational card for contextual metadata.</p>
                        </div>
                      </div>
                      <div class="card status-card card-secondary">
                        <span class="card-title">Queued</span>
                        <div class="card-content">
                          <div class="status-icon-container">
                            <div class="status-icon">
                              <i class="ph ph-clock"></i>
                            </div>
                          </div>
                          <p class="status-name">Secondary state for queued or background work.</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="block mt-6">
                    <GnMetricCard label="Monthly usage" value="84.2%" icon="ph-chart-line-up" delta="+12.8%" meta="vs previous period" />
                  </div>
                  <div class="block mt-6">
                    <GnActionCard kicker="Quick action" title="Create workflow" text="Use action cards for primary next steps, onboarding prompts, and compact empty state actions.">
                      <template #actions>
                        <GnButton variant="secondary" size="sm">Preview</GnButton>
                        <GnButton variant="accent" size="sm">Create</GnButton>
                      </template>
                    </GnActionCard>
                  </div>
                  <div class="block mt-6">
                    <h3 class="block-title">Horizontal Card</h3>
                    <GnHorizontalCard image="/assets/imgs/gnexus-mark.svg" title="Project Alpha" title-href="#">
                      <p>Compact horizontal layout for content listings, search results, and entity rows.</p>
                      <template #footer>
                        <span>Updated 2h ago</span>
                        <GnBadge variant="success">Active</GnBadge>
                      </template>
                    </GnHorizontalCard>
                  </div>
                  <div class="block mt-6">
                    <h3 class="block-title">Login Card</h3>
                    <GnLoginCard title="Sign in" username-label="Username" password-label="Password" submit-text="Sign in" forgot-href="#" signup-href="#" @submit="showToast('success', { title: 'Login', text: 'Form submitted' })" />
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Cards HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card status-card card-success"&gt;
  &lt;span class="card-title"&gt;Status title&lt;/span&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="status-icon-container"&gt;
      &lt;div class="status-icon"&gt;
        &lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;
        OK
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="status-name"&gt;Primary status card.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Metric Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card metric-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="metric-card-header"&gt;
      &lt;p class="metric-card-label"&gt;Monthly usage&lt;/p&gt;
      &lt;span class="metric-card-icon"&gt;&lt;i class="ph ph-chart-line-up"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p class="metric-card-value"&gt;84.2%&lt;/p&gt;
    &lt;div class="metric-card-meta"&gt;
      &lt;span class="metric-card-delta"&gt;+12.8%&lt;/span&gt;
      &lt;span&gt;vs previous period&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Action Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card action-card"&gt;
  &lt;div class="card-content"&gt;
    &lt;span class="action-card-kicker"&gt;Quick action&lt;/span&gt;
    &lt;h3 class="action-card-title"&gt;Create workflow&lt;/h3&gt;
    &lt;p class="action-card-text"&gt;
      Use action cards for primary next steps and compact empty state actions.
    &lt;/p&gt;
    &lt;div class="action-card-actions"&gt;
      &lt;button class="btn btn-secondary btn-small"&gt;Preview&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small"&gt;Create&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Horizontal Card HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="card card-horizontal"&gt;
  &lt;div class="card-media"&gt;
    &lt;img src="/assets/imgs/cover.png" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="card-body"&gt;
    &lt;h3 class="card-title"&gt;
      &lt;a href="/projects/alpha"&gt;Project Alpha&lt;/a&gt;
    &lt;/h3&gt;
    &lt;div class="card-content"&gt;
      &lt;p&gt;Description text.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="card-footer"&gt;
      &lt;span&gt;Updated 2h ago&lt;/span&gt;
      &lt;span class="badge badge-success"&gt;Active&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnHorizontalCard</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnHorizontalCard
  image="/assets/imgs/cover.png"
  title="Project Alpha"
  title-href="/projects/alpha"
  icon="ph-arrow-right"&gt;
  &lt;p&gt;Description text.&lt;/p&gt;
  &lt;template #footer&gt;
    &lt;span&gt;Updated 2h ago&lt;/span&gt;
    &lt;GnBadge variant="success"&gt;Active&lt;/GnBadge&gt;
  &lt;/template&gt;
&lt;/GnHorizontalCard&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnLoginCard</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnLoginCard
  title="Sign in"
  username-label="Username"
  password-label="Password"
  submit-text="Sign in"
  remember-me
  forgot-href="/forgot"
  signup-href="/signup"
  @submit="handleLogin"
/&gt;</code></pre>
	</div>
                  <div class="block mt-6">
                    <h3 class="block-title">User Card — Compact</h3>
                    <GnUserCard
                      name="Eugene Sukhodolskiy"
                      email="goldmikki@gmail.com"
                      :avatar="{ src: 'https://auth.gnexus.space/storage/avatars/1/181513cf-3e1b-4b72-bc9d-a1825c736560/original.jpg', status: 'online' }"
                      href="https://auth.gnexus.space/account/profile"
                      compact
                      :actions="[
                        { icon: 'ph-pencil-simple', label: 'Edit profile' },
                        { icon: 'ph-sign-out', label: 'Logout' }
                      ]"
                    />
                  </div>

                  <div class="block mt-6">
                    <h3 class="block-title">User Card — Full</h3>
                    <GnUserCard
                      name="Eugene Sukhodolskiy"
                      email="goldmikki@gmail.com"
                      role="Lead Frontend Engineer"
                      :avatar="{ src: 'https://auth.gnexus.space/storage/avatars/1/181513cf-3e1b-4b72-bc9d-a1825c736560/original.jpg', status: 'online' }"
                      href="https://auth.gnexus.space/account/profile"
                      :actions="[
                        { icon: 'ph-user', label: 'View profile', variant: 'primary' },
                        { icon: 'ph-chat-circle', label: 'Message', variant: 'accent' }
                      ]"
                    />
                  </div>

                  <div class="code-example">
                    <div class="code-example-header">
                      <span class="code-example-title">User Card Compact HTML</span>
                      <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                    </div>
                    <pre><code class="language-html">&lt;article class="card user-card user-card-compact"&gt;
  &lt;div class="user-card-body"&gt;
    &lt;a class="profile-identity" href="#"&gt;
      &lt;span class="identity"&gt;
        &lt;span class="avatar avatar-primary avatar-sm is-online"&gt;
          &lt;img src="..." alt=""&gt;
        &lt;/span&gt;
        &lt;span class="identity-content"&gt;
          &lt;span class="identity-title"&gt;Name&lt;/span&gt;
          &lt;span class="identity-meta"&gt;email@example.com&lt;/span&gt;
        &lt;/span&gt;
      &lt;/span&gt;
    &lt;/a&gt;
    &lt;div class="user-card-actions"&gt;
      &lt;button class="btn-icon" aria-label="Edit"&gt;
        &lt;i class="ph ph-pencil-simple"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
                  </div>

                  <div class="code-example">
                    <div class="code-example-header">
                      <span class="code-example-title">User Card Full HTML</span>
                      <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                    </div>
                    <pre><code class="language-html">&lt;article class="card user-card"&gt;
  &lt;div class="user-card-body"&gt;
    &lt;span class="identity"&gt;
      &lt;span class="avatar avatar-primary is-online"&gt;
        &lt;img src="..." alt=""&gt;
      &lt;/span&gt;
      &lt;span class="identity-content"&gt;
        &lt;span class="identity-title"&gt;Name&lt;/span&gt;
        &lt;span class="identity-meta"&gt;email@example.com&lt;/span&gt;
      &lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="user-card-role"&gt;Role&lt;/span&gt;
    &lt;div class="user-card-actions"&gt;
      &lt;button class="btn btn-primary btn-small"&gt;View profile&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small"&gt;Message&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
                  </div>

                  <div class="code-example">
                    <div class="code-example-header">
                      <span class="code-example-title">Vue: GnUserCard</span>
                      <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                    </div>
                    <pre><code class="language-html">&lt;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' }
  ]"
/&gt;

&lt;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' }
  ]"
/&gt;</code></pre>
                  </div>
</section>