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

CSS Utilities

Overview

Single-purpose styles typically mapped to a single CSS property and value (e.g. margin).

Utilities – also known as “trumps,” “helper classes,” or “alterations” – are high-specificity selectors for making very targeted alterations to existing elements or components.

They are most useful when you want to override a default value, in one-off situations, or even to explore design ideas; though be aware that they often use an !important flag in the CSS to ensure the desired alteration is achieved by superceding an element’s default style. This is very deliberate as utility classes are for final adjustments, and should not be overridden by anything that comes before them.

Most include Responsive options, enabling you to make targeted alterations at different screen sizes. e.g. “Small padding on small screens, larger padding on bigger screens.”

Usage

A simple example adjusting a component’s margins. Here’s the default rendering of a second-level header (h2). Note the amount of spacing above the text.

<h2>Second level heading</h2>

Second level heading

…let’s give it a small top margin…

<h2 class="fsa-m-t--s">Second level heading</h2>

Second level heading

…or perhaps remove the top margin, and increase its bottom margin…

<h2 class="fsa-m-t--none fsa-m-b--xl">Second level heading</h2>

Second level heading

…or even remove all of its margins…

<h2 class="fsa-m--none">Second level heading</h2>

Second level heading

Below are the complete set of CSS Utilities for overriding or extending an element’s or component’s visual properties, including Responsive scopes to adjust at targeted breakpoints.

Border Width

Selectively add or adjust border thickness.

Variants

All

<element class="fsa-border--[SIZE]">...</element>
none
xxs
xs
s
m
l
custom

Top

<element class="fsa-border-top--[SIZE]">...</element>
none
xxs
xs
s
m
l
custom
<element class="fsa-border-right--[SIZE]">...</element>
none
xxs
xs
s
m
l
custom

Bottom

<element class="fsa-border-bottom--[SIZE]">...</element>
none
xxs
xs
s
m
custom
custom

Left

<element class="fsa-border-left--[SIZE]">...</element>
none
xxs
xs
s
m
custom
custom

Responsive

Selectively apply Border Width at any Media Query breakpoint.

<element class="fsa-border--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Border Radius

Selectively add or adjust rounded corners.

Variants

<element class="fsa-radius--[SIZE]">...</element>
none
s
m
l
full
oval

Responsive

Selectively apply rounded corners at any Media Query breakpoint.

<element class="fsa-radius--[SIZE]@[BREAKPOINT]">...</element>

BREAKPOINT is one of s, m, l, or xl

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

Border Between

Selectively add or adjust borders between blocks of content.

Orientation

Vertical

<element class="fsa-border-between-vertical--[SIZE]">
  <el>1</el>
  <!-- border appears here -->
  <el>2</el>
  <!-- border appears here -->
  <el>3</el>
</element>
1
2
3

Horizontal

<element class="fsa-border-between-horizontal--[SIZE]">
  <el>1</el>
  <!-- border appears here -->
  <el>2</el>
  <!-- border appears here -->
  <el>3</el>
</element>
1
2
3

Size

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

Examples

Vertical, combined with Border Width

<div class="fsa-level fsa-level--grow-even fsa-level--align-stretch fsa-border-between-vertical--xxs fsa-border--xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3

Horizontal, combined with Border Width

<div class="fsa-border-between-horizontal--xxs fsa-border--xxs">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3

Responsive

Selectively apply at any Media Query breakpoint.

<element class="fsa-border-between-[ORIENTATION]--[SIZE]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Color: Border

Selectively add or adjust border colors.

<element class="fsa-border--[COLOR]">...</element>

Variants

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.

<element class="fsa-border--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Color: Border Between

Selectively add or adjust border colors between blocks of content.

Variants

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 Between Color at any Media Query breakpoint.

<element class="fsa-border-between-[ORIENTATION]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Color: Background

Selectively add or adjust background colors

<element class="fsa-bg--[COLOR]">...</element>

Variants

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 Colors at any Media Query breakpoint.

<element class="fsa-bg[:hover]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Color: Foreground

Selectively add or adjust foreground (text) colors

<element class="fsa-color--[COLOR]">...</element>

Variants

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.

<element class="fsa-color--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Selectively add or adjust text link colors

<a href="/link.html" class="fsa-link--[COLOR]">Text link</a>

Variants

Responsive

Selectively apply Link Colors at any Media Query breakpoint.

<element class="fsa-link[:hover]--[COLOR]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Ellipsis

Selectively truncate text overflow with an ellipsis.

Variants

<element class="fsa-ellipsis[--variant]">...</element>

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.

<element fsa-ellipsis[--none]@[BREAKPOINT]>...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Floats

Selectively adjust floating behavior of elements or components.

Variants

<el class="fsa-float--[DIRECTION]">...</el>

Where [DIRECTION] is one of left, right, none.

Left

<el class="fsa-float--left">...</el>

I'm floating to left

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius repudiandae itaque velit? Excepturi commodi, tempore odio amet consectetur adipisicing elit. Minus pariatur quaerat commodi maxime dignissimos repellendus placeat nulla quasi, sed at accusantium cum laborum minima. Quae earum enim unde vident deserunt? Illo ut tempora error est corporis optio amet ipsa doloremque ad.

Right

<el class="fsa-float--right">...</el>

I'm floating to right

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius repudiandae itaque velit? Excepturi commodi, tempore odio amet consectetur adipisicing elit. Minus pariatur quaerat commodi maxime dignissimos repellendus placeat nulla quasi, sed at accusantium cum laborum minima. Quae earum enim unde vident deserunt? Illo ut tempora error est corporis optio amet ipsa doloremque ad.

None

