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

Topper

Overview

Convenient access to top of the page from the bottom.

Return to top 
<div class="fsa-topper">
    <div class="fsa-topper__bd">
      <a class="fsa-topper__link" href="#main-content">
        <span class="fsa-topper__icon"><svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></svg></span> Return to top
      </a>
    </div>
  </div>

Variants

Fullscreen

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

Return to top 
<div class="fsa-topper fsa-topper--fullscreen">
  <div class="fsa-topper__bd">
    <a class="fsa-topper__link" href="#main-content">
      <span class="fsa-topper__icon"><svg class="fsa-icon fsa-icon--size-2" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></svg></span> Return to top
    </a>
  </div>
</div>

Usage

Use

  • When an Application page is longer and requires.
  • When an Application requires a quick way to return to the top of the page.

Don’t Use

  • As link to another page.
  • For anything other than returning the User to the top of the screen.

Accessibility

Always refer to the Accessibility Text Links Guide for overall guidance.

  • Users must be able to tab to use the Topper component.
  • Users must be able to activate a link when pressing ‘Enter’ on their keyboard.
  • Users must be able to identify the Topper link without relying on color alone.
  • Users must be able to activate hover and focus states with both a mouse and a keyboard.

General Guidance

  • The Topper is generally placed just above the FPAC Application Footer.
  • The Topper component can be used multiple times on a page for extended content, such as an FAQs section.
Return to top