Components

Grid

CSS grid component using flexbox and box-sizing for extra awesomeness.

1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
<div class="Grid Grid--fit">
  <div class="Grid-cell u-sizeFull">1/1</div>
  <div class="Grid-cell u-size1of2">1/2</div>
  <div class="Grid-cell u-size1of2">1/2</div>
  <div class="Grid-cell u-size1of3">1/3</div>
  <div class="Grid-cell u-size1of3">1/3</div>
  <div class="Grid-cell u-size1of3">1/3</div>
  <div class="Grid-cell u-size1of4">1/4</div>
  <div class="Grid-cell u-size1of4">1/4</div>
  <div class="Grid-cell u-size1of4">1/4</div>
  <div class="Grid-cell u-size1of4">1/4</div>
  <div class="Grid-cell u-size1of6">1/6</div>
  <div class="Grid-cell u-size1of6">1/6</div>
  <div class="Grid-cell u-size1of6">1/6</div>
  <div class="Grid-cell u-size1of6">1/6</div>
  <div class="Grid-cell u-size1of6">1/6</div>
  <div class="Grid-cell u-size1of6">1/6</div>
</div>

Alert

Alert message used to display urgent information.

Oregon House set to vote on crucial bill in 2 days

A bill that will help keep firearms out of the hands of domestic abusers will be voted on this Thursday.

Contact your state representatives 

<div class="Alert">
  <div class="u-textBigger">
    <svg class="Icon u-textRed u-marginRightXs">
      <use xlink:href="/assets/toolkit/icons.svg#alert-icon"/>
    </svg> </div>
  <div class="u-textSmaller">
    <h3 class="u-marginTopNone">Oregon House set to vote on crucial bill in 2 days</h3>
    <p class="u-marginEndsNone">A bill that will help keep firearms out of the hands of domestic abusers will be voted on this Thursday.</p>
    <p class="u-marginEndsNone"><a href="#" class="u-decorationNone">Contact your state representatives <svg class="Icon">
  <use xlink:href="/assets/toolkit/icons.svg#caret-icon"/>
</svg></a></p>
  </div>
</div>

Block

Base

Donate to Ceasefire Oregon

Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund. 

<div class="Block ">
  <div class="Block-image">
    <img src="/assets/toolkit/images/sandbox/rally.jpg" />
  </div>
  <div class="Block-info u-stackMd">
    <div class="u-stackXs">
      <h4>Donate to Ceasefire Oregon</h4>
      <p>
        Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund.
      </p>
    </div>
    <button class="Button Button--primary Button--block" type="button">
Donate</button> </div>
</div>

Primary

Donate to Ceasefire Oregon

Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund. 

<div class="Block  Block--primary">
  <div class="Block-image">
    <img src="/assets/toolkit/images/sandbox/rally.jpg" />
  </div>
  <div class="Block-info u-stackMd">
    <div class="u-stackXs">
      <h1>Donate to Ceasefire Oregon</h1>
      <p>
        Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund.
      </p>
    </div>
    <button class="Button Button--inverse Button--block" type="button">
Donate</button> </div>
</div>

Secondary

Donate to Ceasefire Oregon

Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund. 

<div class="Block  Block--secondary">
  <div class="Block-image">
    <img src="/assets/toolkit/images/sandbox/rally.jpg" />
  </div>
  <div class="Block-info u-stackMd">
    <div class="u-stackXs">
      <h3>Donate to Ceasefire Oregon</h3>
      <p>
        Your support enables Ceasefire Oregon to continue working toward a stronger, safer Oregon for all of us. Donations can be made to either our educational foundation or our political action fund.
      </p>
    </div>
    <button class="Button Button--inverse Button--block" type="button">
Donate</button> </div>
</div>

Button

Base

Style buttons with the base .Button class, this will apply the default styling.

The button classes are best applied to links and buttons.

<button class="Button" type="button">
    Default Button
</button>

Style Variations

