Athena UI

Layouts

Shells, sidebars, topbars, detail views, and split panes.

New Page

Application Shell

Sidebar, Topbar, Content

Athena pages use one primary shell: a labelled sidebar, a persistent topbar, and a main content landmark with predictable spacing.

Topbar

Sidebar

Page Heading

Content

Content

Rules

Rows And Columns

Wrap every column group in a row.
Use full-width rows for tables and dense tools.
Collapse to one column on mobile.
Keep headings before repeated card grids.

Detail View

Two-Column Detail Layout

Use this for records with a main working area and supporting metadata.

Main Record

Metadata

Card Grid

Repeated Items

Use equal columns for repeated peers. Avoid uneven widths unless content hierarchy genuinely requires it.

1

2

3

4

Mobile Responsive

Stacking Behaviour

Dense layouts become single-column on narrow screens, while tables and calendars use horizontal scrolling only when the data shape requires it.

Mobile 1st

Tablet 2nd

Desktop 3rd

<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">Application Shell</span>
          <h2 class="h4">Sidebar, Topbar, Content</h2>
          <p class="text-secondary">Athena pages use one primary shell: a labelled sidebar, a persistent topbar, and a main content landmark with predictable spacing.</p>
          <div class="athena-demo-frame" aria-label="Application shell layout example">
            <div class="row g-2">
              <div class="col-12"><div class="athena-demo-box">Topbar</div></div>
              <div class="col-md-3"><div class="athena-demo-box" style="min-height: 9rem;">Sidebar</div></div>
              <div class="col-md-9">
                <div class="row g-2">
                  <div class="col-12"><div class="athena-demo-box">Page Heading</div></div>
                  <div class="col-sm-6"><div class="athena-demo-box">Content</div></div>
                  <div class="col-sm-6"><div class="athena-demo-box">Content</div></div>
                </div>
              </div>
            </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">Rules</span>
          <h2 class="h5">Rows And Columns</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Wrap every column group in a row.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use full-width rows for tables and dense tools.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Collapse to one column on mobile.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Keep headings before repeated card grids.</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">Detail View</span>
          <h2 class="h5">Two-Column Detail Layout</h2>
          <p class="text-secondary">Use this for records with a main working area and supporting metadata.</p>
          <div class="athena-demo-frame">
            <div class="row g-2">
              <div class="col-md-8"><div class="athena-demo-box" style="min-height: 8rem;">Main Record</div></div>
              <div class="col-md-4"><div class="athena-demo-box" style="min-height: 8rem;">Metadata</div></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-warning mb-3">Card Grid</span>
          <h2 class="h5">Repeated Items</h2>
          <p class="text-secondary">Use equal columns for repeated peers. Avoid uneven widths unless content hierarchy genuinely requires it.</p>
          <div class="athena-demo-frame">
            <div class="row g-2">
              <div class="col-sm-6 col-xl-3"><div class="athena-demo-box">1</div></div>
              <div class="col-sm-6 col-xl-3"><div class="athena-demo-box">2</div></div>
              <div class="col-sm-6 col-xl-3"><div class="athena-demo-box">3</div></div>
              <div class="col-sm-6 col-xl-3"><div class="athena-demo-box">4</div></div>
            </div>
          </div>
        </article>
      </div>

      <div class="col-12">
        <article class="athena-card p-4">
          <div class="row g-3 align-items-center">
            <div class="col-lg-4">
              <span class="badge text-bg-secondary mb-3">Mobile Responsive</span>
              <h2 class="h5">Stacking Behaviour</h2>
              <p class="text-secondary mb-0">Dense layouts become single-column on narrow screens, while tables and calendars use horizontal scrolling only when the data shape requires it.</p>
            </div>
            <div class="col-lg-8">
              <div class="athena-demo-frame">
                <div class="row g-2">
                  <div class="col-12 col-md-4"><div class="athena-demo-box">Mobile 1st</div></div>
                  <div class="col-12 col-md-4"><div class="athena-demo-box">Tablet 2nd</div></div>
                  <div class="col-12 col-md-4"><div class="athena-demo-box">Desktop 3rd</div></div>
                </div>
              </div>
            </div>
          </div>
        </article>
      </div>
    </section>