Organisms

For the most part, organism components can be dropped in wherever they're needed or desired. Often they're added via layouts, though, so be careful to account for any duplicates that may arise from one-off usage.

Copyright

Example

CC BY-SA 4.0 .

Code is subject to the MIT License.

Options

Code

HTML

          
  <section class="copyright layout--strip background-color--main-dark color--white font-size--p875em
  ">
    <div class="layout--stripe--inner">
      <h2 class="a11y--visually-hidden">Copyright, license, and documentation</h2>

      <div>
        &copy; Copyright 2023 Axe Head Watchmakers.
        
          Content is available under the
          <a itemprop="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
            
              














  
  <figure class="figure figure--icon ">
    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Creative Commons icon</title><path d="M11.983 0c-3.292 0-6.19 1.217-8.428 3.485C1.25 5.819 0 8.844 0 12c0 3.189 1.217 6.148 3.522 8.45C5.827 22.75 8.822 24 11.983 24c3.16 0 6.222-1.25 8.593-3.583C22.815 18.214 24 15.287 24 12c0-3.255-1.186-6.214-3.458-8.483C18.238 1.217 15.275 0 11.983 0zm.033 2.17c2.7 0 5.103 1.02 6.98 2.893 1.843 1.841 2.83 4.274 2.83 6.937 0 2.696-.954 5.063-2.798 6.872-1.943 1.906-4.444 2.926-7.012 2.926-2.601 0-5.038-1.019-6.914-2.893-1.877-1.875-2.93-4.34-2.93-6.905 0-2.597 1.053-5.063 2.93-6.97 1.844-1.874 4.214-2.86 6.914-2.86zM8.68 8.278C6.723 8.278 5.165 9.66 5.165 12c0 2.38 1.465 3.722 3.581 3.722 1.358 0 2.516-.744 3.155-1.874l-1.491-.758c-.333.798-.839 1.037-1.478 1.037-1.105 0-1.61-.917-1.61-2.126 0-1.21.426-2.127 1.61-2.127.32 0 .96.173 1.332.97l1.597-.838c-.68-1.236-1.837-1.728-3.181-1.728zm6.932 0c-1.957 0-3.514 1.382-3.514 3.722 0 2.38 1.464 3.722 3.58 3.722 1.359 0 2.516-.744 3.155-1.874l-1.49-.758c-.333.798-.84 1.037-1.478 1.037-1.105 0-1.611-.917-1.611-2.126 0-1.21.426-2.127 1.61-2.127.32 0 .96.173 1.332.97l1.597-.838c-.68-1.236-1.837-1.728-3.181-1.728z"/></svg>
  </figure>



            
            CC BY-SA 4.0
          </a>.
        
        
          <a href="https://github.com/axe-head-watchmakers/axe-head-watchmakers.github.io">
            














  
  <figure class="figure figure--icon ">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
  </figure>



            Code
          </a>
          is subject to the <a href="https://api.github.com/licenses/mit" itemprop="license">MIT License</a>.
        
      </div>
      

















  
<ul class="menu menu--copyright list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal">
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-terms-and-conditions
        menu-item--menu-copyright--page-terms-and-conditions flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/terms-conditions/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Terms and conditions</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-privacy-policy
        menu-item--menu-copyright--page-privacy-policy flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/privacy-policy/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Privacy Policy</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-accessibility-statement
        menu-item--menu-copyright--page-accessibility-statement flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/accessibility-statement/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Accessibility Statement</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-press
        menu-item--menu-copyright--page-press flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/press/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Press</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-site-map
        menu-item--menu-copyright--page-site-map flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/site-map/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Site map</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-copyright menu-item--page-documentation
        menu-item--menu-copyright--page-documentation flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/docs/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Documentation</a>
      </li>
    
  
</ul>



    </div>
  </section>

Usage

General guidance

The copyright section contains the copyright statement, as well as licensing links if applicable, and the copyright menu.

Accessibility

Just some sample text in the accessibility section for now.

Footer

Example

Options

Code