Modifier classes can be used to apply different styling to the base button.

These components can be used in forms, as calls to action, or as part of the general UI of the site/app.

Modifiers

  • .Button--primary
  • .Button--secondary
  • .Button--tertiary
  • .Button--twitter
  • .Button--facebook
<button class="Button" type="button">
    Default
</button>

<button class="Button Button--primary" type="button">
    Primary
</button>

<button class="Button Button--secondary" type="button">
    Secondary
</button>

<button class="Button Button--tertiary" type="button">
    Tertiary
</button>

<button class="Button Button--twitter" type="button">
    Twitter
</button>

<button class="Button Button--facebook" type="button">
    Facebook
</button>

Counter

Base

Use counters to provide automatic numbering to a group of elements.

Classes

  • .Counter: Class applied to containing element
  • .Counter-item: Class applied to numbered children
  1. Require higher standards for gun ownership.
  2. Enhance accountability of federally licensed firearm dealers.
  3. Improve safety standards for guns and gun ownership. 
<ol class="Counter">
  <li class="Counter-item">
    Require higher standards for gun ownership.
  </li>
  <li class="Counter-item">
    Enhance accountability of federally licensed firearm dealers.
  </li>
  <li class="Counter-item">
    Improve safety standards for guns and gun ownership.
  </li>
</ol>

Bigger

Counters scale proportionally with text size. Add the u-textBigger utility for larger font-size. Use the u-stack* utility to increase space between items.

  1. Require higher standards for gun ownership.
  2. Enhance accountability of federally licensed firearm dealers.
  3. Improve safety standards for guns and gun ownership. 
<ol class="Counter u-stackMd u-textBigger">
  <li class="Counter-item">
    Require higher standards for gun ownership.
  </li>
  <li class="Counter-item">
    Enhance accountability of federally licensed firearm dealers.
  </li>
  <li class="Counter-item">
    Improve safety standards for guns and gun ownership.
  </li>
</ol>

Icon

Base

By default, icons inherit the parent element's size and text color. This means they pair well with most text-based elements, utilities and/or modifiers.

<svg class="Icon">
  <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
</svg>

Size Examples

Use text utilities to size an icon relative to its parent.

Smaller parent + icon

Smaller icon

Default

Bigger icon

Bigger parent + icon 

<p class="u-textSmaller">
  <svg class="Icon u-textSmaller">
    <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
  </svg> Smaller parent + icon
</p>

<p>
  <svg class="Icon u-textSmaller">
    <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
  </svg> Smaller icon
</p>

<p>
  <svg class="Icon">
    <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
  </svg> Default
</p>

<p>
  <svg class="Icon u-textBigger">
    <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
  </svg> Bigger icon
</p>

<p class="u-textBigger">
  <svg class="Icon u-textBigger">
    <use xlink:href="/assets/toolkit/icons.svg#dove-icon"/>
  </svg> Bigger parent + icon
</p>

Available Icons

These icons are all available in the default icon sprite.

  • act
  • alert
  • blog
  • caret-left
  • caret
  • ask
  • dove
  • dove-circle
  • external-link
  • facebook
  • gun-turn-in
  • learn
  • legislation
  • twitter

Input

Base

Style basic text inputs with the .Input class.

<label for="InputExampleBasic">Basic text input</label>
<input class="Input" type="text" placeholder="Text" id="InputExampleBasic">

Disabled

Add disabled to an <input> to apply muted styling and disable interaction.

<label class="InputLabel" for="InputExampleDisabled" disabled>Disabled input</label>
<input class="Input" type="text" placeholder="Disabled" disabled id="InputExampleDisabled">

Textarea 

<label class="InputLabel" for="InputExampleTextArea">Textarea</label>
<textarea class="Input" type="text" placeholder="Multiline text" id="InputExampleTextArea"></textarea>

Input Group

With Label And Button

Use .InputGroup to style a block of related form elements.

Classes

