Home
Structure

Structure

Our structural components form the basic structure of a website using the State Web Template. This structure contains elements that connect web pages and can lead to a smooth user experience.

Webpage structure

The State Web Template uses includes as our main building components.

Example
Source code

Example

Web Page Template Structure: Global Header (which includes Utility header, Setting, Site Header, Navigation and Search), Main Content and Footer.

HTML Source code

<!doctype html>
        <html lang="en">
           <head>
              <meta charset="utf-8">
              <title>State Template</title>
              <meta name="Author" content="State of California" />
              <meta name="Description" content="State of California" />
              <meta name="Keywords" content="California, government" />
              ❴% include "/src/_includes/head-css-js.njk" %❵
          </head>
          <body>
             <header role="banner" id="header" class="global-header fixed">
               <div id="skip-to-content"><a href="#main-content">Skip to Main Content</a></div>
               ❴% include "/src/_includes/utility-header.njk" %❵/span>
               ❴% include "/src/_includes/settings.njk" %❵
               ❴% include "/src/_includes/site-header.njk" %❵
               ❴% include "/src/_includes/mobile-controls.njk" %❵
               <div class="navigation-search full-width-nav container">
                 <div id="head-search" class="search-container search-container featured-search">
                 ❴% include "/src/_includes/search.njk" %❵
                 </div>
                   ❴% include "/src/_includes/navigation.njk" %❵
                </div>
              </header>
              <div id="main-content" class="main-content">
                  <div class="container">
                      <main class="main-primary">
                         Page content
                      </main>
                 </div>
             </div>
             ❴% include "/src/_includes/global-footer.njk" %❵
             ❴% include "/src/_includes/scripts.njk" %❵
          </body>
        </html>