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 Farm Production and Conservation

fsa-style 2.7.7

Introduction

Open source HTML/CSS Framework for FPAC’s Design System, setting the bar for cohesive user experiences across USDA Farm Production and Conservation products and services.

Learn about the FPAC Design System
Getting Started
Release History
Boilerplate Template
Explore with CodePen
Figma UI Kit Alpha

This page serves as a “Kitchen Sink” listing of fsa-style. the CSS implementation of the FPAC Design System.

Visual Style

Docs for Visual Style

Color

Docs for Color

Core Palette

  • Primary

    • $color-fsa-primary

  • Secondary

    • $color-fsa-secondary

  • Tertiary

    • $color-fsa-tertiary

Tints and Shades

    • $color-fsa-primary-900
    • $color-fsa-primary
    • $color-fsa-primary-300
    • $color-fsa-primary-200
    • $color-fsa-primary-100
    • $color-fsa-secondary-900
    • $color-fsa-secondary
    • $color-fsa-secondary-300
    • $color-fsa-secondary-200
    • $color-fsa-secondary-100
    • $color-fsa-tertiary-900
    • $color-fsa-tertiary
    • $color-fsa-tertiary-300
    • $color-fsa-tertiary-200
    • $color-fsa-tertiary-100

Accent

  • Aqua

    • $color-fsa-aqua
    • $color-fsa-aqua

  • Red

    • $color-fsa-red

  • Yellow

    • $color-fsa-yellow

Tints and Shades

    • $color-fsa-aqua-900
    • $color-fsa-aqua
    • $color-fsa-aqua-300
    • $color-fsa-aqua-200
    • $color-fsa-aqua-100
    • $color-fsa-red-900
    • $color-fsa-red
    • $color-fsa-red-300
    • $color-fsa-red-200
    • $color-fsa-red-100
    •  
    • $color-fsa-yellow
    • $color-fsa-yellow-300
    • $color-fsa-yellow-200
    • $color-fsa-yellow-100

Base

  • Text

    • $color-fsa-base

  • Link, Default

    • $color-fsa-link

  • Link, Hover

    • $color-fsa-link-hover

  • Site Background (Base)

    • $color-fsa-base-bg

Typography

Docs for Typography

Typefaces

Source Sans Pro, Regular (Default)

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

!@#$%^&*()-_=+[]{}|;:'><,./?

Source Sans Pro, Light

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

!@#$%^&*()-_=+[]{}|;:'><,./?

Source Sans Pro, Bold

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

!@#$%^&*()-_=+[]{}|;:'><,./?

Typefaces, Fallback

Should the Web Font, Source Sans Pro, fail to load for any reason.

Helvetica

Aa

abcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

1234567890

!@#$%^&*()-_=+[]{}|;:'><,./?

Typographic Scale

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Headers

<h1> - <h6>

h1 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

h2 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

h3 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

h4 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

h5 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

h6 header

Lorem ipsum dolor bold text dignissim brevitas italicized text vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Incassum mos luptatum acsi jugis iusto vel.

Intro Text

class="fsa-text--lead"

Lorem ipsum dolor bold text dignissim brevitas vindico nisl. Inline link olim aliquip tego ideo, iustum validus regula. Enim conventio praesent, duis hendrerit consequat ingenium neque et saepius suscipere velit. Ideo enim mara facilisis ad, validus abluo eligo odio.

Text Elements

The a element and external a element

The abbr element and an abbr element with title examples

The b element example, though you probably want to use strong

The cite element example

The code element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example, though you probably want to use em

The ins element example

The kbd example, e.g. Press Ctl + P to print

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example

Size and Space

Docs for Size and Space

  • Base

    • .4rem (4px)
    • $size-base

  • Small

    • .8rem (8px)
    • $size-small

  • Default

    • 1.2rem (12px)
    • $size-default

  • Medium

    • 2.4rem (24px)
    • $size-medium

  • Large

    • 3.6rem (36px)
    • $size-large

  • Extra-large

    • 4.8rem (48px)
    • $size-extra-large

Shadows

Docs for Size and Space

Types

Sass
$shadow-size-popout
CSS
box-shadow:
  0 1.2rem 1.2rem -1.2rem rgba(73, 68, 64, .15),
  0 2.4rem 3.6rem   .4rem rgba(73, 68, 64, .15),
  0  .8rem 4.8rem   .8rem rgba(73, 68, 64, .15)
;
Sass
$shadow-size-overlay
CSS
box-shadow:
  0 .4rem  .4rem -.4rem rgba(73, 68, 64, .15),
  0 .8rem 1.2rem  .2rem rgba(73, 68, 64, .15),
  0 .4rem 1.2rem  .2rem rgba(73, 68, 64, .15)
;
Sass
$shadow-size-raised
CSS
box-shadow:
  0 .2rem  .4rem -.4rem rgba(73, 68, 64, .15),
  0 .4rem  .4rem  0     rgba(73, 68, 64, .15),
  0 .2rem 1.2rem  0     rgba(73, 68, 64, .15)
;

Elevation

Visualization of Shadows' elevation

Components

Docs for Components

Icons

Docs for Icons

Default

class="fsa-icon"

Sizes

class="fsa-icon--[size]", where [size] is one of 0, 1, 2, 3, 4, or 5.

Custom Size

<svg style="--custom-icon-size: 5.2rem;" class="fsa-icon fsa-icon--custom"...>...</svg>.

Color

Combine with Color Utilities such as Text Color and Background Color.

Example: within buttons

Most Common

This is a limited set of some commonly used icons. Search for more on the Design System Documentation page for Icons. Alternately, all available icons available as SVGs from /img/material-design-icons/ of the fsa-style dependency or downloadable ZIP.

accessibility_new
account_box
account_circle
add
add_cirle
alarm
announcement
arrow_back
arrow_downward
arrow_drop_down
arrow_drop_up
arrow_left
arrow_right
arrow_forward
arrow_upward
attach_file
attach_money
autorenew
bookmark
build
calendar_today
cancel
chat
check
check_circle
close
closed_caption
closed_caption_off
cloud
code
comment
contact_page
content_copy
coronavirus
credit_card
delete
do_not_disturb
drag_handle
edit
error
event
expand_less
expand_more
fast_forward
fast_rewind
favorite
favorite_border
file_download
file_present
file_upload
filter_alt
filter_list
first_page
flag
folder
folder_open
format_quote
format_size
forum
github
grid_view
group_add
groups
hearing
help
highlight_off
history
home
identification
image
info
insights
keyboard
label
language
last_page
launch
layers
link
link_off
list
local_cafe
local_gas_station
local_grocery_store
location_on
lock
lock_open
loop
mail
menu
more_horiz
more_vert
my_location
navigate_before
navigate_next
navigate_far_before
navigate_far_next
near_me
notifications
notifications_active
notifications_none
notifications_off
people
person
phone
photo_camera
print
priority_high
push_pin
remove
remove_circle
report
rss_feed
save_alt
schedule
search
security
send
settings
share
shield
sort_arrow
spellcheck
star
star_half
star_outline
text_fields
thumb_down
thumb_up
timer
trending_down
trending_up
undo
unfold_less
unfold_more
update
upload_file
verified_user
visibility
visibility_off
volume_off
warning
wifi
work
zoom_in
zoom_out_map
zoom_out

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-icon--[size]]@[breakpoint], where breakpoint is one of s, m, l, or xl

