California Design System

Layouts

Sitewide layouts are important to get you started on your new webiste. You'll need to determine what layout best suitrs your users' needs.

Apply a layout

To set the layout you'd like for your site, you can simply update the format attribute, in the ca-layout tag, to one of the following settings:

  • Side-nav layout: <ca-layout format=""> . This is our default layout so format is null.
  • Top-nav-full layout: <ca-layout format="top-full">.
  • Top-nav-lite layout: <ca-layout format="top-lite">.

Code

Need some help here...not sure what code to show or if we show any at all. This code is from the base-layout.njk page. Not sure if this is the best delivery method for this code.

California Design Systemα0.0.1 
        <ca-layout format="">
        <ca-site-menu>
          <a href="#content-nav" title="Menu">
            <ca-pic icon="bear-menu" format="burger"></ca-pic>
            <span class="visually-hidden">Menu</span>
          </a>
        </ca-site-menu>
        <ca-site-logo>
          <a href="/California-Design-System/pages/index">
            <svg width="80" height="82" viewBox="0 0 80 82" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_1506_25118)">
                <path d="M26.8588 17.1376V3.04688C12.8933 7.79347 2.36677 20.0374 0 35.0192H13.1283C14.967 27.2853 20.058 20.8086 26.8588 17.1376Z" fill="#007FB9"></path>
                <path d="M39.749 68.962C26.9008 68.962 16.1006 60.0067 13.1671 47.9766H0.0258789C3.13971 67.2254 19.7393 81.922 39.749 81.922C46.5176 81.922 52.8966 80.2372 58.4931 77.2662V61.4647C53.5921 66.1108 46.9974 68.962 39.749 68.962Z" fill="#007FB9"></path>
                <path d="M39.749 0.921875C39.749 0.921875 39.7426 0.921875 39.7394 0.921875V13.8819C39.7394 13.8819 39.7458 13.8819 39.749 13.8819C52.6487 13.8819 63.4875 22.9118 66.3631 35.0164H39.7329V47.9764H66.3309H79.4721C79.8166 45.8412 80.0002 43.6542 80.0002 41.4219C80.0002 19.0529 61.9773 0.921875 39.749 0.921875Z" fill="#007FB9"></path>
              </g>
              <defs>
                <clipPath id="clip0_1506_25118">
                  <rect width="80" height="81" fill="white" transform="translate(0 0.921875)"></rect>
                </clipPath>
              </defs>
            </svg>
          </a>
        </ca-site-logo>
        <header>
          <a href="/California-Design-System/pages/index">
            <span>California</span>
            <span>Design System<sup>α0.0.1</sup></span>
          </a>
        </header>
        <ca-priority-bar>
          <search>
            <form>
              <label for="site-search" class="visually-hidden">Search this site</label>
              <input type="search" id="site-search" placeholder="Search">
              <button type="submit">
                <ca-pic icon="search"></ca-pic>
                <span class="visually-hidden">Search</span>
              </button>
            </form>
          </search>
        </ca-priority-bar>
        <ca-utility-bar>
          <nav id="utility-nav" aria-label="Utility navigation">
            <ul>
              <li>
                <ca-layout-toggle></ca-layout-toggle>
              </li>
              <li>
                <ca-color-scheme-toggle>
                  <button class="utility">
                    <ca-pic icon="light-mode"></ca-pic>
                    <span class="visually-hidden">Switch between light and dark modes</span>
                  </button>
                </ca-color-scheme-toggle>
              </li>
              <li>
                <a href="#" title="Login" class="button utility">
                  <ca-pic icon="account-circle"></ca-pic>
                  <span class="visually-hidden">Login</span>
                </a>
              </li>
              <li>
                <a href="#" title="Translate" class="button utility">
                  <ca-pic icon="language"></ca-pic>
                  <span class="visually-hidden">Translate</span>
                </a>
              </li>
            </ul>
          </nav>
        </ca-utility-bar>
        <ca-page-bar>
          <nav id="content-nav" aria-label="Content navigation">
            <ca-nav-menu>
              <ul>
                <li><a href="/California-Design-System/pages/get-started/index">Get started</a>
                </li>
                <li>
                  <ca-nav-menu><a href="/California-Design-System/pages/design/index">Design</a>
                    <ul>
                      <li><a href="/California-Design-System/pages/design/principles">UX principles</a></li>
                      <li><a href="/California-Design-System/pages/design/content">Content guidelines</a></li>
                      <li><a href="/California-Design-System/pages/design/layouts">Layouts</a></li>
                      <li><a href="/California-Design-System/pages/design/typography">Typography</a></li>
                      <li><a href="/California-Design-System/pages/design/color">Color</a></li>
                      <li><a href="/California-Design-System/pages/design/ui-kit">UI-kit</a></li>
                    </ul>
                  </ca-nav-menu>
                </li>
                <li>
                  <ca-nav-menu><a href="/California-Design-System/pages/develop/index">Develop</a>
                    <ul>
                      <li><a href="/California-Design-System/pages/develop/development-checklist">Devleopment checklist</a></li>
                    </ul>
                  </ca-nav-menu>
                </li>
                <li>
                  <ca-nav-menu><a href="/California-Design-System/pages/building-blocks/index">Building blocks</a>
                    <ul>
                      <li><a href="/California-Design-System/pages/building-blocks/ca-grid">CA-grid layout</a></li>
                      <li><a href="/California-Design-System/pages/building-blocks/ca-flex">CA-flex layout</a></li>
                      <li><a href="/California-Design-System/pages/building-blocks/header-navigation">Header | navigation</a></li>
                      <li><a href="/California-Design-System/pages/building-blocks/cards">Cards</a></li>
                      <li><a href="/California-Design-System/pages/building-blocks/tables">Tables</a></li>
                      <!--<li><a href="/pages/building-blocks/alerts">Alerts</a></li>-->
                      <li><a href="/California-Design-System/pages/building-blocks/footer">Footer</a></li>
                    </ul>
                  </ca-nav-menu>
                </li>
                <li><ca-nav-menu><a href="/California-Design-System/pages/building-blocks/index">Showcase</a></ca-nav-menu></li>
              </ul>
            </ca-nav-menu>
          </nav>
        </ca-page-bar>
        <main>
        </main>
        <footer>
        <p>A product of the California Design System.</p>
        <ca-flex format="footer-split-links">
          <ul class="social-icon-list">
            <li>
              <a href="#" class="button social">
                <ca-pic icon="mail"></ca-pic>
                <span class="visually-hidden">Email</span>
              </a>
            </li>
            <li>
              <a href="#" class="button social">
                <ca-pic icon="facebook"></ca-pic>
                <span class="visually-hidden">Facebook</span>
              </a>
            </li>
            <li>
              <a href="#" class="button social">
                <ca-pic icon="linked-in"></ca-pic>
                <span class="visually-hidden">LinkedIn</span>
              </a>
            </li>
            <li>
              <a href="#" class="button social">
                <ca-pic icon="x-dot-com"></ca-pic>
                <span class="visually-hidden">X.com</span>
              </a>
            </li>
            <li>
              <a href="#" class="button social">
                <ca-pic icon="youtube"></ca-pic>
                <span class="visually-hidden">YouTube</span>
              </a>
            </li>
          </ul>
        </ca-flex>
        <hr>
        <ca-flex format="footer-split-links">
        <ul class="compliance-link-list">
          <li class="flex-basis-full">
            <a href="https://www.ca.gov/images/WebsiteAccessibilityCert-ca.gov.pdf">Website Accessibility Certification</a>
          </li>
          <li>
            <a href="/California-Design-System/pages/conditions-of-use">Conditions of use</a>
          </li>
          <li>
            <a href="/California-Design-System/pages/privacy">Privacy</a>
          </li>
          <li>
            <a href="/California-Design-System/pages/accessibility">Accessibility</a>
          </li>
          <li>
            <a href="/California-Design-System/pages/about">About</a>
          </li>
          <li>
            <a href="/California-Design-System/pages/sitemap">Sitemap</a>
          </li>
        </ul>
      </ca-flex><ca-flex format="footer-end">
      <ca-flex format="copyright-stamp">
        <ca-pic icon="footer-ca-bear"></ca-pic>
        <p>An official California state website.</p>
        <p>© <ca-current-year>2025</ca-current-year> State of California</p>
      </ca-flex>
      <ca-flex format="footer-utility">
        <a href="#" class="button utility">
          <ca-pic icon="help"></ca-pic>
          <span class="visually-hidden">Help</span>
        </a>
        <a href="#" class="button utility">
          <ca-pic icon="back-to-top"></ca-pic>
          <span class="visually-hidden">Back to top</span>
        </a>
      </ca-flex>
    </ca-flex>
  </footer>
