3.1 #components.accordions Accordions

Togglable accordion. Button is visible only in screen sizes smaller than medium

Example
  • Heading

    Accordion Content
<ul accordion="primary">
   <li>
       <h3>Heading</h3>
       <button accordion-button title="Title content"></button>
       <div>Accordion Content</div
   </li>
</ul>
<ul accordion="secondary">
   <li aria-expanded="false">
       <h3>Heading</h3>
       <button accordion-text>
         <span class='accordion-more'>more</span>
         <span class='accordion-less'>less</span>
       </button>
   </li>
</ul>

3.2 #components.breadcrumbs Breadcrumbs

Breadcrumbs throughout site

Example
<div>
  <a class="breadcrumb" href="/how-it-works/">How it works</a>
  /
</div>

3.3 #components.bureaus Bureaus

Bureaus live on the About page

Example
U.S. Fish and Wildlife Service Department of the Interior Seal

United States Fish and Wildlife Service

Mission: to work with others to conserve, protect and enhance fish, wildlife, and plants and their habitats for the continuing benefit of the American people. USFWS manages the 150 million-acre National Wildlife Refuge System primarily for the benefit of fish and wildlife; manages 70 fish hatcheries and other related facilities for endangered species recovery and to restore native fisheries populations; protects and conserves migratory birds, threatened and endangered species, and certain marine mammals; and hosts approximately 47 million visitors annually at 561 refuges located in all 50 states and 38 wetland management districts.

Go to the USFWS website →

<div class="container">
 <article class="bureau">
   <div class="bureau-left">
     <img class="bureau-image" src="https://eiti-dev.18f.gov/img/logos/USFWS-mark.png" alt="U.S. Fish and Wildlife Service Department of the Interior Seal">
   </div>
   <div class="bureau-right">
     <h4>United States Fish and Wildlife Service</h4>
     <p>Mission: to work with others to conserve, protect and enhance fish, wildlife, and plants and their habitats for the continuing benefit of the American people. USFWS manages the 150 million-acre National Wildlife Refuge System primarily for the benefit of fish and wildlife; manages 70 fish hatcheries and other related facilities for endangered species recovery and to restore native fisheries populations; protects and conserves migratory birds, threatened and endangered species, and certain marine mammals; and hosts approximately 47 million visitors annually at 561 refuges located in all 50 states and 38 wetland management districts.</p>
     <p><a href="http://www.fws.gov/">Go to the USFWS website &#8594;</a></p>
   </div>
 </article>
</div>

3.4 #components.buttons Buttons

Buttons suitable for clicking

Examples
Default styling
.button
Standard class -- creates generic button
.button-primary
primary style of button
.button-secondary
primary style of button
.button-big
larger button
<button class='button [modifier class]'>[modifier class]</button>
Example
U.S. natural resource sectors

What are natural resources?

[This is where we say what natural resources are]

Find out more
<div class="container">
<article class="card">
  <img class="card-image" src="https://eiti-dev.18f.gov/img/sectors.png" alt="U.S. natural resource sectors">
  <div class="card-content">
    <h1 class="card-title">What are natural resources?</h1>
    <p>[This is where we say what natural resources are]</p>
    <a href="#" class="card-link">Find out more <i class="icon-chevron-sm"></i></a>
  </div>
</article>
</div>
Example

Coal

coal

Fossil fuels like coal are the main source of electricity in the U.S. Coal forms in the ground in seams or beds over tens of millions of years. Miners extract coal through surface and underground mining.

Visit this page
<div class="container">
<article class="card card-secondary">
  <a href="#"><div class="card-splash">
    <h3 class="card-splash_title">Coal <i class="icon-chevron-sm"></i></h3>
    <div class="card-splash_image">
      <img class="" src="../img/icons/coal.svg" alt="coal">
    </div>
  </div></a>
  <div class="card-content">
    <p>Fossil fuels like coal are the main source of electricity in the U.S. Coal forms in the ground in seams or beds over tens of millions of years. Miners extract coal through surface and underground mining.</p>
    <a class="card-link" href="#">Visit this page <span class="shrink-fa"><icon class="fa fa-chevron-right"></icon></span></a>
  </div>
