Molecules

Molecules are characterized by having more than just one little thing to them, and by not being a form input.

Accordion

Example

I haven't gotten my invitation. Are you still mailing them out?

We mailed out all invitations a while ago. If you did not receive one you probably were not invited. It's a small wedding, sorry.

Options

Props

Name	Description	Example
children	content . Can be plain text or markup	Here is some plain text
classes	css classes applied to parent	color--main-dark
open	whether or not the accordion is open by default	true
title	The summary of the children contents	Plaintext

Code

HTML

          
  <details class="accordion include include--molecule include--molecule--accordion text-align--left
    " >
    <summary class="position--relative font-weight--900">I haven't gotten my invitation. Are you still mailing them out?</summary>
    <p>We mailed out all invitations a while ago. If you did not receive one you probably were not invited. It's a small wedding, sorry.</p>
  </details>

Liquid template

          
  {% include molecules/accordion.html
    classes=""
    children="<p>We mailed out all invitations a while ago. If you did not receive one you probably were not invited. It's a small wedding, sorry.</p>"
    title="I haven't gotten my invitation. Are you still mailing them out?"
  %}

Usage

General guidance

Accordions are used for progressive disclosure. Specifically, they can be used for things like FAQs, where the alternativue would be anchor links in a table of contents for showing the headings, then clicking to show the answer/detail.

Accordions should not be used to hide large amounts of content. That is being dishonest to the user about the content on the page. To mediate this, the accordion could be open by default.

Accessibility

Just some sample text in the accessibility section for now.

Alert

Example

Brad made a status alert

Options

Props

Name	Description	Example
children	content . Can be plain text or markup	Here is some plain text
classes	css classes applied to parent	color--main-dark
dismissible	whether the alert can be closed	true
level	three levels that influence styling: status warning error	status

Code

HTML

          
  <div class="alert include include--module include--molecule--alert position--relative
    
    js--dismissible
    alert--status"
  id="alert--brad-made-a-status-alert" role="alert">
    <p>Brad made a status alert</p>
  </div>

Usage

General guidance

Alerts let the user know something more important and timely that body text.

Accessibility

Just some sample text in the accessibility section for now.

Byline

Example

Author(s):

Brad Czerniak

Options

Code

HTML

          
  <div class="byline byline--docs display--flex layout--row justify-content--center
    ">
    
      <address class="byline--authors author layout--column flex--1 display--flex flex-direction--column justify-content--center
        padding-horizontal--4 padding-horizontal--collapse">
        <strong>Author(s):</strong>
        <ol class="byline--authors--list list-style--none margin-horizontal--0">
          
            
            <li class="byline--authors--list-item">
              <a rel="author" itemprop="author" href="/people/brad-czerniak/">
                <span itemprop="name">Brad Czerniak</span>
              </a>
            </li>
          
        </ol>
      </address>
    

    <time class="layout--column flex--1 display--flex flex-direction--column justify-content--center padding-horizontal--4
      padding-horizontal--collapse" pubdate datetime="" itemprop="datePublished">
      
    </time>

    <aside class="byline--word-count layout--column flex--1 display--flex flex-direction--column justify-content--center
      padding-horizontal--4 padding-horizontal--collapse">
      <div>
        <strong>Word count</strong>:
        <span itemprop="wordCount">205</span>
      </div>

      <div class="font-size--p875em">
        That is <span>0.9</span> minutes of reading.
      </div>
    </aside>

    
  </div>

Usage

General guidance

Bylines give metadata about a page, post, or entity.

Accessibility

Just some sample text in the accessibility section for now.

Collection hierarchy

Example

Content guide
Content technical
Design
- Assets
- Atoms
- Design tokens
  - Lang
    - Lang (translated)
  - Root
    - Color
    - Values (design tokens)
- Forms
- Icons
- Molecules
- Moodboard
- Organisms
Strategic Plan
Technical
- Browser support
- Performance budget
User experience

Options

Props