Use existing .Button and .Input classes, in addition to:

  • .InputGroup: Root class applied to parent
  • .InputGroup-extra: Applied to <label> or other accompanying text
<div class="InputGroup">
  <label class="InputGroup-extra" for="InputGroupExample1">Search:</label>
  <input class="Input" type="text" id="InputGroupExample1" placeholder="Keywords...">
  <button class="Button Button--primary">Go</button>
</div>

Button Only 

<div class="InputGroup">
  <label class="u-hiddenVisually" for="InputGroupExample3">Search:</label>
  <input class="Input" type="text" id="InputGroupExample3" placeholder="Keywords...">
  <button class="Button Button--default">Go</button>
</div>

Label Only 

<div class="InputGroup">
  <label class="InputGroup-extra" for="InputGroupExample1">Search:</label>
  <input class="Input" type="text" id="InputGroupExample2" placeholder="Keywords...">
</div>

Masthead

Base

Logo for the top of pages. Includes "short" and "tall" variations for different viewports. Defaults to the "Ceasfire Oregon" logo.

Ceasefire Oregon 
<object class="Masthead" data="/assets/toolkit/images/masthead/co-responsive.svg" type="image/svg+xml">
  <a href="/">
    <img src="/assets/toolkit/images/masthead/co-tall.png"
      alt="Ceasefire Oregon">
  </a>
</object>

Education Foundation

Logo variation for the Education Foundation.

Ceasefire Oregon Education Foundation 
<object class="Masthead Masthead--withSubhead" data="/assets/toolkit/images/masthead/edu-responsive.svg" type="image/svg+xml">
  <a href="/">
    <img src="/assets/toolkit/images/masthead/edu-tall.png"
      alt="Ceasefire Oregon Education Foundation">
  </a>
</object>

Action Fund

Logo variation for the PAC.

Ceasefire Oregon Action Fund 
<object class="Masthead Masthead--withSubhead" data="/assets/toolkit/images/masthead/pac-responsive.svg" type="image/svg+xml">
  <a href="/">
    <img src="/assets/toolkit/images/masthead/pac-tall.png"
      alt="Ceasefire Oregon Action Fund">
  </a>
</object>

Page

Base

Container for page content. Uses the current brand color for the top edge, gains margin at larger viewport sizes. Displays the site logo, primary navigation and footer content by default.

The .Page-content class is used to center and constrain content for larger viewports.

