Layout

The layout component is a container for the page content. It's used to create the page layout and structure.

Basic usage

Here's the most basic mark-up.

<ca-layout>
  <header></header>
  <main></main>
  <footer></footer>
</ca-layout>

If desired, you can instead use the slot attribute to place the header, main, and footer.

<ca-layout>
  <div slot="layout-header"></div>
  <div slot="layout-main"></div>
  <div slot="layout-footer"></div>
</ca-layout>

Changing the layout

Use the format attribute to change the layout.

<ca-layout format="top-full">
  <header></header>
  <main></main>
  <footer></footer>
</ca-layout>

The available formats are:

side (default)
top-full
top-lite

Header

Among the layout elements, the header has its own complex set of slots.

<ca-layout>
  <header>
    <div slot="header-burger"></div>
    <div slot="header-org"></div>
    <div slot="header-menu"></div>
    <div slot="header-priority"></div>
    <div slot="header-utility"></div>
  </header>
  <main></main>
  <footer></footer>
</ca-layout>

Burger

The header-burger slot can be replaced with the ca-burger element. Here's a full example.

<ca-layout>
  <header>
    <ca-burger>
      <a href="#content-nav" title="Menu" class="ca-button ca-button-burger">
        <ca-icon name="pancakes-menu"></ca-icon>
        <ca-tip>Menu</ca-tip>
      </a>
    </ca-burger>

    <div slot="header-org"></div>
    <div slot="header-menu"></div>
    <div slot="header-priority"></div>
    <div slot="header-utility"></div>
  </header>
  <main></main>
  <footer></footer>
</ca-layout>

Org

The same goes for the header-org slot, which can be replaced with the ca-org element. Here's a full example.

California Design System

<ca-layout>
  <header>
    <div slot="header-burger"></div>

    <ca-org>
      <a href="/California-Design-System/">
        <ca-pic slot="org-img" emblem="ca.gov" aria-label="ca.gov"></ca-pic>
        <span slot="org-cal">California</span>
        <span slot="org-dept">Design System</span>
      </a>
    </ca-org>

    <div slot="header-menu"></div>
    <div slot="header-priority"></div>
    <div slot="header-utility"></div>
  </header>
  <main></main>
  <footer></footer>
</ca-layout>

<ca-layout>
  <header>
    <div slot="header-burger"></div>
    <div slot="header-org"></div>

    <nav id="content-nav" slot="header-menu" aria-label="Content navigation">
      <menu>
        <li>
          <a href="/California-Design-System/pages/get-started">Get started</a>
        </li>
        <li>
          <ca-pop>
            <button class="ca-button-menu" slot="pop-button">
              Components
              <ca-icon name="arrow-down"></ca-icon>
            </button>
            <menu slot="pop-content">
              <li>
                <a href="/California-Design-System/pages/components/typography"
                  >Typography</a
                >
              </li>
              <li>
                <a href="/California-Design-System/pages/components/org">Org</a>
              </li>
              <li>
                <a href="/California-Design-System/pages/components/icon"
                  >Icon</a
                >
              </li>
              <li>
                <a href="/California-Design-System/pages/components/pop">Pop</a>
              </li>
            </menu>
          </ca-pop>
        </li>
      </menu>
    </nav>

    <div slot="header-priority"></div>
    <div slot="header-utility"></div>
  </header>
  <main></main>
  <footer></footer>
</ca-layout>

Utility

The header-utility slot can also be placed on a nav element if needed.

The ca-button-utility class works great with buttons in this section.

<ca-layout>
  <header>
    <div slot="header-burger"></div>
    <div slot="header-org"></div>
    <div slot="header-menu"></div>
    <div slot="header-priority"></div>

    <nav id="utility-nav" slot="header-utility" aria-label="Utility navigation">
      <ul>
        <li>
          <a href="#" title="Login" class="ca-button ca-button-utility">
            <ca-icon name="account"></ca-icon>
            <ca-tip>Login</ca-tip>
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <main></main>
  <footer></footer>
</ca-layout>