Top Hat

Indicate associated USDA agency and organization.

USDA United States Department of Agriculture

<div class="fsa-tophat">
  <div class="fsa-tophat__bd">
    <div class="fsa-tophat__primary">
      <span class="fsa-tophat__agency">
        <a class="fsa-tophat__link" href="//usda.gov" title="Link to USDA homepage">
          <img role="presentation" class="fsa-tophat__agency-logo" src="/fsa-design-system/img/usda-logo--white.svg" alt="">
          <abbr class="fsa-tophat__agency-abbr" title="United States Department of Agriculture">USDA</abbr>
          <span class="fsa-tophat__agency-fullname">United States Department of Agriculture</span>
        </a>
      </span>
    </div>
    <div class="fsa-tophat__secondary">
      <span class="fsa-tophat__subagency">
        <a class="fsa-tophat__link" href="//fsa.usda.gov" title="Link to FSA homepage">Farm Production and Conservation</a>
      </span>
    </div>
  </div>
</div>

Variants

Fullscreen

Demo: view on boilerplate.html and invoke the Fullscreen Toggle.

USDA United States Department of Agriculture

Farm Production and Conservation

<div class="fsa-tophat fsa-tophat--fullscreen">
  <div class="fsa-tophat__bd">
    <div class="fsa-tophat__primary">
      <span class="fsa-tophat__agency">
        <a class="fsa-tophat__link" href="//usda.gov" title="Link to USDA homepage">
          <img role="presentation" class="fsa-tophat__agency-logo" src="/fsa-design-system/img/usda-logo--white.svg" alt="">
          <abbr class="fsa-tophat__agency-abbr" title="United States Department of Agriculture">USDA</abbr>
          <span class="fsa-tophat__agency-fullname">United States Department of Agriculture</span>
        </a>
      </span>
    </div>
    <div class="fsa-tophat__secondary">
      <span class="fsa-tophat__subagency">
        Farm Production and Conservation
      </span>
    </div>
  </div>
</div>

Custom

Selectively combine with CSS Utilities, such as Background COlors.

class="fsa-bg--secondary-900"

USDA United States Department of Agriculture

Farm Production and Conservation

<div class="fsa-tophat fsa-bg--secondary-900">
  <div class="fsa-tophat__bd">
    <div class="fsa-tophat__primary">
      <span class="fsa-tophat__agency">
        <a onclick="trackLink('USDA Homepage','Header Top Hat')" class="fsa-tophat__link" href="//usda.gov" title="Link to USDA homepage">
          <img role="presentation" class="fsa-tophat__agency-logo" src="img/usda-logo--white.svg" alt="">
          <abbr class="fsa-tophat__agency-abbr" title="United States Department of Agriculture">USDA</abbr>
          <span class="fsa-tophat__agency-fullname">United States Department of Agriculture</span>
        </a>
      </span>
    </div>
    <div class="fsa-tophat__secondary">
      <span class="fsa-tophat__subagency">
        Farm Production and Conservation
      </span>
    </div>
  </div>
</div>

Responsive

View on a larger screen or device to fully appreciate Responsive Web Design rendering.

Usage

Use

When an Application is viewable to a internal or public audience.
When an Application needs to have a clear indication of an offical government website.

Don’t Use

On any area of the page except for the first item.

General Guidance

The Top Hat should be positioned above the Application Header Component when paired together in an FPAC Application.

Overview

Variants

Fullscreen

Custom

Responsive

Usage

Use

Don’t Use

General Guidance