Skip to primary navigation Skip to main content
US flag signifying that this is a United States Federal Government website An official website of the United States Government USDA United State Department of Agriculture Farm Production and Conservation
FPAC Design System fsa-style@2.7.3
Get Started

Application Header

Overview

Display application name and account-level actions.

This component isn’t necessarily a required Global Navigation structure; rather, it effectively serves as a ready-made UI Pattern implemented with FPAC Design System styles and parts.

[abbr] [app name]
Brandon Reuben Log out

Variants

Fullscreen

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

[abbr] [app name]
Brandon Reuben Log out 
<div class="fsa-header-app fsa-header-app--fullscreen">
  <div class="fsa-header-app__bd">
    <div class="fsa-header-app__primary">
      <a onclick="trackLink('Boilerplate', 'Header App fullscreen [abbr]')" class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
        <span class="fsa-header-app__app-name">
          <abbr class="fsa-header-app__app-abbr" title="[Spell out the acronym]">[abbr]</abbr>
          <span class="fsa-header-app__app-full">[app name]</span>
        </span>
      </a>
    </div>
    <div class="fsa-header-app__secondary">
      <span class="fsa-header-app__profile">
        <span class="fsa-header-app__profile-name">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            <span>Brandon Reuben</span>
          </span>
        </span>
        <a href="/link.html" class="fsa-header-app__profile-link">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path> </svg>
            <span>Log out</span>
          </span>
        </a>
      </span>
    </div>
  </div>
</div>

Examples

Default

[abbr] [app name]
Brandon Reuben Log out 
<div class="fsa-header-app">
  <div class="fsa-header-app__bd">
    <div class="fsa-header-app__primary">
      <a onclick="trackLink('Boilerplate', 'Header App [abbr]')" class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
        <span class="fsa-header-app__app-name">
          <abbr class="fsa-header-app__app-abbr" title="[Spell out the acronym]">[abbr]</abbr>
          <span class="fsa-header-app__app-full">[app name]</span>
        </span>
      </a>
    </div>
    <div class="fsa-header-app__secondary">
      <span class="fsa-header-app__profile">
        <span class="fsa-header-app__profile-name">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            <span>Brandon Reuben</span>
          </span>
        </span>
        <a href="/link.html" class="fsa-header-app__profile-link">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path> </svg>
            <span>Log out</span>
          </span>
        </a>
      </span>
    </div>
  </div>
</div>

No acronym

Design System Boilerplate
Brandon Reuben Log out 
<div class="fsa-header-app">
  <div class="fsa-header-app__bd">
    <div class="fsa-header-app__primary">
      <a class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
        <span class="fsa-header-app__app-name">
          <span class="fsa-header-app__app-full">Design System Boilerplate</span>
        </span>
      </a>
    </div>
    <div class="fsa-header-app__secondary">
      <span class="fsa-header-app__profile">
        <span class="fsa-header-app__profile-name">Brandon Reuben</span>
        <a href="/link.html" class="fsa-header-app__profile-link">Log out</a>
      </span>
    </div>
  </div>
</div>

Acronym only

ABC
Brandon Reuben Log out 
<div class="fsa-header-app">
  <div class="fsa-header-app__bd">
    <div class="fsa-header-app__primary">
      <a class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
        <span class="fsa-header-app__app-name">
          <abbr class="fsa-header-app__app-abbr">ABC</abbr>
        </span>
      </a>
    </div>
    <div class="fsa-header-app__secondary">
      <span class="fsa-header-app__profile">
        <span class="fsa-header-app__profile-name">Brandon Reuben</span>
        <a href="/link.html" class="fsa-header-app__profile-link">Log out</a>
      </span>
    </div>
  </div>
</div>

Custom

Selectively combine with CSS Utilities, such as Background COlors.

class="fsa-bg--secondary"

[abbr] [app name]
Brandon Reuben Log out 
<div class="fsa-header-app fsa-bg--secondary">
  <div class="fsa-header-app__bd">
    <div class="fsa-header-app__primary">
      <a onclick="trackLink('Boilerplate', 'Header App [abbr]')" class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
        <span class="fsa-header-app__app-name">
          <abbr class="fsa-header-app__app-abbr" title="[Spell out the acronym]">[abbr]</abbr>
          <span class="fsa-header-app__app-full">[app name]</span>
        </span>
      </a>
    </div>
    <div class="fsa-header-app__secondary">
      <span class="fsa-header-app__profile">
        <span class="fsa-header-app__profile-name">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            <span>Brandon Reuben</span>
          </span>
        </span>
        <a href="/link.html" class="fsa-header-app__profile-link">
          <span class="fsa-level fsa-level--inline fsa-level--gutter-xs">
            <svg class="fsa-icon fsa-icon--size-1" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path> </svg>
            <span>Log out</span>
          </span>
        </a>
      </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 prominently display the application abbreviation, application name, and Username.

Don’t Use

UI Component
Global Navigation
Display a global list of sections, topics, or actions.
UI Component
Top Hat
Indicate associated USDA agency and organization.

General Guidance

  • The Application Header should be positioned just below the Top Hat Component when paired together in an FPAC Application.
Return to top