HTML

          
  <footer itemprop="publisher" itemscope itemtype="http://schema.org/Organization"
    class="footer layout--strip background-color--main color--white ">
    <div class="layout--stripe--inner">
      
        <h2 class="a11y--visually-hidden" itemprop="name">Axe Head Watchmakers</h2>
      

      <div class="layout--row display--flex">
        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          
            <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
              <span>Axe Head Watchmakers</span><br>
              <span itemprop="streetAddress">20900 Moxon Drive</span><br>
              <span itemprop="addressLocality">Clinton Township</span>,
              <span itemprop="addressRegion">MI</span>
              <span itemprop="postalCode">48036</span>
            </address>
          

          
            <ul class="social margin-horizontal--0">
            
              <li class="display--inline-block">
                
                  <a href="https://www.facebook.com/Axe-Head-Watchmakers-104915251857225/" class="font-size--2em" aria-label="Facebook">
                    














  
  <figure class="figure figure--icon ">
    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>
  </figure>



                  </a>
                
              </li>
            
            </ul>
          
        </aside>

        <aside class="layout--column flex--3 display--flex flex-direction--column justify-content--center">
          

















  
<ul class="menu menu--footer list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal font-weight--600 font-size--1p25em">
  
    
      <li class="menu-item menu-item--menu-footer menu-item--page-shop
        menu-item--menu-footer--page-shop flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/products/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Shop</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-footer menu-item--page-about
        menu-item--menu-footer--page-about flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/about/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">About</a>
      </li>
    
  
</ul>



        </aside>
      </div>
    </div>
  </footer>

Usage

General guidance

The footer section contains site contact information, socials, and the footer menu.

Accessibility

Just some sample text in the accessibility section for now.

Form

Example

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
entity	the form entity with all the required props	form
mode	to show a form as a docblock or ref a form entity directly	ref
slug	if mode is ref this is the slug of the form entity to ref	mailchimp

Code

HTML

          
  <form method="POST" action="https://formsubmit.co/contact@axeheadwatch.com"
    enctype="multipart/form-data"
    
    class="form include include--organism include--organism--form
    
    ">
    <label for="_honey" class="a11y--visually-hidden" aria-hidden="true">
      Math CAPTCHA: What's the number of stars on the American flag divided by two?
    </label>
    <input type="text" id="_honey" name="_honey"
      placeholder="(if you're human leave this blank)" class="a11y--visually-hidden" aria-hidden="true" />
    
      <input type="hidden" name="_next" value="https://axe-head-watchmakers.github.io/thank-you/" />
      <input type="hidden" name="_template" value="box" />
      <input type="hidden" name="_subject" value="[Axe Head Watchmakers] Contact Form" />
    

    <fieldset name="message">
  <legend>Shoot us a message</legend>

  {% include forms/form--input.html
    classes=""
    description=false
    label="Name"
    name="fullname"
    required=false
    type="text"
  %}

  {% include forms/form--input.html
    classes=""
    description=false
    label="Email"
    name="email"
    required=true
    type="email"
  %}

  {% include forms/form--textarea.html
    classes=""
    description="Questions, comments, anything."
    label="Message"
    name="message"
    required=true
    rows="4"
  %}
</fieldset>


    <div class="form--actions display--flex justify-content--center">
      <button class="form--button form--button--submit form--actions--button form--actions--button--submit" type="submit">Send</button>
      <button class="form--button form--button--reset form--actions--button form--actions--button--reset a11y--visually-hidden" type="reset">Reset</button>
    </div>
  </form>

Usage

General guidance

The form section can use the mode property in conjunction with a slug to call an entity from a form collection. It can also build a form with any suitably-constructed entity with all the necessary props.

Accessibility

Just some sample text in the accessibility section for now.

Header

Example

Options

Code

HTML

          
  <header class="header layout--strip background-color--main color--white text-align--center
  ">
    <div class="layout--stripe--inner position--relative has--search-widget">
      <a class="header--logo logo" itemprop="url" href="/">
        <img src="/assets/images/required/logo.svg" alt="Axe Head Watchmakers"
          class="image header--image header--logo--image" loading="lazy"
          height="73" width="73"
        />
        <span class="header--logo--tagline tagline font-weight--900 font-style--italic">Watches made from wood</span>
      </a>

      














  
  <div class="search-widget z-index--9998 position--absolute right--0">
    <button type="button" class="js--toggle-below button--search-widget--toggle" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/>
      </svg>
      <span class="js--toggle-below--label a11y--visually-hidden">Open below</span>
    </button>

    <form method="get" action="/search/"
      class="display--flex flex-direction--row position--absolute right--0 js--toggle-below--closed">
      <div class="form--item form--item--input form--item--input--search">
        <label class="label form--item--label a11y--visually-hidden" for="q">Search query</label>
        <input name="q" id="q" placeholder="'Restaurant'...?" type="search" />
      </div>
      <button class="form--button form--button--submit button--search-widget--submit" type="submit">Go</button>
    </form>
  </div>



    </div>
  </header>