Page content goes here. 
<div class="Page">
  <header class="Page-content" role="banner">
    <object class="Masthead" data="/assets/toolkit/images/masthead/co-responsive.svg" type="image/svg+xml">
        <a href="/">
          <img src="/assets/toolkit/images/masthead/co-tall.png"
            alt="Ceasefire Oregon">
        </a>
      </object>
    <nav>
      <ul class="PriorityPlus js-PriorityPlus">
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/act.html">
                Act
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/learn.html">
                Learn
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/our-plan.html">
                Our Plan
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/legislation.html" aria-describedby="current">
                Legislation
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/blog-landing.html">
                Blog
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/about.html">
                About
              </a>
        </li>
        <li class="PriorityPlus-overflow js-PriorityPlus-overflow">
          <a class="PriorityPlus-item PriorityPlus-item--toggle js-PriorityPlus-overflow-toggle" href="#nav-overflow">
              + More
            </a>
          <ul class="PriorityPlus-overflow-menu js-PriorityPlus-overflow-menu" id="nav-overflow">
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/act.html">
                    Act
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/learn.html">
                    Learn
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/our-plan.html">
                    Our Plan
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/legislation.html" aria-describedby="current">
                    Legislation
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/blog-landing.html">
                    Blog
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/about.html">
                    About
                  </a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="u-hidden" id="current">Current Page</div>
    </nav>
  </header>
  <div class="Page-content">
    Page content goes here.
  </div>
  <footer class="Page-footer" role="contentinfo">
    <a class="Page-footer-homeLink" href="/" title="Home">
      <svg class="Icon">
          <use xlink:href="/assets/toolkit/icons.svg#dove-circle-icon"/>
        </svg> </a>
    <div class="Page-content u-paddingMd">
      <div class="Grid">
        <nav class="Grid-cell u-md-size1of2 u-lg-size1of3">
          <ul class="u-listInline u-marginEndsNone u-weightBold">
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Act</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Learn</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Our Plan</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Legislation</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Blog</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">About</a>
            </li>
          </ul>
        </nav>
        <hr class="Grid-cell u-marginBottomMd u-md-hidden">
        <div class="Grid-cell u-size10of12 u-md-size5of12 u-lg-size1of3 vcard">
          <p class="u-marginTopNone u-marginBottomMd adr">
            <span class="u-hiddenVisually fn org">Ceasefire Oregon</span>
            <span class="street-address">PO Box 91155</span><br>
            <span class="locality">Portland</span>,
            <span class="region">Oregon</span>
            <span class="postal-code">97291</span>
          </p>
          <p class="u-marginNone">
            <a class="u-textBlack tel" href="tel:15034513630">
                  503.451.3630
                </a>
          </p>
          <p class="u-marginTopNone u-marginBottomMd">
            <a class="u-textBlack email" href="mailto:info@ceasefireoregon.org">
                info@ceasefireoregon.org
              </a>
          </p>
        </div>
        <div class="Grid-cell u-size2of12 u-md-size1of12 u-lg-size1of12 u-lg-flexOrderLast">
          <ul class="u-listUnstyled u-marginNone u-stackXs u-textRight">
            <li>
              <a href="https://twitter.com/CeasefireOregon" class="Button Button--twitter u-paddingSidesXs">
                <svg class="Icon u-textBigger">
                      <use xlink:href="/assets/toolkit/icons.svg#twitter-icon"/>
                    </svg> </a>
            </li>
            <li>
              <a href="https://www.facebook.com/ceasefireoregon/" class="Button Button--facebook u-paddingSidesXs">
                <svg class="Icon u-textBigger">
                      <use xlink:href="/assets/toolkit/icons.svg#facebook-icon"/>
                    </svg> </a>
            </li>
          </ul>
        </div>
        <hr class="Grid-cell u-marginBottomMd u-lg-hidden">
        <div class="Grid-cell u-lg-size3of12">
          <ul class="u-listUnstyled u-marginNone u-stackMd">
            <li>
              <a class="u-textBlack" href="#">
                    Ceasefire Oregon
                      <span class="u-textNoWrap">Education Foundation</span>
                  </a>
            </li>
            <li>
              <a class="u-textBlack" href="#">
                    Ceasefire Oregon
                      <span class="u-textNoWrap">Action Fund</span>
                  </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

Page Variations

The base Page component can be used with spacing utilties as needed. Below is an example using .u-paddingLg.

We've got ourselves some lovely page content here, what do you think?

