Page

Load @dg/ui/styles.css once in the root layout.

<script>
  import { Page, Header, Main, Footer, SkipLink, Heading } from "@dg/ui";
</script>

<Page lang="en">
  <SkipLink />
  <Header />
  <Main><Heading title="Collection" /></Main>
  <Footer />
</Page>

Place an aside between Header and Main for a sidebar. Page lays it out beside the content without a wrapper; the aside draws its own rules.

<script>
  import { Page, Header, Main, Footer, SkipLink, Heading } from "@dg/ui";
</script>

<Page lang="en">
  <SkipLink />
  <Header />
  <aside aria-label="Collection">
    <nav aria-label="Collection subjects">
      <a href="/paintings">Paintings</a>
      <a href="/drawings">Drawings</a>
    </nav>
  </aside>
  <Main><Heading title="Paintings" /></Main>
  <Footer />
</Page>

<style>
  /* The content's start rule closes the aside beside it. */
  aside {
    border-inline-start: var(--border-width) solid var(--border);
    border-top: var(--border-width) solid var(--border);
  }

  /* Stacked above the content, the aside also draws its end rule. */
  @media (--medium) {
    aside {
      border-inline-end: var(--border-width) solid var(--border);
    }
  }
</style>

• Native HTML attributes, DOM callbacks, class and style are forwarded to the inner page div.
• lang is set on the page element and selects the built-in English or French text of SkipLink, Header, ThemeToggle, Dialog, Tabs, Cards, ErrorPage and the conversation components. Props that name content, such as label or placeholder, override single entries. A nested Page without lang inherits it.
• Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
• Direct frames of Page and Main drop their bottom rule, so each frame junction is drawn once by the next frame's top rule. Crosses need no coordination across Main.
• The outermost Page adds a script to the document head that restores the saved theme before first paint, so app.html needs no theme code.
• Both width modes share responsive minimum margins: --space-7, and --space-4 on narrow viewports (--narrow). Larger screen safe areas increase both margins equally.
• The viewport height is a minimum, not a cap: short content fills the viewport and longer content keeps its natural document scroll. Footer decorations do not add extra scroll below the frame.
• Use style="min-height: 0" for an embedded preview that should not fill the viewport. Content padding belongs to the child sections.
• Available width comes from the parent; content padding belongs to child sections. Without Main, the composition owns content growth. The internal page class is not a standalone foundation utility.
• A direct aside switches the frame to a grid: Header and Footer span its width, the aside takes a start column of 14 to 18rem and the remaining content element, usually Main, fills the rest and grows into the viewport height. Below --medium, the aside stacks between the header and the content; a sidebar that changes form on narrow screens switches at the same breakpoint. Without an aside, Page stays a single column.
• The aside draws its own rules, like any frame: top and start rules beside the content, whose start rule closes it, plus its end rule once stacked. It stretches over the content row, so a sticky child follows the scroll. Place one content element beside it; fixed children such as SkipLink and Dialog take no place in the layout.

Page is a layout container. Compose one Main landmark and place SkipLink as the first child of Page; its fixed position keeps it visible above the frame. Set lang to the audience language so built-in accessible names match it. Name a sidebar aside with aria-label; it precedes Main in reading and focus order, and SkipLink lets keyboard users bypass it.