1 #blocks Blocks

Styles applied to pages or non-modular blocks of html

1.1 #blocks.about About

Styles for the page at /about/

1.2 #blocks.banner US Bar Disclaimer Banner

This is the banner that lives at the top of every page. It links people to our github issues so that we can get input from the American people.

Example
<section class="banner slab-beta">
  <span class="banner-left">An official website of the US Government <img class="banner-image" src="/img/us-flag-small.png" alt="US flag signifying that this is a United States Federal Government website"></span>
  <span class="banner-right">This site is in development. <a class="link-alpha" title="Learn about this site's development" tabindex="0" href="https://github.com/18F/doi-extractives-data/issues/">See what's new</a>.</span>
</section>

1.3 #blocks.case-studies Case Studies

Styles for the page at /case-studies/

1.3.2 #blocks.case-studies.intro Case Studies Intro

The intro is the introduction to the /case-studies/ page

1.4 #blocks.disbursements Disbursements

Styles for the page at /explore/disbursements/

1.5 #blocks.downloads Downloads

Styles for the page at /downloads/

1.6 #blocks.explore Explore

General layout for Explore Data sections all styles namespaced within .explore-subpage class

1.9 #blocks.header Header

This is on the top of every page. Find in _includes/layout/header.html

<header class="header">
  <div>
    <a class="header-image_link" href="/">
      <img class="header-image" src="https://eiti-dev.18f.gov/img/USEITI_Logotype.png" alt="USEITI logo">
    </a>
  </div>
  <nav class="header-nav">
    <ul class="header-nav_inner">
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="/">Home</a>
      </li>
      <li class="header-nav_item">
        <a class="header-nav_item_link" href="/about">About USEITI</a>
      </li>
    </ul>
  </nav>
</header>

1.10 #blocks.how-it-works How it Works

Styles for the page at /how-it-works/

1.10.2 #blocks.how-it-works.intro Revenues Subpage Intro Section

This is the first block on a revenues subpage

1.10.3 #blocks.how-it-works.steps Revenues Steps

Table display of different revenues steps

1.10.4 #blocks.how-it-works.subpage_involved Revenues Subpage Involved Section

This block is where we post videos and social media links on how to become involved

1.10.5 #blocks.how-it-works.subpage_nav Revenues Subpage Nav

This block styles the tags that enable navigation between like subpages

1.15 #blocks.state-pages State pages

Styles for the page at /states/