</article>
</div>
Example
Glossary drawer
Glossary drawer
<div class="drawer" id="glossary" aria-hidden="false">
  <button title="Close glossary"
      class="button button--close toggle"><label class="sr-only">Close glossary</label><icon class="icon-close-x"></icon>
  </button>
  <label for="drawer-search" class="label">Filter glossary terms</label>
  <input id="drawer-search" type="search" placeholder="e.g. placeholder text">
</div>

3.6.2 #components.drawer.term Term classes

Wrap glossary terms with these classes

Examples
Default styling

What are extractive industries , Brian asked inquisitively

.term
Standard class -- adds the book icon

What are extractive industries , Brian asked inquisitively

.term-end
Used when directly followed by punctuation

What are extractive industries , Brian asked inquisitively

<p>What are <span class="term [modifier class]" data-term="extractive industry" title="Click to define" tabindex="0">
    extractive industries
    <icon class="icon-book"></icon>
</span>, Brian asked inquisitively</p>

3.7 #components.footnotes Footnotes

Technique from http://www.sitepoint.com/accessible-footnotes-css/ Initialiazing a footnotes counter on the wrapper

Example

This is an example foonote. 26

  1. Barrels noted as “bbl” when used as a unit of measure

<p>This is an example foonote.<sup id="fnref:26">
	<a href="#fn:26" class="footnote">26</a>
</sup>
</p>
<div class="footnotes">
  <ol>
    <li id="fn:26">
      <p>Barrels noted as “bbl” when used as a unit of measure <a href="#fnref:1" class="reversefootnote">↩</a></p>
    </li>
  </ol>
</div>

3.8 #components.ribbon Ribbon

A ribbon with two columns of content

Example

Interacting with the data helps shed light on where natural resources in the U.S. are extracted, how they contribute to national revenues, and how they affect state and local economies.

We have information from government sources on revenue, production, and economic impact. Several datasets are new in 2015, including federal production and federal revenue by company information.

Map of the US with the Gulf of Mexico highlighted. Total U.S. revenue: 12,261,828,343. Gulf of Mexico revenue: 7,572,080,117. Calendar year 2013.
The Gulf of Mexico accounted for over 60% of U.S. federal extractive revenue in 2013. View the data.
<section class="slab-delta">
  <div class="container-page-wrapper landing-section_top ribbon ribbon-column">
    <div class="container-left-8 ribbon-hero ribbon-hero-column">
      <h1></h1>
      <p class="ribbon-hero-description">Interacting with the data helps shed light on where natural resources in the U.S. are extracted, how they contribute to national revenues, and how they affect state and local economies.</p>
      <p class="ribbon-hero-description">We have information from government sources on <a href="#revenue">revenue</a>, <a href="#production">production</a>, and <a href="#economic-impact">economic impact</a>. Several datasets are new in 2015, including <a href="/explore/federal-production/">federal production</a> and <a href="/explore/federal-revenue-by-company/">federal revenue by company</a> information.</p>
    </div>
    <div class="container-right-4 ribbon-card-column ribbon-card-has-image ribbon-card">
      <figure class="ribbon-card-top">
        <a href="/explore/#revenue/">
          <img class="ribbon-card-image" src="/img/explore-landing-intro.png" alt="Map of the US with the Gulf of Mexico highlighted. Total U.S. revenue: 12,261,828,343. Gulf of Mexico revenue: 7,572,080,117. Calendar year 2013.">
        </a>
      </figure>
      <figcaption class="ribbon-card-bottom">The Gulf of Mexico accounted for over 60% of U.S. federal extractive revenue in 2013. <a href="/explore/federal-revenue-by-location/" class="link-alpha">View the data.</a></figcaption>
    </div>
  </div>
</section>