Pattern Library

<div class="container">
  <p>…content goes here…</p>
  <p>And here’s <a href="#">a link</a>.</p> 
</div>

• This class can be added to structural elements such as <article>, and <section>.
• If you do want to use an <article>, be sure to include the aria-labelledby attribute, and point it to an appropriate heading.
• Every container has an optional .container_header and .container_footer elements.

Pattern scope:

Organism – A superset of molecules and atoms, often includes behaviour

Relevant assets:

Stylesheets:

• Shared stylesheets [See index.css]
• /css/patterns/container.css

• Optional header 

  Create a logical (and optional) header for this container

  Example

  Open type in a new window

  Code sample

  <article class="container" data-theme="alternate" aria-labelledby="heading-header-example">
    <header class="container_header" data-align="center">
      <h3 id="heading-header-example" class="heading" data-scheme="section">Section heading</h3>
    </header>
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </article>

  Notes

  • The text alignment in these headers can be centered with the data-align="center" attribute
  • If you're using structural elements such as <article> or <section> for this container, then you're free to use the <header> element for this .container_header.
• Optional footer 

  Create a logical (and optional) footer for this container

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="alternate">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
    <div class="container_footer" data-align="center">
      <p>Container footnotes fit nicely in this optional footer</p>
    </div>
  </div>

  Notes

  • The text alignment in these footers can be centered with the data-align="center" attribute
• Theme: Alternate 

  A slightly darker background colour for alternate containers

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="alternate">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: glow 

  A gradient background with top and bottom cappucino colours.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="glow">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: Rich 

  An inverted colour scheme with a rich coffee-like background colour.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="rich">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: emphasis 

  Mostly used for the call-us banner, this container features an inverted colour scheme with an almost-black background colour.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="emphasis">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: Special 

  Reserve this container theme for special features.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="special">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: Spectral 

  A simplified version of the special scheme.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="spectral">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Theme: Stripped 

  Removes the default background-color

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="stripped">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Anchor: Top 

  Set the background image to start from the top

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="special" data-anchor="top">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Anchor: Center 

  Set the background image to start from the center

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="special" data-anchor="center">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Anchor: Bottom 

  Set the background image to start from the bottom

  Example

  Open type in a new window

  Code sample

  <div class="container" data-theme="special" data-anchor="bottom">
    <p>…content goes here…</p>
    <p>And here’s <a href="#">a link</a>.</p> 
  </div>

• Elevator 

  Using negative margins, pull the designated element up and out of the container. This is really useful when used with Hero Banner pictures.

  • WARNING: This modifier has the potential to obscure content in the previous container. Please test thoroughly! Use the foundation modifier to ease the fit.
  • WARNING: When using this on the Hero Banner picture, be sure to use an aspect ratio greater than 2x/3y.
  • Only works on large screens
  • Can be placed on containers, layouts, and other selected block-level elements.
  • Pairs well with the foundation being set on previous content

  Example

  Open type in a new window

  Code sample

  <div class="container">
    <p>Previous container</p>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit.
      Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
      impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
      Quos!
    </p>
  </div>
  <div class="container" data-theme="alternate">
    <div class="hero_banner">
      <div class="content">
        <h2 class="heading" data-scheme="page">
          Pure, clean, unadulterated fibre
        </h2>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
          impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
          Quos!
        </p>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
          Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
          impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
          Quos!
        </p>
      </div>
      <picture class="container_elevator">
        <img src="https://placehold.co/400x1200/000000/fffffff/webp" alt>
      </picture>
    </div>
  </div>

• Foundation 

  Doubles the amount of bottom container padding on the designated element.

  • Only works on large screens
  • Can be placed on containers, layouts, and other selected block-level elements.
  • Intended for use with the elevator being set on subsequent containers or layouts.

  Example

  Open type in a new window

  Code sample

  <div class="container container_foundation" data-theme="alternate">
    <p>Extra bottom padding applied</p>
  </div>

• Mode: Masthead 

  Reserved for the first container in the <main> element, this container applies its background underneath the site-header.

  Example

  Open type in a new window

  Code sample

  <site-header class="container" data-theme="stripped">
    …Site header…
  </site-header>
  <main>
    <div class="container" data-theme="glow" data-mode="masthead">
      <div class="hero_banner">
        <div class="content">
          <h2 class="heading" data-scheme="page">
            Pure, clean, unadulterated fibre
          </h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
            impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
            Quos!
          </p>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Illo optio mollitia assumenda odio iure voluptatum sed, magnam,
            impedit quis ipsam doloremque debitis dolor esse obcaecati distinctio voluptate ea itaque?
            Quos!
          </p>
        </div>
        <picture>
          <img src="https://placehold.co/800x1200/000000/fffffff/webp" alt>
        </picture>
      </div>
    </div>
  </main>

  Notes
• Look-up form 

  Creates a parent container context so that the form can behave responsively.

  Example

  Open type in a new window

  Code sample

  <div class="container" data-mode="lookup-form">
    <form action="#step-2" method="GET">
      <div class="form_row">
        <label for="input_location">What’s your address?</label>
        <div class="form_field">
          <input type="search"
                name="location"
                id="input_location"
                aria-describedby="input_location_help"
                data-icon="location"
                data-mode="icon-after"
                required>
        </div>
        <em class="form_field_help_text" id="input_organisation_help">
          We’ll only use this to find out where you need internet access
        </em>
      </div>
      <div class="form_row form_buttons">
        <button type="submit"
                data-size="small"
                data-scheme="primary"
                data-icon="arrow-right"
                data-mode="icon-after">
          Go!
        </button>
      </div>
    </form>
  </div>

  Notes

  • You'll need a specially crafted form as the contents. See the lookup-form variant.