Navs And Tabs

<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">Tabs</span>
          <h2 class="h4">Record Tabs</h2>
          <p class="text-secondary">Tabs are for switching between related views of the same object without leaving the page.</p>
          <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation"><button class="nav-link active" id="record-overview-tab" data-bs-toggle="tab" data-bs-target="#record-overview-panel" type="button" role="tab" aria-controls="record-overview-panel" aria-selected="true">Overview</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" id="record-activity-tab" data-bs-toggle="tab" data-bs-target="#record-activity-panel" type="button" role="tab" aria-controls="record-activity-panel" aria-selected="false">Activity</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" id="record-files-tab" data-bs-toggle="tab" data-bs-target="#record-files-panel" type="button" role="tab" aria-controls="record-files-panel" aria-selected="false">Files</button></li>
          </ul>
          <div class="tab-content pt-3">
            <div class="tab-pane fade show active" id="record-overview-panel" role="tabpanel" aria-labelledby="record-overview-tab" tabindex="0">Overview content for a record, including summary metrics and ownership.</div>
            <div class="tab-pane fade" id="record-activity-panel" role="tabpanel" aria-labelledby="record-activity-tab" tabindex="0">Activity content for audit events, comments, and status changes.</div>
            <div class="tab-pane fade" id="record-files-panel" role="tabpanel" aria-labelledby="record-files-tab" tabindex="0">Files content for attachments, exports, and evidence packs.</div>
          </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">Choosing Navigation</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use tabs for peer views on one page.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use links when the URL or page context changes.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep tab labels short and unique.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Pills</span>
          <h2 class="h5">Segmented View Switcher</h2>
          <p class="text-secondary">Pills are useful for compact status or view switches inside a card.</p>
          <ul class="nav nav-pills flex-wrap gap-2" role="tablist">
            <li class="nav-item" role="presentation"><button class="nav-link active" id="pill-open-tab" data-bs-toggle="pill" data-bs-target="#pill-open-panel" type="button" role="tab" aria-controls="pill-open-panel" aria-selected="true">Open</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" id="pill-resolved-tab" data-bs-toggle="pill" data-bs-target="#pill-resolved-panel" type="button" role="tab" aria-controls="pill-resolved-panel" aria-selected="false">Resolved</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link" id="pill-archived-tab" data-bs-toggle="pill" data-bs-target="#pill-archived-panel" type="button" role="tab" aria-controls="pill-archived-panel" aria-selected="false">Archived</button></li>
          </ul>
          <div class="tab-content pt-3">
            <div class="tab-pane fade show active" id="pill-open-panel" role="tabpanel" aria-labelledby="pill-open-tab" tabindex="0">14 open tickets need triage.</div>
            <div class="tab-pane fade" id="pill-resolved-panel" role="tabpanel" aria-labelledby="pill-resolved-tab" tabindex="0">38 tickets were resolved this week.</div>
            <div class="tab-pane fade" id="pill-archived-panel" role="tabpanel" aria-labelledby="pill-archived-tab" tabindex="0">Archived tickets remain searchable.</div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-secondary mb-3">Page Links</span>
          <h2 class="h5">Local Navigation</h2>
          <p class="text-secondary">When the destination is another page, use ordinary links and mark the current page with <code>aria-current="page"</code>.</p>
          <nav class="nav flex-column flex-sm-row gap-2" aria-label="Example page navigation">
            <a class="nav-link active" aria-current="page" href="../components/navs-tabs.html">Tabs</a>
            <a class="nav-link" href="../components/dropdowns.html">Dropdowns</a>
            <a class="nav-link" href="../components/accordions.html">Accordions</a>
          </nav>
        </article>
      </div>
    </section>