Usage

General guidance

The header section contains the logo and identifying information. It also houses the search widget markup.

Accessibility

Just some sample text in the accessibility section for now.

Header + Main nav

Example

Search widget

Example

Options

Code

HTML

          
  <div class="search-widget z-index--9998 ">
    <button type="button" class="js--toggle-below button--search-widget--toggle" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/>
      </svg>
      <span class="js--toggle-below--label a11y--visually-hidden">Open below</span>
    </button>

    <form method="get" action="/search/"
      class="display--flex flex-direction--row position--absolute right--0 js--toggle-below--closed">
      <div class="form--item form--item--input form--item--input--search">
        <label class="label form--item--label a11y--visually-hidden" for="q">Search query</label>
        <input name="q" id="q" placeholder="'Restaurant'...?" type="search" />
      </div>
      <button class="form--button form--button--submit button--search-widget--submit" type="submit">Go</button>
    </form>
  </div>

Usage

General guidance

The search widget is a toggleable icon that opens a search form for keyword searching the whole site. Only one should appear per page in order to avoid id attribute conflicts.

Accessibility

Just some sample text in the accessibility section for now.

Options

Code

HTML

          
  <header class="header--main layout--strip background-color--white color--main-dark text-align--center sticky--top
    ">
    <div class="layout--stripe--inner ">
      <div class="layout--row display--flex">
        <aside class="layout--column flex--none display--flex flex-direction--column justify-content--center">
          <a class="header--logo logo" itemprop="url" href="/">
            <img src="/assets/images/required/logo.svg" alt="Axe Head Watchmakers"
              class="image header--image header--logo--image" loading="lazy"
              height="73" width="73"
            />
            <span class="header--logo--tagline tagline font-weight--900 font-style--italic">Watches made from wood</span>
          </a>
        </aside>

        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          

















  
<ul class="menu menu--main list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal">
  
    
      <li class="menu-item menu-item--menu-main menu-item--page-shop
        menu-item--menu-main--page-shop flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/products/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Shop</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-main menu-item--page-about
        menu-item--menu-main--page-about flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/about/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">About</a>
      </li>
    
  
</ul>



        </aside>

        <aside class="layout--column flex--none display--flex flex-direction--column justify-content--center position--relative
          has--search-widget">
          














  
















  
  <section class="docblock border-radius--default background-color--grey-light padding-vertical--4 padding-horizontal--4
    padding-horizontal--collapse">

    <h3 class="text-align--center">Search widget</h3>

    <h4 class="docblock--example--label">Example</h4>
    <div class="docblock--example position--relative">
      
  <div class="search-widget z-index--9998 ">
    <button type="button" class="js--toggle-below button--search-widget--toggle" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"/>
      </svg>
      <span class="js--toggle-below--label a11y--visually-hidden">Open below</span>
    </button>

    <form method="get" action="/search/"
      class="display--flex flex-direction--row position--absolute right--0 js--toggle-below--closed">
      <div class="form--item form--item--input form--item--input--search">
        <label class="label form--item--label a11y--visually-hidden" for="q">Search query</label>
        <input name="q" id="q" placeholder="'Restaurant'...?" type="search" />
      </div>
      <button class="form--button form--button--submit button--search-widget--submit" type="submit">Go</button>
    </form>
  </div>

    </div>

    <details>
      <summary>Options</summary>

      <div class="layout--row display--flex">
        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          <fieldset class="docblock--classes">
            <legend>Toggle classes</legend>
            
              <div class="form--item form--item--checkbox position--relative">
                <input type="checkbox" name="search-widget--background-color-main-light"
                  id="search-widget--background-color-main-light"
                  value="background-color--main-light" class="docblock--classes--class">
                <label class="label form--item--label display--block font-size--p75em padding-vertical--2"
                  for="search-widget--background-color-main-light">
                  <code>background-color--main-light</code>
                </label>
              </div>
            
              <div class="form--item form--item--checkbox position--relative">
                <input type="checkbox" name="search-widget--font-size-2em"
                  id="search-widget--font-size-2em"
                  value="font-size--2em" class="docblock--classes--class">
                <label class="label form--item--label display--block font-size--p75em padding-vertical--2"
                  for="search-widget--font-size-2em">
                  <code>font-size--2em</code>
                </label>
              </div>
            
          </fieldset>
        </aside>
        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          <h4>Props</h4>
          <table>
            <thead>
             <tr>
               <th>Name</th>
               <th>Description</th>
               <th>Example</th>
             </tr>
            </thead>
            <tbody>
              
              
                <tr>
                  
                  
                    <td>
