Cards And Stats

<section class="row g-4">
      <div class="col-sm-6 col-xl-3">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Small</span>
          <h2 class="h5">Metric Card</h2>
          <p class="display-6 fw-bold mb-1">98%</p>
          <p class="text-secondary mb-0">Task completion</p>
        </article>
      </div>
      <div class="col-sm-6 col-xl-3">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Small</span>
          <h2 class="h5">Action Card</h2>
          <p class="text-secondary">Compact content with one clear next step.</p>
          <a class="btn btn-outline-primary btn-sm" href="../pages/dashboard-blank.html">Open Starter</a>
        </article>
      </div>
      <div class="col-md-6 col-xl-3">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Loading</span>
          <h2 class="h5">Skeleton Card</h2>
          <div class="placeholder-glow" aria-label="Loading example">
            <span class="placeholder col-8"></span>
            <span class="placeholder col-12"></span>
            <span class="placeholder col-10"></span>
            <span class="placeholder col-6"></span>
          </div>
        </article>
      </div>
      <div class="col-md-6 col-xl-3">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Empty</span>
          <h2 class="h5">Empty State</h2>
          <div class="athena-empty compact">
            <i class="bi bi-inbox" aria-hidden="true"></i>
            <p>No records yet.</p>
          </div>
        </article>
      </div>

      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
              <span class="badge text-bg-info mb-3">Large</span>
              <h2 class="h4">Wide Insight Card</h2>
              <p class="text-secondary mb-0">Use a wider card for content that needs scanning space, such as charts, timelines, or summaries.</p>
            </div>
            <button class="btn btn-outline-primary btn-sm" type="button" data-athena-toast>Notify</button>
          </div>
          <div class="row g-3 align-items-end">
            <div class="col-md-8">
              <div class="athena-demo-frame" aria-label="Bar chart style card placeholder">
                <div class="row g-2 align-items-end">
                  <div class="col"><div class="athena-demo-box" style="min-height: 4rem;">Mon</div></div>
                  <div class="col"><div class="athena-demo-box" style="min-height: 7rem;">Tue</div></div>
                  <div class="col"><div class="athena-demo-box" style="min-height: 5rem;">Wed</div></div>
                  <div class="col"><div class="athena-demo-box" style="min-height: 8rem;">Thu</div></div>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <p class="h3 mb-1">GBP 42.8k</p>
              <p class="text-secondary mb-0">Revenue tracked across the current reporting week.</p>
            </div>
          </div>
        </article>
      </div>

      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Profile</span>
          <div class="d-flex align-items-center gap-3">
            <img class="athena-avatar-sm" src="../assets/img/avatar-1.svg" alt="Avery Stone profile photo">
            <div>
              <h2 class="h5 mb-1">Avery Stone</h2>
              <p class="text-secondary mb-0">Design Systems Lead</p>
            </div>
          </div>
          <hr>
          <dl class="row mb-0">
            <dt class="col-5">Availability</dt>
            <dd class="col-7">Today</dd>
            <dt class="col-5">Team</dt>
            <dd class="col-7">Athena Studio</dd>
          </dl>
        </article>
      </div>

      <div class="col-12">
        <article class="athena-card p-4">
          <div class="row g-3 align-items-center">
            <div class="col-lg-8">
              <span class="badge text-bg-success mb-3">Full Width</span>
              <h2 class="h4">Full-Width Announcement Card</h2>
              <p class="text-secondary mb-0">Reserve full-width cards for page-level notices, onboarding prompts, and summaries that should not compete with neighbouring content.</p>
            </div>
            <div class="col-lg-4 text-lg-end">
              <a class="btn btn-primary" href="../docs/layouts.html">Read Layout Guidance</a>
            </div>
          </div>
        </article>
      </div>
</section>