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

Alex Inman

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/alex-inman/">
                <span itemprop="name">Alex Inman</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">13697</span>
      </div>

      <div class="font-size--p875em">
        That is <span>60.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
- Sections (reusable)
Strategic Plan
Technical
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>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/content-technical/seo/" class="
                
              ">Search engine optimization</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>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/assets/youtube/" class="
                
              ">YouTube videos</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>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/design/sections/" class="
                
              ">Sections (reusable)</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>
            
          
        

        
        

        
        
      

        
        

        
        

        
        

          
          

          
          
            

            
              

          
          
          
            
              <li><a href="/docs/technical/tests/" class="
                
              ">Tests</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>
          <div class="table--wrapper">
            <table>
              <thead>
              <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Example</th>
              </tr>
              </thead>
              <tbody>
                
                
              </tbody>
            </table>
          </div>
        </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>

Liquid template

          
  {% include molecules/menu.html
    menu="copyright"
    classes="border-spaced display--flex layout--row menu-layout--horizontal"
    item_classes="filter--drop-shadow--white"
  %}

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.

Search widget

Example

Options

Code

HTML

          
  <div class="search-widget position--relative ">
    <button type="button" class="js--toggle-below button--search-widget--toggle background-color--main" 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 z-index--9998 position--absolute 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="'Remodel'...?" 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.

Tweet

Example

Add your stars and join the groundswell!
November 25, 2020

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
date	Human-readable date for the tweet
url	Link to the tweet from the embed code usually

Code

HTML

          
  <blockquote class="twitter-tweet include include--molecule include--molecule--tweet
    "
    data-dnt="true" data-theme="dark"
  >
    <p>Add your stars and join the groundswell!</p>
    <a href="https://twitter.com/lowerbarriers/status/1331681214168780800">November 25, 2020</a>
  </blockquote>

Liquid template

          
  {% include molecules/tweet.html
    classes=""
    children="Add your stars and join the groundswell! <a href="https://t.co/XU2hI8gBbg">https://t.co/XU2hI8gBbg</a>"
    date="November 25, 2020"
    url="https://twitter.com/lowerbarriers/status/1331681214168780800"
  %}

Usage

General guidance

Tweets first render as blockquotes, and are then made into tweets via a third-party script. On this site we only include the Twitter script on pages that need it by using this molecule rather than encouraging direct tweet embeds (which do work).

Accessibility

Just some sample text in the accessibility section for now.

YouTube

Example

Me at the zoo — The very first YouTube video

Options

Props

Name	Description	Example
caption	optional text to describe the video	The very first YouTube video
classes	css classes applied to parent	color--main-dark
id	The string of letters and numbers in a YouTube URL after the v	jNQXAC9IVRw

Code

HTML

          
  
  <figure class="figure figure--youtube js--youtube include include--molecule include--molecule--youtube
    "
    data-youtube="jNQXAC9IVRw" data-title="Me at the zoo"
  >
    <a href="https://www.youtube.com/watch?v=jNQXAC9IVRw">
      <picture class="picture picture--lazy-load layout--hide--no-javascript" itemprop="image">
        
        
        
        
        

        
        
        
        

        
        
        

        
        
        
        
          <source srcset="/assets/images/required/s.webp"
            data-srcset="/assets/images/youtube/jNQXAC9IVRw.jpg.webp" type="image/webp" />
        

        <img src="/assets/images/required/s.gif"
          data-src="/assets/images/youtube/jNQXAC9IVRw.jpg" alt="Me at the zoo" loading="lazy"
          height="360"
          width="480"
        />
      </picture>
      <noscript>
        <img src="/assets/images/youtube/jNQXAC9IVRw.jpg" alt="Me at the zoo" loading="lazy" />
      </noscript>
    </a>
    
      <figcaption class="figcaption figure--youtube--figcaption position--relative z-index--1">The very first YouTube video</figcaption>
    
  </figure>

Usage

General guidance

YouTube videos can really slow down the page load, so using this component is a helper for performance. It loads only the thumbnail image until you interact with it, and which point the whole video loads.

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

Search widget

Example

General guidance

Tweet

Example

General guidance

YouTube

Example

General guidance

Copyright, license, and documentation