FEC Pattern Library

Header

When to use

  • The header should be positioned at the top of all FEC.gov pages and connected apps.

When to consider something else

  • A prominent display scenario on the website home page. The home page uses a custom version of the standard header that displays a larger and uncropped version of the FEC seal.

GitHub issues

<header class="site-header">
      <div class="masthead">
          <div class="disclaimer">
              <span class="disclaimer__right">
                  An official website of the United States Government
                  <img src="/img/us_flag_small.png" alt="US flag signifying that this is a United States Federal Government website">
              </span>
          </div>
          <img src="/img/print-logo.png" class="u-print-only" alt="FEC logo">
          <a title="Home" href="/" rel="home" class="site-title"><span class="u-visually-hidden">Federal Election Commission | United States of America</span></a>
          <ul class="utility-nav list--flat">
              <li class="utility-nav__item"><a href="/calendar/">Calendar</a></li>
              <li class="utility-nav__item"><button class="js-glossary-toggle glossary__toggle">Glossary</button></li>
              <li class="utility-nav__search">
                  <form accept-charset="UTF-8" action="/search" class="combo" method="get" role="search">
                      <input type="hidden" name="type" value="candidates">
                      <input type="hidden" name="type" value="committees">
                      <input type="hidden" name="type" value="site">
                      <label class="u-visually-hidden" for="query">Search</label>
                      <input class="js-site-search combo__input" autocomplete="off" id="query" name="query" type="text" aria-label="Search FEC.gov">
                      <button type="submit" class="button--standard combo__button button--search">
                          <span class="u-visually-hidden">Search</span>
                      </button>
                  </form>
              </li>
          </ul>
      </div>
  </header>
 
<header class="site-header">
    <div class="masthead">
      <div class="disclaimer">
        <span class="disclaimer__right">
          An official website of the United States Government
          <img src="/img/us_flag_small.png" alt="US flag signifying that this is a United States Federal Government website">
        </span>
      </div>
      <img src="/img/print-logo.png" class="u-print-only" alt="FEC logo">
      <a title="Home" href="/" rel="home" class="site-title"><span class="u-visually-hidden">Federal Election Commission | United States of America</span></a>
      <ul class="utility-nav list--flat">
        <li class="utility-nav__item"><a href="/calendar/">Calendar</a></li>
        <li class="utility-nav__item"><button class="js-glossary-toggle glossary__toggle">Glossary</button></li>
        <li class="utility-nav__search">
          <form accept-charset="UTF-8" action="/search" class="combo" method="get" role="search">
            <input type="hidden" name="type" value="candidates">
            <input type="hidden" name="type" value="committees">
            <input type="hidden" name="type" value="site">
            <label class="u-visually-hidden" for="query">Search</label>
            <input
              class="js-site-search combo__input"
              autocomplete="off"
              id="query"
              name="query"
              type="text"
              aria-label="Search FEC.gov">
            <button type="submit" class="button--standard combo__button button--search">
              <span class="u-visually-hidden">Search</span>
            </button>
          </form>
        </li>
      </ul>
    </div>
  </header>
 
/* No context defined. */