Name	Description	Example
classes	css classes applied to parent	color--main-dark
collection	a collection registered with Jekyll	docs
entity	usually the current page. Used for highlight the active page	page

Code

HTML

          
  
    <ul class="collection-hierarchy--list list-style--none ">
      
      

        
        

        
        
          
            
              <li><strong>Content guide</strong>
                <ul>
            
          
            
              <li><a href="/docs/content-guide/accessibility/" class="
                
              ">Accessibility</a></li>
            
          
        

        
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-guide/be-concise/" class="
                
              ">Be concise</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-guide/content-principles/" class="
                
              ">Content principles</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-guide/grammar-mechanics/" class="
                
              ">Grammar and mechanics</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-guide/voice-tone/" class="
                
              ">Voice and tone</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-guide/writing-about-people/" class="
                
              ">Writing about people</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><strong>Content technical</strong>
                <ul>
            
          
            
              <li><a href="/docs/content-technical/javascript/" class="
                
              ">JavaScript</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-technical/layouts/" class="
                
              ">Layouts</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-technical/markdown/" class="
                
              ">Markdown</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><strong>Design</strong>
                <ul>
            
          
            
              <li><strong>Assets</strong>
                <ul>
            
          
            
              <li><a href="/docs/design/assets/gif/" class="
                
              ">GIF files</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/assets/jpg/" class="
                
              ">JPEG files</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/assets/json/" class="
                
              ">JSON files</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/assets/png/" class="
                
              ">PNG files</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/assets/svg/" class="
                
              ">SVG files</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/atoms/" class="
                
              ">Atoms</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><strong>Design tokens</strong>
                <ul>
            
          
            
              <li><strong>Lang</strong>
                <ul>
            
          
            
              <li><a href="/docs/design/design-tokens/lang/lang/" class="
                
              ">Lang (translated)</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><strong>Root</strong>
                <ul>
            
          
            
              <li><a href="/docs/design/design-tokens/root/color/" class="
                
              ">Color</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/design-tokens/root/values/" class="
                
              ">Values (design tokens)</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/forms/" class="
                
              ">Forms</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/icons/" class="
                
              ">Icons</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/molecules/" class="
                active
              ">Molecules</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/moodboard/" class="
                
              ">Moodboard</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/organisms/" class="
                
              ">Organisms</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><a href="/docs/strategic-plan/" class="
                
              ">Strategic Plan</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><strong>Technical</strong>
                <ul>
            
          
            
              <li><a href="/docs/technical/browser-support/" class="
                
              ">Browser support</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/technical/performance-budget/" class="
                
              ">Performance budget</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              </ul></li>
            
          
            

            
              

          
          
          
            
              <li><strong>User experience</strong>
                <ul>
            
          
            
              <li><a href="/docs/user-experience/information-architecture/" class="
                
              ">Information architecture</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/user-experience/personas/" class="
                
              ">Personas</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/user-experience/user-testing/" class="
                
              ">User testing</a></li>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/user-experience/ux-principles/" class="
                
              ">UX principles</a></li>
            
          
        

        
        
          
            
            </ul></li>
          
        

        
        
      
    </ul>

Usage

General guidance

A collection hierarchy represents all the items in a collection, as organized in the collection’s directory structure. It can serve as a secondary navigation, especially on pages for docs.

Accessibility

Just some sample text in the accessibility section for now.

Docblock

Example

Options

Code

Usage

Accessibility

Options

Props

Name	Description	Example
accessibility	text describing any concerns or guidance on the accessibility of the component	Sample text
classes	css classes applied to the parent	color--main-dark
html	rendered HTML of the component	component
liquid	example of calling the component in liquid with the necessary props	liquid
name	short name of the component for the block	name
props	enumeration of the props for the component in a parsable format	props
source	pass along the source include for usage if needed	include
usage	detailed notes on using and not using the component	usage

Code

