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

Lists

Overview

Structure content into concise semantic sections.

Unordered List (bullet)

Default

  • List item one
  • List item two
  • List item three
<ul>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

Explicit

Effectively a CSS Utility, acting as an override.

  • List item one
  • List item two
  • List item three
<ul class="fsa-list--bullet">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

Example: Nested

  • List item one
  • List item two
    • List item two A
    • List item two B
  • List item three
<ul>
  <li>List item one</li>
  <li>
    List item two
    <ul>
      <li>List item two A</li>
      <li>List item two B</li>
    </ul>
  </li>
  <li>List item three</li>
</ul>

Ordered List (numbered)

Default

  1. List item one
  2. List item two
  3. List item three
<ol>
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

Explicit

Effectively a CSS Utility, acting as an override.

  1. List item one
  2. List item two
  3. List item three
<ol class="fsa-list--number">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

Unstyled

Unordered list

  • List item one
  • List item two
  • List item three
<ul class="fsa-list--unstyled">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

Ordered list

  1. List item one
  2. List item two
  3. List item three
<ol class="fsa-list--unstyled">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ol>

Inline List

  • List item one
  • List item two
  • List item three
<ul class="fsa-list--inline">
  <li>List item one</li>
  <li>List item two</li>
  <li>List item three</li>
</ul>

Definition List

ACA
Accredited Certifying Agent
Authorized to issue an organic certificate to operations that comply with the USDA organic regulations.
ACEP
Agricultural Conservation Easement Program
Provides financial and technical assistance to help conserve agricultural lands and wetlands and their related benefits
ACRE
Average Crop Revenue Election
Offers producers an alternative to the Direct and Counter-Cyclical Program
ADA
Americans with Disabilities Act
Prohibits discrimination against people with disabilities in employment, transportation, public accommodation, communications, and governmental activities
ADAAA
Americans with Disabilities Act Amendments Act
<dl>

  <dt>ACA</dt>
  <dd>Accredited Certifying Agent</dd>
  <dd>Authorized to issue an organic certificate to operations that comply with the USDA organic regulations.</dd>

  <dt>ACEP</dt>
  <dd>Agricultural Conservation Easement Program</dd>
  <dd>Provides financial and technical assistance to help conserve agricultural lands and wetlands and their related benefits</dd>

  <dt>ACRE</dt>
  <dd>Average Crop Revenue Election</dd>
  <dd>Offers producers an alternative to the Direct and Counter-Cyclical Program</dd>

  <dt>ADA</dt>
  <dd>Americans with Disabilities Act</dd>
  <dd>Prohibits discrimination against people with disabilities in employment, transportation, public accommodation, communications, and governmental activities</dd>

  <dt>ADAAA</dt>
  <dd>Americans with Disabilities Act Amendments Act</dd>

</dl>

Type

Where TYPE attribute is one of a, A, i, I, or 1 (default).

  1. List item one
  2. List item two
  3. List item three
  1. List item one
  2. List item two
  3. List item three
  1. List item one
  2. List item two
  3. List item three
  1. List item one
  2. List item two
  3. List item three
<div class="fsa-grid">
  <div class="fsa-grid__1 fsa-grid__1/2@m fsa-grid__1/4@l">
    <ol type="a">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ol>
  </div>
  <div class="fsa-grid__1 fsa-grid__1/2@m fsa-grid__1/4@l">
    <ol type="A">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ol>
  </div>
  <div class="fsa-grid__1 fsa-grid__1/2@m fsa-grid__1/4@l">
    <ol type="i">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ol>
  </div>
  <div class="fsa-grid__1 fsa-grid__1/2@m fsa-grid__1/4@l">
    <ol type="I">
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ol>
  </div>
</div>

Example: Nested

  1. List item one
  2. List item two
    1. List item two a
    2. List item two b
    3. List item two c
  3. List item three
<ol>
  <li>List item one</li>
  <li>
    List item two
    <ol type="a">
      <li>List item two a</li>
      <li>List item two b</li>
      <li>List item two c</li>
    </ol>
  </li>
  <li>List item three</li>
</ol>

Responsive

Selectively apply List styles at any Media Query breakpoint.

class="fsa-list--[VARIANT]@[BREAKPOINT]" where VARIANT is one of bullet, number, inline, or unstyled, and BREAKPOINT is one of s, m, l, or xl.

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

Sass Mixin

Resets <ul> or <ol> elements by stripping all style properties, e.g. bullets, numbers, margins, etc.

// SCSS
.your-custom-list {

  @include reset-ul();

  &__item {
    @include reset-li();
  }

}

<!-- HTML -->
<ul class="your-custom-list">
  <li class="your-custom-list__item">List item one</li>
  <li class="your-custom-list__item">List item two</li>
  <li class="your-custom-list__item">List item three</li>
</ul>
  • List item one
  • List item two
  • List item three
Return to top