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

Section

Overview

A page's primary container to contain content, components, and layout.

Preview

View Kitchen Sink

Other than background-color variants, they are not strictly visible in the user interface itself. Most page templates likely will use just one fsa-section--[VARIANT], though multiple Section rows may be stacked to distinguish horizontal groups of content.

Section compononent screenshot: Default
Default
Section compononent screenshot: stacked, default
Multiple Variants
Section compononent screenshot: Fullscreen
Default, Fullscreen
Section compononent screenshot: Multiple Variants, Fullscreen
Multiple Variants, Fullscreen

Anatomy

<div class="fsa-section fsa-section[--variant] [fsa-section--fullscreen]">
  <div class="fsa-section__bd">
    content
  </div>
</div>
Default
Multiple Variants Stacked
Class Overview
Key Selector Description
1 fsa-section Acts as the main building block for most layouts. Typically used as direct child of <body>. Variants available for colors and fullscreen.
2 fsa-section__bd Sole child element. Unless modified by fullscreen variant, limits content to a reasonable maximum width.

Variants

View sections.html and boilerplate.html examples to view each in full-page in context.

Default

<div class="fsa-section">
  <div class="fsa-section__bd">
    Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!
  </div>
</div>

Fullscreen

Likely paired with Fullscreen variants of Tophat, Application Header, Global Nav, Topper, Footer, and Screen ID

<div class="fsa-section fsa-section--fullscreen">
  <div class="fsa-section__bd">
    Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur consequuntur quia officiis impedit voluptate neque dolores itaque dolore provident, optio obcaecati deleniti ipsa voluptates ipsam minus cumque rerum fugit officia.
  </div>
</div>

White

<div class="fsa-section fsa-section--white">
  <div class="fsa-section__bd">
    Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!
  </div>
</div>

Dark

<div class="fsa-section fsa-section--dark">
  <div class="fsa-section__bd">
    Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!
  </div>
</div>

Darker

<div class="fsa-section fsa-section--darker">
  <div class="fsa-section__bd">
    Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!
  </div>
</div>
Return to top