classes</td>
                  
                    <td> css classes applied to parent</td>
                  
                    <td> color--main-dark
</td>
                  
                </tr>
              
            </tbody>
          </table>
        </aside>
      </div>

    </details>

    <details>
      <summary>Code</summary>

      <div class="layout--row display--flex">
        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          <h4>HTML</h4>
          <figure class="highlight"><pre><code class="language-html" data-lang="html">          
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"search-widget z-index--9998 "</span><span class="nt">&gt;</span>
    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"js--toggle-below button--search-widget--toggle"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">width=</span><span class="s">"16"</span> <span class="na">height=</span><span class="s">"16"</span> <span class="na">viewBox=</span><span class="s">"0 0 16 16"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;path</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"</span><span class="nt">/&gt;</span>
      <span class="nt">&lt;/svg&gt;</span>
      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"js--toggle-below--label a11y--visually-hidden"</span><span class="nt">&gt;</span>Open below<span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;/button&gt;</span>

    <span class="nt">&lt;form</span> <span class="na">method=</span><span class="s">"get"</span> <span class="na">action=</span><span class="s">"/search/"</span>
      <span class="na">class=</span><span class="s">"display--flex flex-direction--row position--absolute right--0 js--toggle-below--closed"</span><span class="nt">&gt;</span>
      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form--item form--item--input form--item--input--search"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"label form--item--label a11y--visually-hidden"</span> <span class="na">for=</span><span class="s">"q"</span><span class="nt">&gt;</span>Search query<span class="nt">&lt;/label&gt;</span>
        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"q"</span> <span class="na">id=</span><span class="s">"q"</span> <span class="na">placeholder=</span><span class="s">"'Restaurant'...?"</span> <span class="na">type=</span><span class="s">"search"</span> <span class="nt">/&gt;</span>
      <span class="nt">&lt;/div&gt;</span>
      <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"form--button form--button--submit button--search-widget--submit"</span> <span class="na">type=</span><span class="s">"submit"</span><span class="nt">&gt;</span>Go<span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/form&gt;</span>
  <span class="nt">&lt;/div&gt;</span>

          </code></pre></figure>
        </aside>
        <aside class="layout--column flex--1 display--flex flex-direction--column justify-content--center
          padding-horizontal--4 padding-horizontal--collapse">
          <h4>Liquid template</h4>
          <figure class="highlight"><pre><code class="language-smarty" data-lang="smarty">          
  {% include molecules/search-widget.html %}

          </code></pre></figure>
        </aside>
      </div>
    </details>

    <details open>
      <summary>Usage</summary>
      <div>
        
<h4 id="general-guidance">General guidance</h4>

<p>The search widget is a toggleable icon that opens a search form for keyword searching the whole site. Only one should appear
per page in order to avoid id attribute conflicts.</p>



      </div>
    </details>

    <details>
      <summary>Accessibility</summary>
      <div>
        
<p>Just some sample text in the accessibility section for now.</p>

      </div>
    </details>
  </section>





        </aside>
      </div>
    </div>
  </header>

Usage

General guidance

The header section contains the logo and identifying information. It also houses the main menu and search widget markup.

Accessibility

Just some sample text in the accessibility section for now.

Header (Pre)

Example

Special promotion! (fake heading for doc outline)

This section can be customized for a fancy, important, temporary feature on the home page. You will probably want to put a fancy background here or otherwise catch users' eyes.

Make your own site easily

Options

Code

HTML

          
  <div class="layout--stripe background-color--second-light color--third-dark js--dismissible
    ">
    <div class="layout--stripe--inner">
      <strong class="heading--h2 font-family--secondary">Special promotion! (fake heading for doc outline)</strong>

      














  
<div class="spacer padding-vertical--4 "></div>




      <p>
        This section can be customized for a fancy, important, temporary feature on the home page. You will probably want
        to put a fancy background here or otherwise catch users' eyes.
      </p>

      














  
