Content Strips

What are they?

Content strips are used to organize and group information. Every element used on the website must be placed on a content strip so it can be properly styled and displayed to users. Organize elements into content strips so that only similar content shares a strip.

Basic usage

HTML structure

<div class="content-strip">
  <div class="flex-item">
    <!-- ... content ... -->
  </div>
</div>

Usage Guidelines

When content strips of the same background color are used adjacent to each other, apply the class .content-strip--no-bottom-padding to all but the last content strip of that color.

Content Strips that are centered should not contain elements other than a title and a paragraph. Do not use buttons, images, graphs, or multiple paragraphs.

The first content strip at the top of the page should contain the page title and, if applicable, a small description or introduction to the page. Additionally, the background should be the website's primary color and the contents of the content strip should be centered. This style of content strip should only be used in this fashion.

Variants

Standard

<div class="content-strip">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
    <a class="mdc-button mdc-button--outlined">Action 1</a>
    <a class="mdc-button mdc-button--outlined">Action 2</a>
  </div>
</div>

Primary background

<div class="content-strip content-strip--primary">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
    <a class="mdc-button mdc-button--outlined">Action 1</a>
    <a class="mdc-button mdc-button--outlined">Action 2</a>
  </div>
</div>

Secondary background

<div class="content-strip content-strip--secondary">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
    <a class="mdc-button mdc-button--outlined">Action 1</a>
    <a class="mdc-button mdc-button--outlined">Action 2</a>
  </div>
</div>

Extra padding

<div class="content-strip content-strip--extra-padding">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
    <a class="mdc-button mdc-button--outlined">Action 1</a>
    <a class="mdc-button mdc-button--outlined">Action 2</a>
  </div>
</div>

Reduced padding

<div class="content-strip content-strip--reduced-padding">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
  </div>
</div>

Centered

<div class="content-strip content-strip--center">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
  </div>
</div>

Title

<div class="content-strip content-strip--primary content-strip--extra-padding content-strip--center">
  <div class="flex-item">
    <h2>Title goes here</h2>
    <p>Paragraph text goes here</p>
  </div>
</div>

Style customization

CSS classes

Remember to remove unneeded classes when changing variants to avoid conflicts in the CSS

CSS class	Description
content-strip--primary	Sets the background of the content strip to the primary color. Text color also adjusts to white to be legible on a dark background.
content-strip--secondary	Sets the background of the content strip to the secondary color. Text color also adjusts to white to be legible on a dark background.
content-strip--center	Horizontally centers the contents of the content strip.
content-strip--extra-padding	Adds extra vertical padding to the content strip
content-strip--reduced-padding	Removes excess vertical padding from the content strip.
content-strip--no-bottom-padding	Removes bottom padding from the content strip. Should only be used when followed by another content strip of the same color background.