Buttons

Docs for Buttons

class="fsa-btn fsa-btn--[modifier]"

Primary (default)

Secondary

Tertiary

Flat

Inline (default)

Fill

Plain (reset)

Small

Medium (default)

Large

Disabled

Example: with icon

HTML Elements

<button>
Trigger an action or behavior.
<a>
Navigate between destinations.
<a> <a>

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-btn--[property]@[breakpoint], where property is one of small, medium, large, fill, or inline; and breakpoint is one of s, m, l, or xl

Button Group

Docs for Button Group

span class="fsa-btn-group"

Small

Medium (default)

Large

Active Selection

Disabled (all)

Disabled (some)

Inline (default)

Fill

Example: With Icons

HTML Elements

<button> Trigger an action or behavior.
<a> Navigate between destinations.
<a> <a> <a>

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-btn-group--[property]@[breakpoint], where property is one of small, medium, large, fill, or inline; and breakpoint is one of s, m, l, or xl

Checkbox

Docs for Checkbox

<span>
  <input class="fsa-checkbox" type="checkbox" id="foo">
  <label for="foo">[label]</label>
</span>

Solo (label hidden or elsewhere)

<input class="fsa-checkbox fsa-checkbox--solo" ... >

Date Picker

Docs for Date Picker

Default

Example 05/14/1975

Fill

Example 05/14/1975

Disabled

Example 05/14/1975

Disable Weekends

Example 07/04/2019

Upper and Lower Dates

Example 06/06/2019

Static Calendar Location

Example 05/14/1975

Disabled Static Calendar Location

Example 05/14/1975

Calendar with Status Bar

Example 05/14/1975

Form Field

Docs for Form Field

class="fsa-field"

This is how people can contact you
Price of Wheat per bushel
Example 05/14/1975
Where does your loyalty lie?
Lorem ipsum dolor
Accepted file types: PNG, JPG, GIF
Accepted file types: PNG, JPG, GIF
90
Where does your loyalty lie?

Error States

This is how people can contact you Helpful error message
Price of Wheat per bushel
Instructional message here
State is required

Columns

fsa-field fsa-field--fill fsa-field--columns

Use Grids to lay out form fields, including responsively, for example these are stacked until the Small breakpoint:

Helpful error message

Radio and Checkbox

At least one should be selected

Radio

Docs for Radio

<span>
  <input class="fsa-radio" type="radio" id="bar">
  <label for="bar">[label]</label>
</span>

Solo (label hidden or elsewhere)

<input class="fsa-radio fsa-radio--solo" ... >

Search

Docs for Search

Default

with Icon

with Select

Default, with Label

with Icon, with Label

with Select, with Label

Small

with Icon

with Select

Large

with Icon

with Select

View in context of Header: Nav Global component.

Select

Docs for Select - Default

Default

class="fsa-select"

Default

Disabled

Read only

Small

class="fsa-select fsa-select--small"

Default

Disabled

Read only

Large

class="fsa-select fsa-select--large"

Default

Disabled

Read only

Fill

class="fsa-select fsa-select--fill"

Error

class="fsa-select fsa-select--error"

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-select--[property]@[breakpoint], where property is one of small, medium, large, fill, or inline, and breakpoint is one of s, m, l, or xl

Select Multi

Docs for Select Multi

Default

class="fsa-select-multi"

Grouped

  • First Group
  • Second Group
  • Third Group

Select All

class="fsa-select-multi"

Disabled

class="fsa-select-multi fsa-select-multi--disabled"

Error

class="fsa-select-multi fsa-select-multi--error"

Slider

Docs for Slider

class="fsa-slider fsa-slider--fill", aka input[type="range"]

Standalone

Fill

Disabled

Vertical

Vertical, custom height

Example: with output

90

Example: Fill, with output

90

Examples: Within fsa-field

90
90

Spinbox

Docs for Spinbox

Default

Align Right

Small

Large

Inline

step="5"

step="100" min="-400" max="500"

step=".01"

step="5000"

Prefix, Text

Suffix, Text

Prefix and Suffix, Icon

Error

Error: Suffix/Prefix

Disabled

Switch

Docs for Switch

class="fsa-switch"

Default

Checked

Indeterminate

Disabled

Example

<label> elsewhere in DOM, combined with Box, Level, Border Width, Border Between, and Padding.

Stepped Control

Docs for Stepped Control

class="fsa-stepped-control fsa-stepped-control--[variant]"

Default

Default, with Status Message

5 of 10 Commodities are complete

Default, with multiple secondary

Directional

Directional, with multiple actions

Directional, with Status Message

5 of 10 Commodities are complete

Directional, with Status Message and multiple actions

5 of 10 Commodities are complete

Sticky + Default

This <div class="DEMO-STICKY-STEPPED-CONTROL"> container provides the boundary by which the fsa-stepped-control--sticky variant determines when to stick.

Consectetur sit dolorum iste doloribus laudantium eaque itaque unde ipsa. Tempora non accusamus nihil aut, perferendis nesciunt earum dolor laborum necessitatibus reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

Sticky + Default, with Status Message

This <div class="DEMO-STICKY-STEPPED-CONTROL"> container provides the boundary by which the fsa-stepped-control--sticky variant determines when to stick.

Consectetur sit dolorum iste doloribus laudantium eaque itaque unde ipsa. Tempora non accusamus nihil aut, perferendis nesciunt earum dolor laborum necessitatibus reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

5 of 10 Commodities are complete

Sticky + Directional

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

Reprehenderit inv omnis saepe quam assumenda iste eum cum magnamentore eos explicabo fugiat excepturi dolorum, natus deleniti? Hic magni facilis.

Quia quos cupiditate quae sed earum doloribus voluptatum praesentium! Quae sapiente ea quia veniam, cumque, beatae animi commodi, molestias, temporibus rerum harum.