HTML

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

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

    <h4 class="docblock--example--label">Example</h4>
    <div class="docblock--example position--relative">
      
    </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>
            
          </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>
              
              
            </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">          
          </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">          
          </code></pre></figure>
        </aside>
      </div>
    </details>

    <details open>
      <summary>Usage</summary>
      <div>
        



      </div>
    </details>

    <details>
      <summary>Accessibility</summary>
      <div>
        

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

Liquid template

          
  {% include molecules/docblock.html
    accessibility=accessibility
    classes=classes
    html=component
    liquid=liquid
    name=name
    props=props
    source=include
    usage=usage
  %}

Usage

General guidance

Docblocks are used by the internal component system to show examples and documentation for other components.

Accessibility

Just some sample text in the accessibility section for now.

          
<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>

Usage

General guidance

Menus can be used to group related navigation links together in order to display an implied information architecture.

Accessibility

Just some sample text in the accessibility section for now.

Previous/Next

Example

Options

Code

HTML

          
  <nav role="navigation" aria-label="Links to previous and next pages in source order"
    class="display--flex flex-direction--row ">
    
    

    

    
      <div class="flex--1 text-align--left">
        <a class="pager--link pager--link--prev button" href="/events/2020/07/bachlor-party/">
          Previous<span class="a11y--visually-hidden"> page, Bachelor party</span>
        </a>
        <span class="pager--link--title layout--hide--narrow" aria-hidden="true">Bachelor party</span>
      </div>
    

    
      <div class="flex--1 text-align--right">
        <a class="pager--link pager--link--next button" href="/events/2020/10/reception-dinner/">
          Next<span class="a11y--visually-hidden"> page, Reception dinner</span>
        </a>
        <span class="pager--link--title layout--hide--narrow" aria-hidden="true">Reception dinner</span>
      </div>
    
  </nav>

Usage

General guidance

A prev/next pager is a good way to drive engagement on serialized pages where a user may want to continue reading in source order.

Accessibility

Just some sample text in the accessibility section for now.

Product summary

Example

SKU: SBFRT-0001

Price: 82.99

Options

Code

Usage

General guidance

Product summary is the product equivalent of a byline or event details component. It shows the SKU, price, and other fixed fields for a product.

Accessibility

Just some sample text in the accessibility section for now.

Product widget

Example

Notice: Shopping cart functionality requires JavaScript to be enabled.

Options

Code

HTML

          
  <div class="product--widget layout--hide--no-javascript ">
    <div class="product--widget--quantity">
      <label for="sbfrt-0001-quantity">Quantity:</label>
      <input type="number" id="sbfrt-0001-quantity" name="sbfrt-0001-quantity"
        class="product--widget--quantity--input" min="1" value="1" />
    </div>
    <div class="product--widget--buy-button">
      <button type="button"
        class="buy-button snipcart-add-item"
        data-item-quantity="1"
        data-item-id="SBFRT-0001"
        data-item-name="A banana"
        data-item-price="82.99"
        
          data-item-image="http://shelbybrad.com/assets/images/1200x630/banana.jpg"
        
        data-item-url="http://shelbybrad.com/products/a-banana/"
        data-item-description="Affordable, portable fruiting"
      >
        Add to cart
      </button>
    </div>
  </div>
  <noscript>
    














  
  <div class="alert include include--module include--molecule--alert position--relative
    
    js--dismissible
    alert--error"
  id="alert--notice-shopping-cart-functi..." role="alert">
    <p><strong>Notice</strong>: Shopping cart functionality requires JavaScript to be enabled.</p>
  </div>



  </noscript>

Usage

General guidance

Product widgets set up a buy button for snipcart with a quantity selector.

Accessibility

Just some sample text in the accessibility section for now.

Search widget

Example

Options

Code

HTML

          
  <div class="search-widget position--absolute right--0 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.

Accordion

Example

General guidance

Alert

Example

General guidance

Byline

Example

General guidance

Collection hierarchy

Example

General guidance

Docblock

Example

Example

General guidance

Menu

Example

General guidance

Previous/Next

Example

General guidance

Product summary

Example

General guidance

Product widget

Example

General guidance

Search widget

Example

General guidance

Copyright, license, and documentation