# page — Examples

## Basic usage

```html
<page-ui max-width="prose" padding="6">
  <header-ui>
    <text-ui variant="title">Welcome back</text-ui>
  </header-ui>
  <section-ui>
    <text-ui>Sign in to continue.</text-ui>
  </section-ui>
  <footer-ui>
    <button-ui text="Sign in" variant="solid" stretch></button-ui>
  </footer-ui>
</page-ui>
```

## Sticky header

```html
<page-ui max-width="prose" padding="6" sticky-header>
  <header-ui>
    <text-ui variant="title">Long article</text-ui>
  </header-ui>
  <section-ui>
    <!-- long content -->
  </section-ui>
</page-ui>
```

## Composition with <admin-shell>

```html
<admin-shell>
  <header-ui slot="leading">…</header-ui>
  <aside-ui slot="leading">…</aside-ui>
  <section-ui>
    <page-ui max-width="prose" padding="6">
      <!-- omit [scroll] — the shell scrolls -->
      <header-ui>…</header-ui>
      <section-ui>…</section-ui>
    </page-ui>
  </section-ui>
</admin-shell>
```
