Skip to content
UGA Online Design System

App Shell

The app shell is a full-height scaffold for embedded tools (for example, iframe widgets): a fixed header above a flex-column main/content area that owns its own scrolling, so the document itself never scrolls. It is themed through the global --ds-* tokens. Pair it with the fill / flow objects such as obj-fill-column and obj-scroll-pane for the content region, and a loader for busy states.

The host page must give the root full height, e.g.:

html,
body,
#root {
  height: 100%;
  margin: 0;
}

Structure

Section titled “Structure”
ID Assistant

The header stays pinned; this pane scrolls its own overflow.

Tall content scrolls here, not the page.

<div
  class="cmp-app-shell"
  style="height: 18rem; border: 1px solid #dedede; border-radius: 0.5rem"
>
  <header class="cmp-app-shell__header">
    <strong>ID Assistant</strong>
    <span class="cmp-loader cmp-loader--sm" aria-hidden="true"></span>
  </header>
  <main class="cmp-app-shell__main">
    <div class="cmp-app-shell__content">
      <div class="obj-fill-column">
        <div class="obj-scroll-pane" style="padding: 1rem">
          <p>The header stays pinned; this pane scrolls its own overflow.</p>
          <p style="height: 40rem">Tall content scrolls here, not the page.</p>
        </div>
      </div>
    </div>
  </main>
</div>

Classes

Section titled “Classes”
ClassElementPurpose
cmp-app-shelldivFull-height flex-column root.
cmp-app-shell__headerheaderPinned, themed header bar.
cmp-app-shell__mainmainFlex-column region that fills remaining height.
cmp-app-shell__contentdivFlex-column content host for views.
Section titled “Related layout objects”
ClassPurpose
obj-fill-columnFlex column that fills its parent and clips overflow.
obj-flex-col-fullLike obj-fill-column, pinned to full height.
obj-scroll-paneScrollable pane that fills remaining space.
obj-centerCenters content on both axes (e.g. a loading spinner).
util-gap-*Flex/grid gap on the spacer scale (none-xxl).

Theming

Section titled “Theming”

Uses --ds-bg, --ds-surface, --ds-fg, --ds-border, and --ds-shadow. Set data-theme="dark" on an ancestor (commonly <html>) to theme the shell and everything inside it.