<div class="spacer padding-vertical--2 "></div>




      <a href="https://github.com/lowerbarriers/finished-starter" class="button">Make your own site easily</a>
    </div>
  </div>

Usage

General guidance

The header pre is an optional section for the front page, to draw attention above the fold.

Accessibility

Just some sample text in the accessibility section for now.

Hero

Example

Organisms

Options

Code

HTML

          
  
    
    

    <header class="include include--organisms include--organisms--section layout--stripe background-color--main background-image--affectation color--white text-align--center background-image-display-mobile--hide
      "
      id="hero--organisms">
      <div class="layout--stripe--inner">

        
          














  
  <h1 class="heading "
    itemprop="headline">
    
      Organisms
    
  </h1>



        

        

      </div>
    </header>

Usage

General guidance

The hero contains the page title, and sometimes more information like the meta description or other details.

Accessibility

Just some sample text in the accessibility section for now.

Nav

Example

Options

Code

HTML

          
  <nav class="nav nav--main layout--strip padding-vertical--0 background-color--main-dark color--white font-size--1p5em
    font-weight--900 sticky--top ">
    <div class="layout--stripe--inner">
      

















  
<ul class="menu menu--main list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal">
  
    
      <li class="menu-item menu-item--menu-main menu-item--page-shop
        menu-item--menu-main--page-shop flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/products/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Shop</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-main menu-item--page-about
        menu-item--menu-main--page-about flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/about/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">About</a>
      </li>
    
  
</ul>



    </div>
  </nav>

Usage

General guidance

The nav section contains the main menu. It is a headroom-style sticky menu by default.

Accessibility

Just some sample text in the accessibility section for now.

          
  <section class="include include--organisms include--organisms--related layout--stripe
    "
    >
    <div class="layout--stripe--inner">
      

      
      
      
        <ul class="list-style--none layout--multiple--horizontal">
          
            


























  
  <li class="card js--child--link display--flex flex-direction--column ">
    <div class="card--text padding-horizontal--4 padding-vertical--4">
      <h3 class="card--title font-size--1p25em"><a href="/docs/content-guide/accessibility/">Accessibility</a></h3>
      
      <p class="card--description font-size--p75em">Writing guide for inclusivity</p>
    </div>

    














  
  <figure class="figure figure--image figure--image--required-meta-image-default-jpg figure--card--image order--neg1 box-shadow--lifted-edges">
    
      <picture class="picture picture--lazy-load layout--hide--no-javascript" itemprop="image">
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.webp" type="image/webp" />
        

        
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.avif" type="image/avif" />
        

        <img src="/assets/images/required/s.gif"
          data-src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy"
          height="630"
          width="1200"
        />
      </picture>
      <noscript>
        <img src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy" />
      </noscript>
    
    
  </figure>



  </li>



          
            


























  
  <li class="card js--child--link display--flex flex-direction--column ">
    <div class="card--text padding-horizontal--4 padding-vertical--4">
      <h3 class="card--title font-size--1p25em"><a href="/docs/content-guide/be-concise/">Be concise</a></h3>
      
      <p class="card--description font-size--p75em">Write enough to get your point across, but no more.</p>
    </div>

    














  
  <figure class="figure figure--image figure--image--required-meta-image-default-jpg figure--card--image order--neg1 box-shadow--lifted-edges">
    
      <picture class="picture picture--lazy-load layout--hide--no-javascript" itemprop="image">
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.webp" type="image/webp" />
        

        
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.avif" type="image/avif" />
        

        <img src="/assets/images/required/s.gif"
          data-src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy"
          height="630"
          width="1200"
        />
      </picture>
      <noscript>
        <img src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy" />
      </noscript>
    
    
  </figure>



  </li>



          
            


























  
  <li class="card js--child--link display--flex flex-direction--column ">
    <div class="card--text padding-horizontal--4 padding-vertical--4">
      <h3 class="card--title font-size--1p25em"><a href="/docs/content-guide/content-principles/">Content principles</a></h3>
      
      <p class="card--description font-size--p75em">Quick overview of our guiding content principles.</p>
    </div>

    














  
  <figure class="figure figure--image figure--image--required-meta-image-default-jpg figure--card--image order--neg1 box-shadow--lifted-edges">
    
      <picture class="picture picture--lazy-load layout--hide--no-javascript" itemprop="image">
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.webp" type="image/webp" />
        

        
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/required/meta-image--default.jpg.avif" type="image/avif" />
        

        <img src="/assets/images/required/s.gif"
          data-src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy"
          height="630"
          width="1200"
        />
      </picture>
      <noscript>
        <img src="/assets/images/required/meta-image--default.jpg" alt="Site default social image" loading="lazy" />
      </noscript>
    
    
  </figure>



  </li>



          
        </ul>
      
    </div>
  </section>