</ca-layout>

Anatomy

We’re using a grid-template, so you’ll only need to edit the content regions of the grid-template-areas.

Remember, the ca-layout tag is the parent container for the different grid-template-areas listed below.

  1. ca-site-logo with your branding.
  2. header with your agency name.
  3. search giving users the ability to search your site.
  4. nav (global) so users can easily navigate your site.
  5. nav (utility) for things like login, translate, or other site utilities.
  6. main where your page content will live.
  7. footer where you can place additional site or external resources for your users.

Side-nav layout

Our side-nav has a 3-level dropdown navigation allowing for two sub-folders within a main-navigation folder.

The seven grid-template-areas of the Eureka layout: ca-site-logo, header, search, nac (global), nav (utility), main, footer.

Top-nav

Our top-nav has a 2-level dropdown navigation allowing for one sub-folder within a main-navigation folder.

The seven grid-template-areas of the Horizon layout: ca-site-logo, header, search, nac (global), nav (utility), main, footer.

Top-nav-lite

This navigation is meant for small-scale site with three to five main pages in your site navigation and utilities in the footer, if needed.

The seven grid-template-areas of the Skyline layout: ca-site-logo, header, search, nac (global), nav (utility), main, footer.

Usage

Do

Don't

Developer notes

Tags, attributes, classes Description
ca-grid
ca-card
.ca-card

Accessibility

Element or property Description

Changelog

Date Version Affects Notes
MM/DD/YYYY 0.0.0.0 Something This is the first release.