Container

A container is an often-invisible layout element that pushes in from the viewport edges, providing an outer margin and background styling to a row of content. A container often holds the grid component, used for detailed layout within the row.

Width Options

Containers come in two widths: large and full-width. They are identical on smaller devices, only deviating above 1080px viewport width.

Large

The large container reaches a 1000px maximum width on large viewports.

Code Copied
Copy Code 
<div class="spirit-container">
    <div class="spirit-container__inner spirit-container__inner--large">
        <h3>Large Container</h3>
    </div>
</div>
  • Never use vertical navigation in this container.
  • Above 1080px, outer left/right margins are 80px. Width locks at 1000px.

Full Width

The full-width container reaches a 1152px maximum width on large viewports.

Code Copied
Copy Code 
<div class="spirit-container">
    <div class="spirit-container__inner">
        <h3>Large Container</h3>
    </div>
</div>
  • Use for sidebar-plus-body layouts, particularly with vertical navigation.
  • Above 1080px, outer left/right margins are 24px. Width locks at 1152px.

Vertical Padding

Containers can be configured with vertical padding in four pre-set sizes: extra-small, small, medium, and large. These sizes are responsive, as shown below.

Class Below 1080px Value 1080px and up Value

spirit-container__inner--padding-[top|bottom]-xs
      

24px
      

32px

spirit-container__inner--padding-[top|bottom]-sm
      

32px
      

64px

spirit-container__inner--padding-[top|bottom]-md
      

48px
      

96px

spirit-container__inner--padding-[top|bottom]-lg
      

96px
      

192px

Mix and match top and bottom padding sizes to fit your layout needs. The following full-width container has large top padding and extra small bottom padding.

Padding top lg and padding bottom xs
Code Copied
Copy Code 
<div class="spirit-container">
    <div class="spirit-container__inner spirit-container__inner--padding-top-lg spirit-container__inner--padding-bottom-xs"> Padding top lg and padding bottom xs </div>
</div>

Background Colors

Containers provide two different background placement options: outer and inner.

Outer Inner

.spirit-container

Apply an outer background to paint the entire row. This background stretches to the left and right viewport edges.

.spirit-container__inner

Apply an inner background to paint just the container. This background ends at the container’s left and right margins.

Background Color Classes

Apply these helper classes to outer .spirit-container or inner .spirit-container__inner as shown above.

Class Color

none

transparent

.spirit-context--white

$spirit-background-color-white

.spirit-context--brand

$spirit-background-color-brand

.spirit-context--black

$spirit-background-color-black

Brushes

Brushes are a key hallmark of Spirit visual style. Container is one way to orient and structure brushes within a layout. For more information about brush specifications, see brush

Painted Edges

Use brushes to mask the top and/or bottom edges of a container’s background and contents. The brush mask creates the appearance of a brush stroke across the container.

Always use the JDRF blue background, .spirit-context--brand.

Painted Edge Example

painted edge example

Construction

  1. Set up the container normally, using either large or full-width size. All container padding options are compatible with brushes.
  2. Apply background color .spirit-context--brand to spirit-container.
  3. Add a helper class to spirit-container__inner to modify it for painted edges, using spirit-container__inner--painted-edge-top, spirit-container__inner--painted-edge-bottom, or spirit-container__inner--painted-edge-both.
  4. Add a painted-edge svg to the top and/or bottom of the container’s content. Follow the code blocks below.

Top Painted Edge SVG

Code Copied
Copy Code 
<div class="spirit-container__painted-edge-top">
    <div class="spirit-container__painted-edge-top-inner">
        <svg class="spirit-brush spirit-brush--painted-edge-top" aria-hidden="true">
            <use xlink:href="/brushes/spirit-brushes.svg#painted-edge-top"></use>
        </svg>
    </div>
</div>

Bottom Painted Edge SVG

Code Copied
Copy Code 
<div class="spirit-container__painted-edge-bottom">
    <div class="spirit-container__painted-edge-bottom-inner">
        <svg class="spirit-brush spirit-brush--painted-edge-bottom" aria-hidden="true">
            <use xlink:href="/brushes/spirit-brushes.svg#painted-edge-bottom"></use>
        </svg>
    </div>
</div>

Wave Background

Use brushes to accent a row by adding waves to a container. The brush sits lower in the z-index than other content, peaking playfully from behind. See various examples below.

Wave 5 Example

wave 5 example

Construction

  1. Set up the container normally, using either large or full-width size. All container padding options are compatible with brushes.
  2. Add a wave svg to the top or bottom of the container’s content. Follow the code block below.

Wave 5 SVG

Code Copied
Copy Code 
<div class="spirit-container__wave-bg  spirit-container__wave-bg--wave5">
    <div class="spirit-container__wave-bg-inner">
        <svg class="spirit-brush spirit-brush--wave5" aria-hidden="true">
            <use xlink:href="/brushes/spirit-brushes.svg#wave5"></use>
        </svg>
    </div>
</div>