This page serves as a "Kitchen Sink" reference listing of all nrcs-style UI Components. View the Design System for complete documentation.
Logo
Docs for USDA Logo
Color
Docs for ColorCore Palette
-
Primary
$color-fsa-primary
-
Grays and Blacks (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-tertiary-900$color-fsa-tertiary$color-fsa-tertiary-300$color-fsa-tertiary-200$color-fsa-tertiary-100
Base
-
Text
$color-fsa-base
-
Link, Default
$color-fsa-link
-
Link, Hover
$color-fsa-link-hover
-
Site Background
$color-fsa-site-bg
Accent
-
Info (Aqua)
$color-fsa-aqua
-
Success (Green)
$color-fsa-green
-
Error (Red)
$color-fsa-red
-
Warning (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-green-900$color-fsa-green$color-fsa-green-300$color-fsa-green-200$color-fsa-green-100
-
$color-fsa-red-900$color-fsa-red$color-fsa-red-300$color-fsa-red-200$color-fsa-red-100
-
-
(No dark yellow)
$color-fsa-yellow$color-fsa-yellow-300$color-fsa-yellow-200$color-fsa-yellow-100
-
Typography
Docs for TypographyTypefaces
Roboto, Regular (Default)
Aa
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!@#$%^&*()-_=+[]{}|;:'><,./?
Roboto, Light
Aa
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!@#$%^&*()-_=+[]{}|;:'><,./?
Roboto, Bold
Aa
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
!@#$%^&*()-_=+[]{}|;:'><,./?
Typefaces, Fallback
Should the Web Font, Roboto, 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
exampleinside
a q element
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
Grid
Docs for GridA 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/121/121/121/121/121/121/121/121/121/121/121/12shrinkgrow1/62/121/43/125/121/26/127/122/38/123/49/125/610/1211/1212/1211/1Samples
1/2, 1/2
fsa-grid__1/2fsa-grid__1/21/3, 1/3, 1/3
fsa-grid__1/3fsa-grid__1/3fsa-grid__1/31/4, 1/4, 1/2 - no gutter
fsa-grid__1/4fsa-grid__1/4fsa-grid__1/2Nested: 3/4 (1/2, 1/2; 1/3, 1/3, 1/3), 1/4
fsa-grid__1/2
fsa-grid__1/2fsa-grid__1/2fsa-grid__1/3fsa-grid__1/3fsa-grid__1/3fsa-grid__1/4Grow (auto-width to remainder of container)
fsa-grid__growfsa-grid__1/2fsa-grid__growShrink (auto-width to column's content)
fsa-grid__shrinkfsa-grid__1/2fsa-grid__shrink with a reallyreallyreallyreallyreallylongwordResponsive Columns
Grid columns can be adjusted per media query breakpoint.
Components
Docs for ComponentsButtons
Docs for Buttonsclass="fsa-btn fsa-btn--[modifier]"
Primary (default)
Secondary
Icon-Button
Coming soon...Flat
Inline (default)
Block (full width)
Small
Medium (default)
Large
Disabled
(Icon-Button Coming Soon...)
HTML Elements
Responsive
Selectively override several style properties at each Media Query breakpoint.
fsa-btn--[property]@[breakpoint], where
property is one of
small,
medium,
large,
block, or
inline; and breakpoint is one of
s,
m,
l, or
xl
Button Group
Docs for Button Groupspan class="fsa-btn-group"
Small
Medium (default)
Large
Active Selection
Disabled (all)
Disabled (some)
Inline (default)
Block (full width)
HTML Elements
Responsive
Selectively override several style properties at each Media Query breakpoint.
fsa-btn-group--[property]@[breakpoint], where
property is one of
small,
medium,
large,
block, 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" ... >
Form Field
Docs for Form Fieldclass="fsa-field"
Custom text input width
The width of this component's <input type="text"> element spans the full width of its parent container (e.g., .fsa-field). Though it should rarely be necessary, it can be overridden by using the size attribute.
size specifies the width of the input in characters. From a display perspective, one character is equivalent to 1em (approximately 17px in with fsa-style's typography system).
<input .... size="4">
<input .... size="7">
<input .... size="20">
Error States
Columns
fsa-field fsa-field--block fsa-field--columns
Use Grids to lay out form fields, including responsively, for example these are stacked until the Small breakpoint:
Radio and Checkbox
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 SearchDefault
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 - Default
Docs for Select - DefaultDefault
class="fsa-select"
(disabled)
(readonly)
Small
class="fsa-select fsa-select--small"
(disabled)
(readonly)
Large
class="fsa-select fsa-select--large"
(disabled)
(readonly)
Block (full-width)
class="fsa-select fsa-select--block"
Error
class="fsa-select fsa-select--error"
Select Multi
Docs for Select MultiDefault
class="fsa-select-multi"
Select All
class="fsa-select-multi"
Disabled
class="fsa-select-multi fsa-select-multi--disabled"
Spinbox
Docs for SpinboxDefault
Align Right
Small
Large
step="5"
step="100" min="-400" max="500"
step=".01"
step="5000"
Within a Field Component
Disabled
Switch
Docs for Switchclass="fsa-switch"
Default
Checked
Indeterminate
Disabled
Example (e.g. label elsewhere in DOM)
Stepped Control
Docs for Stepped Controlclass="fsa-stepped-control fsa-stepped-control--[variation]"
Default
Default, with Status Message
Default, with multiple secondary
Directional
Directional, with multiple actions
Directional, with Status Message
Directional, with Status Message and multiple actions
Sticky + Default
This <div class="DEMO-STICKY-STEPPED-CONTROL"> container provides the boundary by which the fsa-stepped-control--sticky variation 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 variation 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 + 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.
Within Modal
Examples:
Responsive
Text Input
Docs for Text InputIts 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"
Full-width (Block)
class="fsa-input fsa-input--block"
Custom Width
Though rarely necessary, the width of .fsa-input can be overridden by using the size attribute, whici specifies the width of the input in characters. From a display perspective, one character is equivalent to 1em (approximately 17px in with fsa-style's typography system).
size="2"
size="5"
size="7"
size="14"
size="28"
Error
class="fsa-input fsa-input--error"
Textarea
Docs for TextareaDefault
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"
Badges
Docs for Badgesclass="fsa-badge fsa-badge--[type] fsa-badge--[size]"
1 8 11 11 22 99+
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>).
Growl Notifications
Docs for Growl Notificationsclass="fsa-growl fsa-growl--[variation]"
Inline Alerts
Docs for Inline Alertsclass="fsa-alert fsa-alert--[type]"
Default
Optional success title
Lorem ipsum bold text, consectetur adipiscing elit, sed do eiusmod.
Optional warning title
Lorem ipsum bold text, consectetur adipiscing elit, sed do eiusmod.
Optional error title
Lorem ipsum bold text, consectetur adipiscing elit, sed do eiusmod.
Optional information title
Lorem ipsum bold text, consectetur adipiscing elit, sed do eiusmod.
No icon
Dismissable option
Optional success title
Lorem ipsum bold text, consectetur adipiscing assumenda harum accusamus nemo non iste quia. Nihil ab tenetur ipsa dolore nisi qui molestias assumenda a perferendis maxime sed do eiusmod.
Labels
Docs for Labelsclass="fsa-label fsa-label--[type] fsa-label--[size]"
Label Lorem ipsum Lorem ipsum Lorem ipsum Label Label
Label Lorem Lorem ipsum Lorem ipsum Label Label
Label styles can be applied to nearly any HTML element, most likely <span> as shown above. Actionable examples seen below (<a> and <button>).
Modal
Docs for ModalProgress
Docs for Progressclass="fsa-progress"
Indeterminate, with label
Indeterminate, hidden label
Determinate, with label/value
Determinate, hidden label
Determinate, manual demo
Determinate, example
Paired with Select, inline
Paired with Select, block
Paired with Input, inline
Paired with Input, block
Paired with Modal
Paired with Growl Notification, modal-based
Paired with Growl Notification, default
Paired with Table
| 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
Paired with header
Splash
Docs for splashclass="fsa-splash"
Breadcrumb
Docs for Breadcrumbclass="fsa-breadcrumb"
Content Tabs
Docs for Content TabsDefault
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.
Responsive
Pagination
Docs for Paginationclass="fsa-pagination"
First
Internal
Last
Fewer than 6 pages
6 or more pages
Responsive
Stepped Tabs
Docs for Stepped Tabsclass="fsa-stepped-tabs fsa-stepped-tabs--[variation]"
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
- Lor
- Em ipsum
- Dol
- Or Sit Amet
Actionable: all
Samples
Lists
Docs for ListsUnordered
<ul>
- List item one
- List item two
- List item three
Ordered
<ol>
- List item one
- List item two
- List item three
Inline
class="fsa-list--inline"
- List item one
- List item two
- List item three
Unstyled
Use Sass Mixins @include reset-ul() and @include reset-li() where possible over class="fsa-list--unstyled"
<ul class="fsa-list--unstyled">
- List item one
- List item two
- List item three
<ol class="fsa-list--unstyled">
- 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
Tables
Docs for TablesDefault
class="fsa-table"
| 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 |
| 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 |
| 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 |
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
| 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
| 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"
| 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 |
Timeline
Docs for Timeline<div class="fsa-timeline">
<div class="fsa-timeline__item fsa-timeline__item--[variation]">
<div class="fsa-timeline__hd">...</div>
<div class="fsa-timeline__bd">...</div>
</div>
</div>
Combined Example
fsa-timeline__item--system
fsa-timeline__item--user
fsa-timeline__item--editing
fsa-timeline__item--add-comment
Header: Top Hat
Docs for Header: Top Hatclass="fsa-tophat"
Responsive
Header: App
Docs for Header: AppUtilities
Docs for UtilitiesBox
Docs for Boxclass="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 these modifiers are specific to .fsa-box, CSS Utilities and Helpers (e.g. Margins) 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-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
Ellipsis
Docs for EllipsisDefault
class="fsa-ellipsis"
Unset
class="fsa-ellipsis--none"
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 FloatsLeft
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.
Margins
Docs for MarginsTop
fsa-m-t--nonefsa-m-t--xxsfsa-m-t--xsfsa-m-t--sfsa-m-t--mfsa-m-t--lfsa-m-t--xlRight
fsa-m-r--nonefsa-m-r--xxsfsa-m-r--xsfsa-m-r--sfsa-m-r--mfsa-m-r--lfsa-m-r--xlBottom
fsa-m-b--nonefsa-m-b--xxsfsa-m-b--xsfsa-m-b--sfsa-m-b--mfsa-m-b--lfsa-m-b--xlLeft
fsa-m-l--nonefsa-m-l--xxsfsa-m-l--xsfsa-m-l--sfsa-m-l--mfsa-m-l--lfsa-m-l--xlAll
fsa-m--nonefsa-m--xxsfsa-m--xsfsa-m--sfsa-m--mfsa-m--lfsa-m--xlResponsive
Margins can be adjusted per media query breakpoint.
Media Object
Docs for Media ObjectWhat's a Media Object?
- Short Summary: an image of any width/height to one side, paired with something (usually text) to the other side.
- Longer answer and background: The media object saves hundreds of lines of code
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.
Padding
Docs for PaddingTop
fsa-p-t--nonefsa-p-t--xxsfsa-p-t--xsfsa-p-t--sfsa-p-t--mfsa-p-t--lfsa-p-t--xlRight
fsa-p-r--nonefsa-p-r--xxsfsa-p-r--xsfsa-p-r--sfsa-p-r--mfsa-p-r--lfsa-p-r--xlBottom
fsa-p-b--nonefsa-p-b--xxsfsa-p-b--xsfsa-p-b--sfsa-p-b--mfsa-p-b--lfsa-p-b--xlLeft
fsa-p-l--nonefsa-p-l--xxsfsa-p-l--xsfsa-p-l--sfsa-p-l--mfsa-p-l--lfsa-p-l--xlAll
fsa-p--nonefsa-p--xxsfsa-p--xsfsa-p--sfsa-p--mfsa-p--lfsa-p--xlResponsive
Padding can be adjusted per media query breakpoint.
Text Alignment
Docs for Text AlignmentRight
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 HeadersWhile 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 Sizeclass="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 onlyVisibly 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.
Visibility
Docs for VisibilitySelectively 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.