Usage

General guidance

The related section can highlight content of the same type as the page you’re on.

Accessibility

Just some sample text in the accessibility section for now.

Section

Example

Example section

This is a paragraph of text

Options

Props

Name	Description	Example
classes	css classes applied to parent	background-color--main-dark color--white
children	Contents and sub-contents of the section	Here is some text.
title	Each section should have an h2	This describes what is in the section
title_classes	Styling for the section title	heading--h1

Code

HTML

          
  <section class="include include--organisms include--organisms--section layout--stripe
    background-color--main-light color--white background-image--affectation text-align--center"
    id="section--example-section">
    <div class="layout--stripe--inner">
      
        <h2 class="">Example section</h2>
      

      <p>This is a paragraph of text</p>
    </div>
  </section>

Usage

General guidance

Sections separate large distinct portions of content on a page.

Accessibility

Just some sample text in the accessibility section for now.

Utility

Example

Options

Code

HTML

          
  <section class="utility background-color--main-dark color--white font-size--p875em
  ">
    <div class="layout--stripe--inner">
      <h2 class="a11y--visually-hidden">Utility (verb) navigation</h2>

      

















  
<ul class="menu menu--utility list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal">
  
    
      <li class="menu-item menu-item--menu-utility menu-item--page-contact-us
        menu-item--menu-utility--page-contact-us flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/contact-us/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Contact us</a>
      </li>
    
  
    
      <li class="menu-item menu-item--menu-utility menu-item--page-frequently-asked-questions
        menu-item--menu-utility--page-frequently-asked-questions flex--1 display--flex
        flex-direction--column justify-content--center">
        <a href="/faq/" class="menu-item--link 
          display--flex flex-direction--column justify-content--center">Frequently asked questions</a>
      </li>
    
  
</ul>



    </div>
  </section>

Usage

General guidance

The utility navigation section is for verb-based navigation actions like “Contact us”, as opposed to nouns like About that belong in the main nav.

Accessibility

Just some sample text in the accessibility section for now.

Utility (external)

Example

Options

Code

HTML

          
  <section class="utility utility-external background-color--main-dark color--white font-size--p875em
  ">
    <div class="layout--stripe--inner">
      <h2 class="a11y--visually-hidden">Utility (external) navigation</h2>

      <ul class="menu menu--utility-external list-style--none margin-horizontal--0 border-spaced display--flex layout--row menu-layout--horizontal">
        
          <li class="menu-item flex--1 display--flex flex-direction--column justify-content--center">
            <a href="https://lowerbarriers.org" class="menu-item--link display--flex flex-direction--column justify-content--center">Lower Barriers</a>
          </li>
        
          <li class="menu-item flex--1 display--flex flex-direction--column justify-content--center">
            <a href="https://github.com/lowerbarriers" class="menu-item--link display--flex flex-direction--column justify-content--center">LB GitHub</a>
          </li>
        
          <li class="menu-item flex--1 display--flex flex-direction--column justify-content--center">
            <a href="https://github.com/lowerbarriers/resume" class="menu-item--link display--flex flex-direction--column justify-content--center">Free tech résumé</a>
          </li>
        
      </ul>

    </div>
  </section>

Usage

General guidance

The external utility navigation section is for affiliated and other brand sites related to the current site.

Accessibility

Just some sample text in the accessibility section for now.

Copyright

Example

Copyright, license, and documentation

General guidance

Footer

Example

General guidance

Form

Example

General guidance

Header

Example

General guidance

Header + Main nav

Example

General guidance

Header (Pre)

Example

General guidance

Hero

Example

General guidance

Nav

Example

General guidance

Related

Example

Accessibility

Be concise

Content principles

General guidance

Section

Example

Example section

General guidance

Utility

Example

Utility (verb) navigation

General guidance

Utility (external)

Example

Utility (external) navigation

General guidance

Copyright, license, and documentation