Badges

<section class="row g-4">
      <div class="col-xl-8">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Status Language</span>
          <h2 class="h4">Fill Badge Set</h2>
          <p class="text-secondary">Badges work best as short labels that support nearby text, not as the only way to understand a state.</p>
          <div class="d-flex flex-wrap gap-2" aria-label="Badge examples">
            <span class="badge text-bg-primary">New</span>
            <span class="badge text-bg-success">Healthy</span>
            <span class="badge text-bg-warning">Review</span>
            <span class="badge text-bg-danger">At Risk</span>
            <span class="badge rounded-pill text-bg-info">12 Open</span>
            <span class="badge text-bg-secondary">Archived</span>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge badge-outline-primary mb-3">Outline</span>
          <h2 class="h5">Outline Badges</h2>
          <p class="text-secondary">Use outline badges when a label should complement nearby content without competing with the primary action.</p>
          <div class="d-flex flex-wrap gap-2" aria-label="Outline badge examples">
            <span class="badge badge-outline-primary">New</span>
            <span class="badge badge-outline-success">Healthy</span>
            <span class="badge badge-outline-warning">Review</span>
            <span class="badge badge-outline-danger">At Risk</span>
            <span class="badge rounded-pill badge-outline-info">12 Open</span>
            <span class="badge badge-outline-secondary">Archived</span>
          </div>
        </article>
      </div>
      <div class="col-xl-4">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">Accessible Status</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use text as well as colour.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep labels short enough to wrap safely on mobile.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use live regions only when a badge value changes after user action.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Count Badges</h2>
          <p class="text-secondary">Counts should describe what is being counted in the surrounding label.</p>
          <button class="btn btn-outline-primary" type="button">Inbox <span class="badge text-bg-primary ms-2">4 unread</span></button>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Table Status</h2>
          <div class="table-responsive">
            <table class="table table-sm align-middle mb-0">
              <caption>Status badges in a compact table</caption>
              <thead><tr><th scope="col">Item</th><th scope="col">State</th></tr></thead>
              <tbody>
                <tr><th scope="row">Invoice export</th><td><span class="badge text-bg-success">Ready</span></td></tr>
                <tr><th scope="row">Access review</th><td><span class="badge text-bg-warning">Pending</span></td></tr>
                <tr><th scope="row">Legacy token</th><td><span class="badge text-bg-danger">Expired</span></td></tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Do Not Overload</h2>
          <p class="text-secondary">Avoid stacking many badges in a heading. If users need more detail, move the information into metadata rows or a table.</p>
          <div class="d-flex flex-wrap gap-2">
            <span class="badge text-bg-primary">Finance</span>
            <span class="badge text-bg-secondary">Quarterly</span>
            <span class="badge text-bg-info">Exportable</span>
          </div>
        </article>
      </div>
    </section>