Sticky + Directional, with Status Message

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio dolores, unde aperiam, nemo harum sed repellendus veniam voluptas cupiditate porro facilis voluptates ipsam, sapiente illum odit possimus debitis est. Necessitatibus.

Ducimus architecto ipsa iusto aliquid deserunt commodi dolore, magnam cumque dolorum modi placeat nulla ea veniam suscipit, dolorem voluptas consequuntur repellendus non.

5 of 10 Commodities are complete

Within Modal

Examples:

Responsive

Text Input

Docs for Text Input

Its most common usage is as a nested component of the Form Fields component.

Default

class="fsa-input"

Small

class="fsa-input fsa-input--small"

Large

class="fsa-input fsa-input--large"

Fill

class="fsa-input fsa-input--fill"

Prefix: Text

Prefix: Icon

Suffix: Text

Error

class="fsa-input fsa-input--error"

Custom Width

Though rarely necessary, the width of .fsa-input can be overridden by using the size attribute, which specifies the width of the input in characters. From a display perspective, one character is equivalent to 1em (approximately 17px with fsa-style's typography system).

Examples

<input class="fsa-input" size="[#]" .... >

size="2"
size="14"
size="55"

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-select--[property]@[breakpoint], where property is one of small, medium, large, fill, or inline; and breakpoint is one of s, m, l, or xl

Textarea

Docs for Textarea

Default

class="fsa-textarea"

Small

class="fsa-textarea fsa-textarea--small"

Large

class="fsa-textarea fsa-textarea--large"

Disabled

class="fsa-textarea" disabled=""

Readonly

class="fsa-textarea" readonly=""

Error

class="fsa-textarea fsa-textarea--error"

Positive

class="fsa-textarea fsa-textarea--positive"

Option: height flexibility

class="fsa-textarea" rows="[#]"

.fsa-textarea has a default minimum height (approximately 5 rows), modifiable via the rows attribute. For example, this one is rows="9"

Responsive

Selectively override several style properties at each Media Query breakpoint.

fsa-textarea--[property]@[breakpoint], where property is one of small, medium, or large, and breakpoint is one of s, m, l, or xl

Badges

Docs for Badges

class="fsa-badge fsa-badge--[type] fsa-badge--[size]"

Small

1 8 11 11 22 99+

Large

1 11 11 22 99+

Extra Large

1 11 11 22 99+

Badge styles can be applied to nearly any HTML element, most likely <span> as shown above. Actionable examples seen below (<a> and <button>).

A

Growl Notifications

Docs for Growl Notifications

class="fsa-growl fsa-growl--[variant]"

Inline Alerts

Docs for Inline Alerts

class="fsa-alert fsa-alert--[type]"

Default

No icon

Dismissable option

Labels

Docs for Labels

class="fsa-label fsa-label--[type] fsa-label--[size]"

Variants

Label Lorem ipsum Lorem ipsum Lorem ipsum Label Label

Large

Label Lorem Lorem ipsum Lorem ipsum Label Label

Extra Large

Label Lorem Lorem ipsum Lorem ipsum Label Label

Dismissable

Label Label Label

HTML Elements

Label styles can be applied to nearly any HTML element, most likely <span> as shown above. Actionable examples seen below (<a> and <button>).

Anchor

Modal

Docs for Modal

class="fsa-modal fsa-modal--[size]"

Responsive

Progress

Docs for Progress

class="fsa-progress"

Indeterminate, with label

Processing Claims
About 10 min

Indeterminate, hidden label

Page loading

Determinate, with label/value

Soft Red Winter Wheat
0%

Determinate, hidden label

Downloading Terminal Adjustments
0%

Determinate, manual demo

Uploading LDP
10%

Determinate, example

Processing Commodities
4 of 10

Paired with Select, inline

Loading tracts

Paired with Select, Fill

Loading counties

Paired with Input, inline

Calculating age

Paired with Input, Fill

Loading counties

Paired with Modal

Paired with Growl Notification, modal-based

Paired with Growl Notification, default

Paired with Table

Loading Commodities
Oats $/Bushel 1.43 2.97 1.92 0.00
Barley $/Bushel 1.75 3.30 2.60 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00

Paired with Box

Processing claims
Ipsum magni blanditiis inve labore hic atque expedita voluptate fuga!

Paired with header

Splash

Docs for splash

class="fsa-splash"

Breadcrumb

Docs for Breadcrumb

class="fsa-breadcrumb"

Multiple Crumbs

One Crumb

Buttons

Each link, class="fsa-breadcrumb__link", may occasionally be a button element.

With icons

Content Tabs

Docs for Content Tabs

Default

(Optional aside)

Light Background

Contrast Background

Small

Large (on desktop)

Justified (on desktop)

Justified Equal (on desktop)

Buttons

Each tab, class="fsa-content-tabs__label", may occasionally be a <button> element.

Example: with Icons

Responsive

Pagination

Docs for Pagination

class="fsa-pagination"

First

Internal

Last

Fewer than 6 pages

6 or more pages

HTML Elements

Actionable steps in Pagination will likely be <a> or <button>. Choose the appropriate semantic element. Above examples are <a>, below are <button> elements.

Responsive

Stepped Tabs

Docs for Stepped Tabs

class="fsa-stepped-tabs fsa-stepped-tabs--[variant]"

NOTE: This component is suppressed on extremely narrow devices, i.e. <320px

Default

Buttons

Actionable steps can be <a> or <button>, depending on how your system is set up.

Actionable: none

  1. Lor
  2. Em ipsum
  3. Dol
  4. Or Sit Amet

Actionable: all

Sample: with Icons

Samples

Lists

Docs for Lists

Bullet (Default)

<ul>

  • List item one
  • List item two
  • List item three

Bullet (Override / Explicit)

class="fsa-list--bullet"

  • List item one
  • List item two
  • List item three

Unstyled

class="fsa-list--unstyled"

  • List item one
  • List item two
  • List item three

Number (Default)

<ol>

  1. List item one
  2. List item two
  3. List item three

Number (Override / Explicit)

class="fsa-list--number"

  1. List item one
  2. List item two
  3. List item three

Inline

class="fsa-list--inline"

  • List item one
  • List item two
  • List item three

Definition

<dl>

Definition List Title
This is a definition list division.
Inkscape
Open Source vector graphics editor
SVG
Scalable Vector Graphics
W3C standard
GIMP
GNU Image Manipulation Program
Drupal
Content Management System

Type

type="a"
  1. List item one
  2. List item two
  3. List item three
type="A"
  1. List item one
  2. List item two
  3. List item three
type="i"
  1. List item one
  2. List item two
  3. List item three
type="I"
  1. List item one
  2. List item two
  3. List item three

Responsive

Selectively apply List styles at any Media Query breakpoint.

class="fsa-list--[variant]@[breakpoint]" breakpoint is one of s, m, l, or xl

Tables

Docs for Tables

Default

class="fsa-table"

[Table caption]
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Declaration of Sentiments Written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863

[Table caption as an <h2>]
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00

Borderless

class="fsa-table fsa-table--borderless"

Document Title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments MadeWritten during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Oats $/Bushel 1.43 2.97 1.92 0.00
Barley $/Bushel 1.75 3.30 2.60 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00

Vertical Align: Middle

class="fsa-table fsa-table--valign-middle"

Lorem ipsum dolor sit amet consec tetur Lorem Ipsum Dolor Sitaw Ametg Conse Adipi Accus Omnisi Aliqum Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi

Vertical Align: Bottom

class="fsa-table fsa-table--valign-middle"

Lorem ipsum dolor sit amet consec tetur Lorem Ipsum Dolor Sitaw Ametg Conse Adipi Accus Omnisi Aliqum Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio volupt atibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi
Lorem ipsum dolor sit amet consec tetur 1 2 3 4 5 6 7 8 9 10 Rerum odio voluptatibus eligendi

Scrollable

Wrapping a table with a fsa-table-container--scroll automatically provides a scrollable region for content exceeding its bounds.

<div class="fsa-table-container--scroll">
  <table>...</table>
</div>

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate [col] [col] [col] [col] [col] [col] [col] [col] [col]
Barley $/Bushel 3.30 2.60 1.75 3.30 2.60 0.00 1.75 0.00 3.30 2.60 0.00 1.75 0.00
Canola $/Cwt. 8.94 8.94 15.89 0.00 15.89 8.94 8.94 15.89 0.00 15.89 15.99 15.99 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00 10.13 15.90 15.90 0.00 0.00 10.13 15.90 14.62 14.62
Oats $/Bushel 1.92 1.43 2.97 0.00 0.00 1.92 1.43 2.97 0.00 0.00 1.43 2.97 1.92
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00 2.42 4.49 4.19 4.19 0.00 2.42 4.49 4.49 0.00

Scrollable: Custom Height

<div class="fsa-table-container--scroll" style="--custom-table-height: 33vh;"><table>...</table></div>

This example sets a max-height of 33vh (effectively "33% of viewport's height"), forcing a vertical scroll if content exceeds 33vh. Accepts most units, e.g. rem, px, em, etc

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00
Barley $/Bushel 3.30 2.60 1.75 3.30
Canola $/Cwt. 8.94 8.94 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 0.00 0.00
Oats $/Bushel 1.92 1.43 2.97 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.19 4.19 0.00

Plain

<table>

Document title Description Year
Declaration of Independence Statement adopted by the Continental Congress declaring independence from the British Empire. 1776
Bill of Rights The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms. 1791
Declaration of Sentiments Written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens. 1848
Emancipation Proclamation An executive order granting freedom to slaves in designated southern states. 1863
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00

Example: select multiple rows

Inspections
Kansas Cowley 3510 Norm Peterson
Complete
Kansas Johnson 8787 Carla Tortelli
Assigned
Missouri Jackson 8080 Ernie Pantusso
Rejected
California Ventura 5644 not assigned
Not Started
California Los Angeles 6662 Diane Chambers
In Progress
California San Bernardino 6664 not assigned
On Hold
Kansas Miami 7510 Woody Boyd
Complete
Maryland Anne Arundel 1325 Woody Boyd
In Progress
Oregon Clackamas 1196 not assigned
Not Started

Example: select a row

Caption that is hidden visually, but read by screenreader
Commodity Loan Rate 30-Day Period PCP Alternative PCP Effective LDP Rate
Barley $/Bushel 1.75 3.30 2.60 0.00
Canola $/Cwt. 8.94 15.99 15.89 0.00
Flaxseed $/Cwt. 10.13 15.90 14.62 0.00
Oats $/Bushel 1.43 2.97 1.92 0.00
Wheat - Soft Red Winter $/Bushel 2.42 4.49 4.19 0.00

Sticky Header

<th class="fsa-table__th--sticky">...</th>

top header cell top header cell top header cell top header cell top header cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell

Sticky Footer

class="fsa-table__th--sticky-foot"

Terminal Markets: Commodities
Market HRW HRS SRW WHI HAD YC BRL OAT YSB SOR
Average 4.22 5.60 3.98 4.54 7.24 3.63 3.29 3.08 9.67 6.16
AMA 3.22 3.64
AMA 3.22 3.64
CIN 3.90 3.42 9.62 6.00
EVN 4.05
GLF 4.67 4.65 3.88 3.44 10.12 6.92
KCM 4.33 3.35 3.14 3.05 9.43
LOS 7.11
MEM 3.91 3.59 9.79 5.69
MIN 4.27 5.73 7.35 2.99 2.85 2.79 8.98 5.69
NCD 5.48 5.25
PNW 4.92 4.81 7.35 4.31 3.19 3.37 10.61
SCD 5.33
TOL 4.06 4.06 3.34 9.36
TKO 3.62 9.48
WCD 4.93 4.76 7.15 4.46 3.94 8.28

Responsive Tables

Timeline

Docs for Timeline

<div class="fsa-timeline">
  <div class="fsa-timeline__item fsa-timeline__item--[variant]">
    <div class="fsa-timeline__icon"><svg>...</svg></div>
    <div class="fsa-timeline__hd">...</div>
    <div class="fsa-timeline__bd">...</div>
  </div>
</div>

Combined Example

Submitted on
Jane Doe Approved request on
Jane Doe commented on
The inspection request identifies this site enrolled in three Land Use programs. While technically possible, it is quite rare and needs to be verified.
Jane Doe Assigned to Todd Stanley on
Todd Stanley commented on
On my way to the site now.
Todd Stanley changed the status to In Progress on
SPAR Bot closed 8 sub-tasks, 99+ remain open
Jane Doe changed the Due Date to on
Jane Doe commented on
This Inspection remains on hold as operator has been using the last two months to address soil pH level.
Jane Doe Rejected this Inspection Request on

Combined Example, with icons

Submitted on
Jane Doe Approved request on
Jane Doe commented on
The inspection request identifies this site enrolled in three Land Use programs. While technically possible, it is quite rare and needs to be verified.
Jane Doe Assigned to Todd Stanley on
Todd Stanley commented on
On my way to the site now.
Todd Stanley changed the status to In Progress on
SPAR Bot closed 8 sub-tasks, 99+ remain open
Jane Doe changed the Due Date to on
Jane Doe commented on
This Inspection remains on hold as operator has been using the last two months to address soil pH level.
Jane Doe Rejected this Inspection Request on

fsa-timeline__item--system, without icon

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

fsa-timeline__item--system, with icon

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

fsa-timeline__item--user

Jane Doe commented on
At voluptatibus reiciendis voluptatum molestiae vel magni utem veritatis quas commodi repellendus laborum illo nesciunt odit vitae nisi eius. Gemino quis obcaecati ut hic minus aut, eius maxime perspiciatis, distinctio facilis excepturi. Deserunt, aliquid tenetur. Atque, culpa. Quos, magni!

fsa-timeline__item--editing

fsa-timeline__item--add-comment

Header: Top Hat

Docs for Header: Top Hat

class="fsa-tophat"

USDA United States Department of Agriculture
Farm Production and Conservation

class="fsa-tophat fsa-tophat--fullscreen"

USDA United States Department of Agriculture
Farm Production and Conservation

Example: Color Variant

Customize using Color Utilities.

USDA United States Department of Agriculture
Farm Production and Conservation

Responsive

Header: Application

Docs for Header: App

class="fsa-header-app"

Default

Fullscreen

Example

Example: Long

Example: Color Variant

Customize using Color Utilities.

Responsive

Header: Global Navigation

Docs for Header: Nav Global

class="fsa-nav-global"

Default

Fullscreen

Example: With Optional Aside

Example: With Search

Example: sub-menus

(Optional aside)

State: expanded, single list

State: expanded, single list, multi-column

State: expanded, grouped lists

Example: with Icons

Responsive

Footer: Topper

Docs for Footer: Topper

class="fsa-topper"

class="fsa-topper fsa-topper--fullscreen"

Footer: Global Footer

Docs for Footer: Global Footer

Responsive

Footer: Screen ID

Docs for Footer: Screen ID

class="fsa-screen-id"

Screen ID
XYZ-WEB-007

class="fsa-screen-id fsa-screen-id--fullscreen"

Screen ID
XYZ-WEB-007

Layout

Docs for Visual Style

Box

Docs for Box

class="fsa-box"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

Responsive

Selectively apply to an element at each Media Query breakpoint via class="fsa-box@[breakpoint]", where breakpoint is one of s, m, l, or xl

Modifiers

While some of these modifiers are specific to .fsa-box, CSS Utilities and Helpers (e.g. Padding, Background Color, etc.) can be combined for further flexibility.

class="fsa-box fsa-box--bg-0"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bg-1"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bg-2"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bg-3"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-p--s fsa-box--bw-0 fsa-box--bw-0 fsa-bg--tertiary-300 fsa-color--tertiary-100"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bw-0"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bw-1"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bw-2"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--bw-3"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--br-0"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--br-1"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--br-2"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-box--br-3"

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

Responsive Modifiers

Selectively override several style properties of .fsa-box at each Media Query breakpoint via class="fsa-box[property]@[breakpoint]", where property is one of bg, bw, or br, and where breakpoint is one of s, m, l, or xl

Example: paired with CSS Utilities

Combine with Border Width, Border Color, and Padding.

Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.

class="fsa-box fsa-border--tertiary fsa-p--xs fsa-border--s"

Combine with Level, Border Width, Border Between, and Padding.

Lorem ipsum
Dolor sit amet consectetur adipisicing
Elit deleniti sint
Quos

class="fsa-box fsa-p--none fsa-border--xxs fsa-level fsa-level--even fsa-level--align-stretch fsa-border-between-vertical--xxs"

Combine with Icons, Border Width, Border Between, Border Radius, Border Color, and Padding.

Organizations 3 Repositories 23 Issues 345 Milestones 16 Projects 9

class="fsa-border--xxs fsa-bg--white fsa-m-b--m fsa-border-between-horizontal--xxs fsa-radius--s fsa-link--underline-none fsa-link--tertiary"

Divider

Docs for Divider

Default

Strong

Stronger

Example

With variety of Margin Utilities.

Raw separation of text

Lorem ipsum dolor sit amet
ElitLabore alias optio nisi
Voluptate iure officiis ill
Accusantium quam aspernatur
Minima alias ratione fugit

Grid System

Docs for Grid

A 12-column, responsive grid provides structure for website content.

Grid Column Sizes

Available columns that can be appended to the fsa-grid__[size] selector, where size is one of the unit fractions listed below. For example, the selector for 50% width can be fsa-grid__1/2 or fsa-grid__6/12.

1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
shrink
grow
1/6
2/12
1/4
3/12
5/12
1/2
6/12
7/12
2/3
8/12
3/4
9/12
5/6
10/12
11/12
12/12
1
1/1
Example: 1/2, 1/2
fsa-grid__1/2
fsa-grid__1/2
Example: 1/3, 1/3, 1/3
fsa-grid__1/3
fsa-grid__1/3
fsa-grid__1/3
Example: 1/4, 1/4, 1/2 - no gutter
fsa-grid__1/4
fsa-grid__1/4
fsa-grid__1/2
Example: Nested: 3/4 (1/2, 1/2; 1/3, 1/3, 1/3), 1/4
Column 2
fsa-grid__3/4
fsa-grid__1/2
fsa-grid__1/2
fsa-grid__1/3
fsa-grid__1/3
fsa-grid__1/3
Column 2
fsa-grid__1/4
Example: Grow (auto-width to remainder of container)
fsa-grid__grow
fsa-grid__1/2
fsa-grid__grow
Example: Shrink (auto-width to column's content)
fsa-grid__shrink
fsa-grid__1/2
fsa-grid__shrink with a reallyreallyreallyreallyreallylongword

Responsive Columns

Grid columns can be adjusted per media query breakpoint.

Level

Docs for Level
<el class="fsa-level [fsa-level[--modifiers]]">
  <el [class="fsa-level__item[--modifiers]"]>item</el>
  <el [class="fsa-level__item[--modifiers]"]>item</el>
</el>

Level Container

<el class="fsa-level [fsa-level[--modifiers]]...
Display
Default
item 1
long item
item
item
longest item
item 1
long item
item
item
longest item
--inline
Text
item 1
item 2
item
longest item
text
--full (default)
item 1
long item
item
item
longest item
--none (override)
item 1
long item
item
item
longest item
Wrap
--wrap
item 1
long item
item
item with a lot of stuff
item
item with a lot of stuff
item
long item
item
item with a lot of stuff
item
long item
item
item
long item
item
item
--no-wrap (default)
item 1
long item
item
item with a lot of stuff
item
item with a lot of stuff
item
long item
item
item with a lot of stuff
item
long item
item
item
Vertical Alignment
--align-top
item 1
long item
item
item
longest item
--align-middle (default)
item 1
long item
item
item
longest item
--align-bottom
item 1
long item
item
item
longest item
--align-baseline
item 1 long item item
--align-stretch
item 1
long item
item
item
longest item
Horizontal Alignment
--justify-left (default)
item
long item
longest item
--justify-center
item
long item
longest item
--justify-right
item
long item
longest item
--justify-between
item
long item
longest item
first item
second item
--justify-around
item
long item
longest item
first item
second item
Grow
--grow-auto
item
slightly longer item
item
item
item
slightly longer item
--grow-even
item
slightly longer item
item
slightly longer item
item
slightly longer item
--grow-none (default)
item
slightly longer item
item
Gutters
--gutter-none
a
b
c
--gutter-xxs
a
b
c
--gutter-xs
a
b
c
--gutter-s (default)
a
b
c
--gutter-m
a
b
c
--gutter-l
a
b
c
--gutter-xl
a
b
c

Level Items

<el [class="fsa-level__item[--modifiers]"]>...
Grow / Shrink
--grow-auto
item
grow-auto lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem fugit iure officiis, culpa quis magni distinctio beatae cumque sit earum id vero eius.
item
grow-auto lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem.
item
grow-auto lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem fugit iure officiis, culpa quis magni distinctio beatae cumque sit earum id vero eius.
--grow-even
item
grow-even lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem fugit iure officiis, culpa quis magni distinctio beatae cumque sit earum id vero eius.
item
grow-even lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem.
item
grow-even lorem ipsum ugiat voluptatibus dolores eos fuga numquam rerum autem fugit iure officiis, culpa quis magni distinctio beatae cumque sit earum id vero eius.
--grow-none
Fugiat nulla hic rerum aliquid! nimi laudantium in repellat vero cumque ducimus nesciunt rerum exercitationem, explicabo quaerat adipisci, dolorem, sit voluptatum enim.
grow-none lorem ipsum.
Dicta necessitatibus iure labore ex ullam molestiae similique quaerat mollitia officia, nihil laudantium, pariatur incidunt iusto autem nisi at. Quae, error consequatur.
--shrink-none
Fugiat nulla hic rerum aliquid! nimi laudantium in repellat vero cumque ducimus nesciunt rerum exercitationem, explicabo quaerat adipisci, dolorem, sit voluptatum enim.
shrink-none lorem ipsum.
Dicta necessitatibus iure labore ex ullam molestiae similique quaerat mollitia officia, nihil laudantium, pariatur incidunt iusto autem nisi at. Quae, error consequatur.
Vertical Alignment
--align-top
top
item
item
--align-middle (default)
middle
item
item
--align-bottom
bottom
item
item
--align-stretch
stretch
item
item

Responsive

All Level Container and Level Item modifiers can be selectively used per media query breakpoint.

Media Object

Docs for Media Object

Deprecated

fsa-media has been deprecated in favor of the fsa-level layout component. For example, below is an implementation of Media using Level:

Lorem ipsum sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Deprecated Variants

class="fsa-media"

Lorem ipsum sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

class="fsa-media fsa-media--right"

Sunt in culpa qui officia deserunt mollit anim id est laborum nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

class="fsa-media fsa-media--middle"

Sunt in culpa qui officia dnisi ut aqesnoc odommoc ae xe piuqiluat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Suuqila tu isind aiciffo iuq apluc ni tnip ex ea commodo consequat. Duis autxe piuqila tu isind aiciffo iuq apluc ni te voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

class="fsa-media fsa-media--bottom"

Sunt in culpa qui officia dnisi ut aqesnoc odommoc ae xe piuqiluat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Suuqila tu isind aiciffo iuq apluc ni tnip ex ea commodo consequat. Duis autxe piuqila tu isind aiciffo iuq apluc ni te voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.

Nesting

Lorem ipsum sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Lorem ipsum sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Lorem ipsum sed do eiusmod tempor incididunt dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Section

Docs for Section

View sections example in context.

Default

class="fsa-section"

Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!

Fullscreen

class="fsa-section fsa-section--fullscreen"

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.

White

class="fsa-section fsa-section--white"

Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!

Dark

class="fsa-section fsa-section--dark"

Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!

Darker

class="fsa-section fsa-section--darker"

Aspernatur voluptatem similique quidem odit laudantium pariatur modi illum officiis recusandae! Dolores odio dicta repellat similique numquam officiis repudiandae corrupti exercitationem consequatur!

Utilities

Docs for Utilities

Border Width

Docs for Border Width

All

none
xxs
xs
s
m
l
custom

Top

none
xxs
xs
s
m
l
custom

Right

none
xxs
xs
s
m
l
custom

Bottom

none
xxs
xs
s
m
custom
custom

Left

none
xxs
xs
s
m
custom
custom

Responsive

Selectively apply Border Width at any Media Query breakpoint.

class="fsa-border--[variant]@[breakpoint]" breakpoint is one of s, m, l, or xl

Border Color

Docs for Border Color

Core

fsa-border--primary-900
fsa-border--primary
fsa-border--primary-300
fsa-border--primary-200
fsa-border--primary-100
fsa-border--secondary-900
fsa-border--secondary
fsa-border--secondary-300
fsa-border--secondary-200
fsa-border--secondary-100
fsa-border--tertiary-900
fsa-border--tertiary
fsa-border--tertiary-300
fsa-border--tertiary-200
fsa-border--tertiary-100

Accent

fsa-border--aqua-900
fsa-border--aqua
fsa-border--aqua-300
fsa-border--aqua-200
fsa-border--aqua-100
fsa-border--red-900
fsa-border--red
fsa-border--red-300
fsa-border--red-200
fsa-border--red-100
 
fsa-border--yellow
fsa-border--yellow-300
fsa-border--yellow-200
fsa-border--yellow-100

Other

fsa-border--black
fsa-border--white
fsa-border--transparent

Hover: Core

fsa-border:hover--primary-900
fsa-border:hover--primary
fsa-border:hover--primary-300
fsa-border:hover--primary-200
fsa-border:hover--primary-100
fsa-border:hover--secondary-900
fsa-border:hover--secondary
fsa-border:hover--secondary-300
fsa-border:hover--secondary-200
fsa-border:hover--secondary-100
fsa-border:hover--tertiary-900
fsa-border:hover--tertiary
fsa-border:hover--tertiary-300
fsa-border:hover--tertiary-200
fsa-border:hover--tertiary-100

Hover: Accent

fsa-border:hover--aqua-900
fsa-border:hover--aqua
fsa-border:hover--aqua-300
fsa-border:hover--aqua-200
fsa-border:hover--aqua-100
fsa-border:hover--red-900
fsa-border:hover--red
fsa-border:hover--red-300
fsa-border:hover--red-200
fsa-border:hover--red-100
 
fsa-border:hover--yellow
fsa-border:hover--yellow-300
fsa-border:hover--yellow-200
fsa-border:hover--yellow-100

Hover: Other

fsa-border:hover--black
fsa-border:hover--white
fsa-border:hover--transparent

Responsive

Selectively apply Border Colors at any Media Query breakpoint.

class="fsa-border--[color]@[breakpoint]" breakpoint is one of s, m, l, or xl

Border Radius

Docs for Border Radius

None

S

M

L

Full

Oval

Responsive

Selectively apply at any Media Query breakpoint.

class="fsa-radius--[size]@[breakpoint]" where breakpoint is one of s, m, l, or xl

Border Between

Docs Border Between

Vertical

1
2
3

Horizontal

1
2
3

none

1
2
3

xxs

1
2
3

xs

1
2
3

s

1
2
3

m

1
2
3

l

1
2
3

custom

1
2
3

Horizontal

1
2

Example: Vertical, combined with Border Width

1
2
3

Example: Vertical, combined with Border Width

1
2
3

Responsive

Selectively apply at any Media Query breakpoint.

class="fsa-border-between--[width]@[breakpoint]" breakpoint is one of s, m, l, or xl

Border Between Color

Docs for Border Between Color

Core

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

Accent

1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
 
1
2
3
1
2
3
1
2
3
1
2
3

Other

1
2
3
1
2
3
1
2
3

Responsive

Selectively apply Border Colors at any Media Query breakpoint.

class="fsa-border-between-[direction]--[color]@[breakpoint]" breakpoint is one of s, m, l, or xl

Color: Background

Docs for Background Color

Core

fsa-bg--primary-900
fsa-bg--primary
fsa-bg--primary-300
fsa-bg--primary-200
fsa-bg--primary-100
fsa-bg--secondary-900
fsa-bg--secondary
fsa-bg--secondary-300
fsa-bg--secondary-200
fsa-bg--secondary-100
fsa-bg--tertiary-900
fsa-bg--tertiary
fsa-bg--tertiary-300
fsa-bg--tertiary-200
fsa-bg--tertiary-100

Accent

fsa-bg--aqua-900
fsa-bg--aqua
fsa-bg--aqua-300
fsa-bg--aqua-200
fsa-bg--aqua-100
fsa-bg--red-900
fsa-bg--red
fsa-bg--red-300
fsa-bg--red-200
fsa-bg--red-100
 
fsa-bg--yellow
fsa-bg--yellow-300
fsa-bg--yellow-200
fsa-bg--yellow-100

Other

fsa-bg--black
fsa-bg--white
fsa-bg--base
fsa-bg--transparent

Hover: Core

fsa-bg:hover--primary-900
fsa-bg:hover--primary
fsa-bg:hover--primary-300
fsa-bg:hover--primary-200
fsa-bg:hover--primary-100
fsa-bg:hover--secondary-900
fsa-bg:hover--secondary
fsa-bg:hover--secondary-300
fsa-bg:hover--secondary-200
fsa-bg:hover--secondary-100
fsa-bg:hover--tertiary-900
fsa-bg:hover--tertiary
fsa-bg:hover--tertiary-300
fsa-bg:hover--tertiary-200
fsa-bg:hover--tertiary-100

Hover: Accent

fsa-bg:hover--aqua-900
fsa-bg:hover--aqua
fsa-bg:hover--aqua-300
fsa-bg:hover--aqua-200
fsa-bg:hover--aqua-100
fsa-bg:hover--red-900
fsa-bg:hover--red
fsa-bg:hover--red-300
fsa-bg:hover--red-200
fsa-bg:hover--red-100
 
fsa-bg:hover--yellow
fsa-bg:hover--yellow-300
fsa-bg:hover--yellow-200
fsa-bg:hover--yellow-100

Hover: Other

fsa-bg:hover--black
fsa-bg:hover--white
fsa-bg:hover--base
fsa-bg:hover--transparent

Responsive

Selectively apply Background Color at any Media Query breakpoint.

class="fsa-bg[:hover]--[color]@[breakpoint]" breakpoint is one of s, m, l, or xl

Color: Foreground

Docs for Text Color

Core

fsa-color--primary-900
fsa-color--primary
fsa-color--primary-300
fsa-color--primary-200
fsa-color--primary-100
fsa-color--secondary-900
fsa-color--secondary
fsa-color--secondary-300
fsa-color--secondary-200
fsa-color--secondary-100
fsa-color--tertiary-900
fsa-color--tertiary
fsa-color--tertiary-300
fsa-color--tertiary-200
fsa-color--tertiary-100

Accent

fsa-color--aqua-900
fsa-color--aqua
fsa-color--aqua-300
fsa-color--aqua-200
fsa-color--aqua-100
fsa-color--red-900
fsa-color--red
fsa-color--red-300
fsa-color--red-200
fsa-color--red-100
 
fsa-color--yellow
fsa-color--yellow-300
fsa-color--yellow-200
fsa-color--yellow-100

Other

default
fsa-color--black
fsa-color--white

Responsive

Selectively apply Text Colors at any Media Query breakpoint.

class="fsa-color--[color]@[breakpoint]" breakpoint is one of s, m, l, or xl

Color: Text Link

Docs for Link Color

Core

Accent

 

Other

Hover: Core

Hover: Accent

 

Hover: Other

Responsive

Selectively apply Link Colors at any Media Query breakpoint.

class="fsa-link--[color]@[breakpoint]" breakpoint is one of s, m, l, or xl

Ellipsis

Docs for Ellipsis

Default

class="fsa-ellipsis"

Tenetur vel enim numquam officiis dolorem soluta eveniet facere nulla esse maiores assumenda tempora nobis nde sint commodi atque consequuntur veniam nequ ibusdam incidunt accusantium enim a ea laboriosam explicabo obcaecati possimusarchitecto necessitatibus delectus reiciendis laboriosam tempore cumque natus quae ullam nam atque.

Unset

class="fsa-ellipsis--none"

Tenetur vel enim numquam officiis dolorem soluta eveniet facere nulla esse maiores assumenda tempora nobis nde sint commodi atque consequuntur veniam nequ ibusdam incidunt accusantium enim a ea laboriosam explicabo obcaecati possimusarchitecto necessitatibus delectus reiciendis laboriosam tempore cumque natus quae ullam nam atque.

Responsive

Set overflow of block-level elements to Ellipsis at select media query breakpoints.

fsa-ellipsis[--none]@[breakpoint], where breakpoint is one of s, m, l, or xl

Floats

Docs for Floats

Left

class="fsa-float--left"

I'm floating to left

Right

class="fsa-float--right"

I'm floating to right

None

Effectively an override.

class="fsa-float--none"

I'm not floating.

Containing Floats (aka "clearfix")

class="fsa-clearfix"

I'm floating to left

I'm floating to right

The above has been cleared

Clearing Floats

class="fsa-clear"

I'm floating to left

I've been cleared

Responsive

Adjust floating presentation per media query breakpoint.

Font

Docs for Font

Base

Lorem ipsum dolor sit amet.

Sans Regular (Override)

Lorem ipsum dolor sit amet.

Sans Light

Lorem ipsum dolor sit amet.

Sans Bold

Lorem ipsum dolor sit amet.

Monospace

Lorem ipsum dolor sit amet.

Responsive

Selectively apply Font at any Media Query breakpoint.

class="fsa-font--[variant]@[breakpoint]" breakpoint is one of s, m, l, or xl

Link Display

Docs for Link Display

Default (Inline)

Text link

Inline (Override / Explicit)

Text link

Inline-block

Text link

Fill

Text link

Responsive

Selectively apply Link display properties at any Media Query breakpoint.

class="fsa-link--[variant]@[breakpoint]" breakpoint is one of s, m, l, or xl

Link Underline

Docs for Link Underline

Default

Text link

Underline (Override / Explicit)

Text link

No Underline

Text link

Default

Text link

Hover: Underline (Override / Explicit)

Text link

Hover: No Underline

Text link

Responsive

Selectively apply Link underlines at any Media Query breakpoint.

class="fsa-link--[variant]@[breakpoint]" breakpoint is one of s, m, l, or xl

Margins

Docs for Margins

Top

fsa-m-t--none
fsa-m-t--xxs
fsa-m-t--xs
fsa-m-t--s
fsa-m-t--m
fsa-m-t--l
fsa-m-t--xl

Right

fsa-m-r--none
fsa-m-r--xxs
fsa-m-r--xs
fsa-m-r--s
fsa-m-r--m
fsa-m-r--l
fsa-m-r--xl

Bottom

fsa-m-b--none
fsa-m-b--xxs
fsa-m-b--xs
fsa-m-b--s
fsa-m-b--m
fsa-m-b--l
fsa-m-b--xl

Left

fsa-m-l--none
fsa-m-l--xxs
fsa-m-l--xs
fsa-m-l--s
fsa-m-l--m
fsa-m-l--l
fsa-m-l--xl

All

fsa-m--none
fsa-m--xxs
fsa-m--xs
fsa-m--s
fsa-m--m
fsa-m--l
fsa-m--xl

Responsive

Margins can be adjusted per media query breakpoint.

Padding

Docs for Padding

Top

fsa-p-t--none
fsa-p-t--xxs
fsa-p-t--xs
fsa-p-t--s
fsa-p-t--m
fsa-p-t--l
fsa-p-t--xl

Right

fsa-p-r--none
fsa-p-r--xxs
fsa-p-r--xs
fsa-p-r--s
fsa-p-r--m
fsa-p-r--l
fsa-p-r--xl

Bottom

fsa-p-b--none
fsa-p-b--xxs
fsa-p-b--xs
fsa-p-b--s
fsa-p-b--m
fsa-p-b--l
fsa-p-b--xl

Left

fsa-p-l--none
fsa-p-l--xxs
fsa-p-l--xs
fsa-p-l--s
fsa-p-l--m
fsa-p-l--l
fsa-p-l--xl

All

fsa-p--none
fsa-p--xxs
fsa-p--xs
fsa-p--s
fsa-p--m
fsa-p--l
fsa-p--xl

Responsive

Padding can be adjusted per media query breakpoint.

Text Alignment

Docs for Text Alignment

Right

class="fsa-text-align--right"

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Centered

class="fsa-text-align--center"

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Left

class="fsa-text-align--left"

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Responsive

Adjust text alignment per media query breakpoint.

Text Headers

Docs for Text Headers

While h1 – h6 elements have a hierarchical style assigned, sometimes the heading level may vary depending on its context. These CSS Utilities below enable you to maintain the visual hierarchy independent from the structural HTML heading level.

class="fsa-text--h1"

h2 that looks like an h1

class="fsa-text--h2"

h2 that looks like an h2

class="fsa-text--h3"

h2 that looks like an h3

class="fsa-text--h4"

h2 that looks like an h4

class="fsa-text--h5"

h2 that looks like an h5

class="fsa-text--h6"

h2 that looks like an h6

Responsive

Adjust hn element text size per media query breakpoint.

Text Size

Docs for Text Size

class="fsa-text-size--[size]", where size is one of 0 - 7

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Responsive

Text size can be adjusted per media query breakpoint.

class="fsa-text-size--[size]@[breakpoint]", where size is one of 0 - 7, and breakpoint is one of s, m, l, or xl

Screenreader only

Docs for Screenreader only

Visibly hidden though announced to screenreaders within a variety of screen size ranges (i.e. Media Query breakpoints).

Visibly hide at minimum screen size

class="fsa-sr-only@[size]". Visibly hides when viewport is within a specific range, where [size] is one of xs-only, s-only, m-only, l-only, or xl-only.

Shadows

Docs for Shadows

Popout

Overlay

Raised

None

Hover: Popout

Hover: Overlay

Hover: Raised

Hover: None

Responsive

Selectively apply at any Media Query breakpoint.

class="fsa-shadow--[variant]@[breakpoint]" where breakpoint is one of s, m, l, or xl

Visibility

Docs for Visibility

Selectively show or hide elements or blocks at a variety of screen sizes (i.e. Media Query breakpoints).

Show at minimum screen size

class="fsa-show@[size]". Show when at least [size], where [size] is one of s, m, l, or xl.

Show at only specific screen size

class="fsa-show@[size]-only". Show only at [size], where [size] is one of s, m, l, or xl.

Hide at minimum screen size

class="fsa-hide@[size]". Hide when at least [size], where [size] is one of s, m, or l.

Hide at specific screen size

class="fsa-hide@[size]-only". Hide only at [size], where [size] is one of xs, s, m, l, or xl.