Most likely used to override a component’s current float property.

<el class="fsa-float--none">...</el>

I'm not floating.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius repudiandae itaque velit? Excepturi commodi, tempore odio amet consectetur adipisicing elit. Minus pariatur quaerat commodi maxime dignissimos repellendus placeat nulla quasi, sed at accusantium cum laborum minima. Quae earum enim unde vident deserunt? Illo ut tempora error est corporis optio amet ipsa doloremque ad.

Containing Floats

aka “clearfix”

<el class="fsa-clearfix">...</el>

I'm floating to left

I'm floating to right

The above container has been cleared

Clearing Floats

<el class="fsa-clear">...</el>

I'm floating to left

I've been cleared

Responsive

Adjust floating presentation per media query breakpoint.

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

Font

Selectively apply Typeface and Weight to text.

<el class="fsa-font--[VARIANT]">...</el>

Where VARIANT is one of sans (default), sans-light, fsa-font--sans-bold, or fsa-font--mono.

Sans

<div class="fsa-font--sans">Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.

Sans Light

<div class="fsa-font--sans-light">Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.

Sans Bold

<div class="fsa-font--sans-bold">Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.

Monospace

<div class="fsa-font--mono">Lorem ipsum dolor sit amet.</div>
Lorem ipsum dolor sit amet.

Responsive

Selectively apply Font at any Media Query breakpoint.

<element class="fsa-font--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Lists

Refer to Components / Lists for a variety of Lists

Refer to Color: Text Link

Selectively adjust display property of links.

<a class="fsa-link--[VARIANT]" href="/link.html">Text link</a>

Variants

Responsive

Selectively apply Link display properties at any Media Query breakpoint.

<element class="fsa-link--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Selectively add or remove underlines for Text Links.

<a class="fsa-link--[VARIANT]" href="/link.html">Text link</a>

Variants

Responsive

Selectively apply Link underlines at any Media Query breakpoint

<element class="fsa-link[:hover]--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Margins

Selectively manipulate margins around an element or component.

Spacing values pointedly subscribe to the Design System’s Sizes and Spaces.

<element class="fsa-m-[SIDE]--[SIZE]">...</element>

Where [SIDE] is one of t (top), r (right), b (bottom), l (left), or omitted (all 4 sides); and [SIZE] is one of none, xxs, xs, s, m, l, or xl.

Variants

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 Sides

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.

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

Padding

Selectively manipulate padding within an element or component.

Spacing values pointedly subscribe to the Design System’s Sizes and Spaces.

<element class="fsa-p-[SIDE]--[SIZE]">...</element>

Where [SIDE] is one of t (top), r (right), b (bottom), l (left), or omitted (all 4 sides); and [SIZE] is one of none, xxs, xs, s, m, l, or xl.

Variants

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 Sides

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

Responsive

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

Screenreader only

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

This component must not be used to hide interactive content; for that, defer to Visibility Utility classes.

<element class="fsa-sr-only@[SIZE]">...</element>

Visibly hide when viewport is within a specific range, where [SIZE] is one of xs-only, s-only, m-only, l-only, or xl-only.

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

Shadows

Selectively apply Shadows to containing blocks.

Variants

<el class="fsa-shadow--[VARIANT]">...</el>

Where VARIATION is one of popout, overlay, raised, or none.

Popout

Overlay

Raised

None

Hover

<el class="fsa-shadow--:hover--[VARIANT]">...</el>

Where VARIATION is one of popout, overlay, raised, or none.

Popout

Overlay

Raised

None

Responsive

Selectively apply at any Media Query breakpoint.

<element class="fsa-shadow--[VARIANT]@[BREAKPOINT]">...</element>

Where BREAKPOINT is one of s, m, l, or xl

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

Text Alignment

Selectively align blocks of content.

<el class="fsa-text-size--[DIRECTION]">...</el>

Where DIRECTION is one of left, center, or right

Variants

Right

<el class="fsa-text-align--right">...</el>

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

<el class="fsa-text-align--center">...</el>

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

<el class="fsa-text-align--left">...</el>

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.

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

Text Size

Selectively adjust text size.

Text Size utility classes follow’s the system’s vertical rythymTypography and Size and Space working in concert for a cohesive look and feel.

<element class="fsa-text-size--[SIZE]">...</element>

Where SIZE is one of 0 - 7. For reference, the base font size is equal to 3.

Variants

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.

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.

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.

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.

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.

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.

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.

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.

<element class="fsa-text-size--[SIZE]@[BREAKPOINT]">...</element>

Where SIZE is one of 0 - 7, and BREAKPOINT is one of s, m, l, or xl

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

Text Headers

Selectively adjust header elements.

While h1h6 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, semantic HTML heading level.

<hN class="fsa-text--[SIZE]">...</hN>

Where SIZE is one of h1, h2, h3, h4, h5, or h6.

Variants

Each of the below examples demonstrate how the visual presentation of a second-level heading (<h2>) has been overridden.

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.

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

Visibility

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

Show at minimum screen size

<element class="fsa-show@[SIZE]">...</element>

Show when at least [SIZE], where [SIZE] is one of s, m, l, or xl.

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

Show at only specific screen size

<element class="fsa-show@[SIZE]-only">...</element>

Show only at [SIZE], where [SIZE] is one of s, m, l, or xl.

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

Hide at minimum screen size

<element class="fsa-hide@[SIZE]">...</element>

Hide when at least [SIZE], where [SIZE] is one of s, m, or l.

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

Hide at specific screen size

<element class="fsa-hide@[SIZE]-only">...</element>

Hide only at [SIZE], where [SIZE] is one of xs, s, m, l, or xl.

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

Return to top