<div class="Page">
  <header class="Page-content" role="banner">
    <object class="Masthead" data="/assets/toolkit/images/masthead/co-responsive.svg" type="image/svg+xml">
        <a href="/">
          <img src="/assets/toolkit/images/masthead/co-tall.png"
            alt="Ceasefire Oregon">
        </a>
      </object>
    <nav>
      <ul class="PriorityPlus js-PriorityPlus">
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/act.html">
                Act
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/learn.html">
                Learn
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/our-plan.html">
                Our Plan
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/pages/legislation.html" aria-describedby="current">
                Legislation
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/blog-landing.html">
                Blog
              </a>
        </li>
        <li class="js-PriorityPlus-item">
          <a class="PriorityPlus-item" href="/sandbox/about.html">
                About
              </a>
        </li>
        <li class="PriorityPlus-overflow js-PriorityPlus-overflow">
          <a class="PriorityPlus-item PriorityPlus-item--toggle js-PriorityPlus-overflow-toggle" href="#nav-overflow">
              + More
            </a>
          <ul class="PriorityPlus-overflow-menu js-PriorityPlus-overflow-menu" id="nav-overflow">
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/act.html">
                    Act
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/learn.html">
                    Learn
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/our-plan.html">
                    Our Plan
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/pages/legislation.html" aria-describedby="current">
                    Legislation
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/blog-landing.html">
                    Blog
                  </a>
            </li>
            <li class="js-PriorityPlus-overflow-item">
              <a class="PriorityPlus-overflow-menu-item" href="/sandbox/about.html">
                    About
                  </a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="u-hidden" id="current">Current Page</div>
    </nav>
  </header>
  <div class="Page-content u-paddingLg">
    <p>We've got ourselves some lovely page content here, what do you think?</p>
  </div>
  <footer class="Page-footer" role="contentinfo">
    <a class="Page-footer-homeLink" href="/" title="Home">
      <svg class="Icon">
          <use xlink:href="/assets/toolkit/icons.svg#dove-circle-icon"/>
        </svg> </a>
    <div class="Page-content u-paddingMd">
      <div class="Grid">
        <nav class="Grid-cell u-md-size1of2 u-lg-size1of3">
          <ul class="u-listInline u-marginEndsNone u-weightBold">
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Act</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Learn</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Our Plan</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Legislation</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">Blog</a>
            </li>
            <li class="u-marginBottomMd u-md-size1of2 u-lg-size1of2">
              <a class="u-textBlack" href="[object Object]">About</a>
            </li>
          </ul>
        </nav>
        <hr class="Grid-cell u-marginBottomMd u-md-hidden">
        <div class="Grid-cell u-size10of12 u-md-size5of12 u-lg-size1of3 vcard">
          <p class="u-marginTopNone u-marginBottomMd adr">
            <span class="u-hiddenVisually fn org">Ceasefire Oregon</span>
            <span class="street-address">PO Box 91155</span><br>
            <span class="locality">Portland</span>,
            <span class="region">Oregon</span>
            <span class="postal-code">97291</span>
          </p>
          <p class="u-marginNone">
            <a class="u-textBlack tel" href="tel:15034513630">
                  503.451.3630
                </a>
          </p>
          <p class="u-marginTopNone u-marginBottomMd">
            <a class="u-textBlack email" href="mailto:info@ceasefireoregon.org">
                info@ceasefireoregon.org
              </a>
          </p>
        </div>
        <div class="Grid-cell u-size2of12 u-md-size1of12 u-lg-size1of12 u-lg-flexOrderLast">
          <ul class="u-listUnstyled u-marginNone u-stackXs u-textRight">
            <li>
              <a href="https://twitter.com/CeasefireOregon" class="Button Button--twitter u-paddingSidesXs">
                <svg class="Icon u-textBigger">
                      <use xlink:href="/assets/toolkit/icons.svg#twitter-icon"/>
                    </svg> </a>
            </li>
            <li>
              <a href="https://www.facebook.com/ceasefireoregon/" class="Button Button--facebook u-paddingSidesXs">
                <svg class="Icon u-textBigger">
                      <use xlink:href="/assets/toolkit/icons.svg#facebook-icon"/>
                    </svg> </a>
            </li>
          </ul>
        </div>
        <hr class="Grid-cell u-marginBottomMd u-lg-hidden">
        <div class="Grid-cell u-lg-size3of12">
          <ul class="u-listUnstyled u-marginNone u-stackMd">
            <li>
              <a class="u-textBlack" href="#">
                    Ceasefire Oregon
                      <span class="u-textNoWrap">Education Foundation</span>
                  </a>
            </li>
            <li>
              <a class="u-textBlack" href="#">
                    Ceasefire Oregon
                      <span class="u-textNoWrap">Action Fund</span>
                  </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</div>

Panel

Base

Use .Panel to wrap content in a visible container. Utility classes can be added to achieve the desired internal padding.

I am a panel

With some content.

