Component Library

<section class="athena-card p-4 mb-4">
  <h2 class="h4">Demo Library</h2>
  <p class="text-secondary">Every Athena component demo page is linked here so the library can be explored from one place.</p>
  <div class="athena-link-grid">
    <a class="athena-link-card" href="../components/index.html"><i class="bi bi-grid" aria-hidden="true"></i><span><strong>Component Library</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/accessibility.html"><i class="bi bi-universal-access" aria-hidden="true"></i><span><strong>Accessibility</strong><small>Inclusive UI patterns</small></span></a>
    <a class="athena-link-card" href="../components/bootstrap.html"><i class="bi bi-bootstrap" aria-hidden="true"></i><span><strong>Bootstrap</strong><small>Framework component examples</small></span></a>
    <a class="athena-link-card" href="../components/buttons.html"><i class="bi bi-cursor" aria-hidden="true"></i><span><strong>Buttons</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/alerts.html"><i class="bi bi-exclamation-circle" aria-hidden="true"></i><span><strong>Alerts</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/badges.html"><i class="bi bi-patch-check" aria-hidden="true"></i><span><strong>Badges</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/cards.html"><i class="bi bi-card-list" aria-hidden="true"></i><span><strong>Cards</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/filters.html"><i class="bi bi-funnel" aria-hidden="true"></i><span><strong>Filters</strong><small>Search and filter controls</small></span></a>
    <a class="athena-link-card" href="../components/layouts.html"><i class="bi bi-layout-three-columns" aria-hidden="true"></i><span><strong>Layouts</strong><small>Rows, columns, and page structure</small></span></a>
    <a class="athena-link-card" href="../components/modals.html"><i class="bi bi-window" aria-hidden="true"></i><span><strong>Modals</strong><small>Dialogs, drawers, forms, tables, and rich content</small></span></a>
    <a class="athena-link-card" href="../components/typography.html"><i class="bi bi-type" aria-hidden="true"></i><span><strong>Typography</strong><small>Type, colours, positioning, and columns</small></span></a>
    <a class="athena-link-card" href="../components/forms.html"><i class="bi bi-input-cursor-text" aria-hidden="true"></i><span><strong>Forms</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/tables.html"><i class="bi bi-table" aria-hidden="true"></i><span><strong>Tables</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/charts.html"><i class="bi bi-bar-chart" aria-hidden="true"></i><span><strong>Charts</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/toasts.html"><i class="bi bi-app-indicator" aria-hidden="true"></i><span><strong>Toasts</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/dropdowns.html"><i class="bi bi-menu-button-wide" aria-hidden="true"></i><span><strong>Dropdowns</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/navs-tabs.html"><i class="bi bi-segmented-nav" aria-hidden="true"></i><span><strong>Tabs</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/pagination.html"><i class="bi bi-three-dots" aria-hidden="true"></i><span><strong>Pagination</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/progress.html"><i class="bi bi-bar-chart-steps" aria-hidden="true"></i><span><strong>Progress</strong><small>Components</small></span></a>
    <a class="athena-link-card" href="../components/accordions.html"><i class="bi bi-list-nested" aria-hidden="true"></i><span><strong>Accordions</strong><small>Components</small></span></a>
  </div>
</section>
<section class="athena-card p-4 mb-4">
  <h2 class="h4">Inclusive Interaction Patterns</h2>
  <p class="text-secondary mb-0">Athena examples are built with labelled controls, visible keyboard focus, semantic markup, reduced-motion support, and colour-independent feedback, so teams start from patterns that are easier to make usable for more people.</p>
</section>
<section class="athena-row athena-row-4">
  <article class="athena-card p-4"><h2 class="h4">Bootstrap Foundation</h2><p class="text-secondary">Layout, forms, components, and responsive utilities are based on Bootstrap 5.3.8.</p><a href="https://getbootstrap.com/" rel="noopener">Visit Bootstrap</a></article>
  <article class="athena-card p-4"><h2 class="h4">Bootstrap Icons</h2><p class="text-secondary">Navigation, status, and action icons use the bundled Bootstrap Icons font.</p><a href="https://icons.getbootstrap.com/" rel="noopener">Visit Bootstrap Icons</a></article>
  <article class="athena-card p-4"><h2 class="h4">Chart.js</h2><p class="text-secondary">Dashboard charts use Chart.js with Athena colour tokens and reduced-motion support.</p><a href="https://www.chartjs.org/" rel="noopener">Visit Chart.js</a></article>
  <article class="athena-card p-4"><h2 class="h4">DataTables</h2><p class="text-secondary">Rich tables use DataTables for responsive, searchable, export-ready records.</p><a href="https://datatables.net/" rel="noopener">Visit DataTables</a></article>
  <article class="athena-card p-4"><h2 class="h4">jQuery</h2><p class="text-secondary">DataTables and legacy-friendly demos can use the bundled jQuery runtime.</p><a href="https://jquery.com/" rel="noopener">Visit jQuery</a></article>
  <article class="athena-card p-4"><h2 class="h4">JSZip</h2><p class="text-secondary">Spreadsheet and table export demos use JSZip for client-side archive generation.</p><a href="https://stuk.github.io/jszip/" rel="noopener">Visit JSZip</a></article>
  <article class="athena-card p-4"><h2 class="h4">pdfmake</h2><p class="text-secondary">PDF export examples use pdfmake and its bundled virtual font data.</p><a href="http://pdfmake.org/" rel="noopener">Visit pdfmake</a></article>
  <article class="athena-card p-4"><h2 class="h4">Inter Font</h2><p class="text-secondary">Athena uses the locally bundled Inter variable font for interface typography.</p><a href="https://rsms.me/inter/" rel="noopener">Visit Inter</a></article>
</section>