<div class="Panel u-paddingMd">
  <h2>I am a panel</h1>
  <p>With some content.</p>
</div>

Wide

Add the .Panel--wide modifier to horizontally extend the container beyond the edges of surrounding content at small screens and up.

I am a wide panel

With some content.

<div class="Panel Panel--wide u-paddingMd">
  <h2>I am a wide panel</h1>
  <p>With some content.</p>
</div>

With Tag

Add a child .Panel-tag and .u-posRelative to .Panel to add a tag to the upper right corner of a Panel.

Tag content

I am a wide panel with a tag.

With some content.

<div class="Panel Panel--wide u-paddingMd u-posRelative">
  <p class="Panel-tag u-marginEndsNone u-textSmaller u-familySans">Tag content</p>
  <h2>I am a wide panel with a tag.</h1>
  <p>With some content.</p>
</div>

Priority Plus

  • inprogress
  • javascript

Navigation component that moves wrapping menu items into an "overflow" menu when JavaScript is available.

Current Page
<ul class="PriorityPlus js-PriorityPlus">
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/pages/act.html">
        Act
      </a>
  </li>
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/sandbox/learn.html">
        Learn
      </a>
  </li>
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/pages/our-plan.html">
        Our Plan
      </a>
  </li>
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/pages/legislation.html" aria-describedby="current">
        Legislation
      </a>
  </li>
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/sandbox/blog-landing.html">
        Blog
      </a>
  </li>
  <li class="js-PriorityPlus-item">
    <a class="PriorityPlus-item" href="/sandbox/about.html">
        About
      </a>
  </li>
  <li class="PriorityPlus-overflow js-PriorityPlus-overflow">
    <a class="PriorityPlus-item PriorityPlus-item--toggle js-PriorityPlus-overflow-toggle" href="#nav-overflow">
      + More
    </a>
    <ul class="PriorityPlus-overflow-menu js-PriorityPlus-overflow-menu" id="nav-overflow">
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/pages/act.html">
            Act
          </a>
      </li>
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/sandbox/learn.html">
            Learn
          </a>
      </li>
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/pages/our-plan.html">
            Our Plan
          </a>
      </li>
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/pages/legislation.html" aria-describedby="current">
            Legislation
          </a>
      </li>
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/sandbox/blog-landing.html">
            Blog
          </a>
      </li>
      <li class="js-PriorityPlus-overflow-item">
        <a class="PriorityPlus-overflow-menu-item" href="/sandbox/about.html">
            About
          </a>
      </li>
    </ul>
  </li>
</ul>
<div class="u-hidden" id="current">Current Page</div>

Select

Base

Add styles to select element via Select class.

<label>Choose an option:</label>
<select class="Select">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

Disabled

Add disabled to apply muted styles and disable interaction.

<label>Choose an option:</label>
<select disabled class="Select">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

Table

Use the .Table class to apply simple styling to tables.

Ceasefire Annual Gun Turn-ins
Year Turn-ins
1994 600
1995 300
1996 689
1997 1069
1998 1069
1999 692
2000 692 
<table class="Table">
  <caption>
    Ceasefire Annual Gun Turn-ins
  </caption>
  <thead>
    <tr>
      <th>
        Year
      </th>
      <th>
        Turn-ins
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1994
      </td>
      <td>
        600
      </td>
    </tr>
    <tr>
      <td>
        1995
      </td>
      <td>
        300
      </td>
    </tr>
    <tr>
      <td>
        1996
      </td>
      <td>
        689
      </td>
    </tr>
    <tr>
      <td>
        1997
      </td>
      <td>
        1069
      </td>
    </tr>
    <tr>
      <td>
        1998
      </td>
      <td>
        1069
      </td>
    </tr>
    <tr>
      <td>
        1999
      </td>
      <td>
        692
      </td>
    </tr>
    <tr>
      <td>
        2000
      </td>
      <td>
        692
      </td>
    </tr>
  </tbody>
</table>