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

Box

Overview

Organize a set of content in a standalone object.

Deserunt excepturi rem asperiores. Sapiente aliquid, hic natus.

<div class="fsa-box">
  <p>Deserunt excepturi rem asperiores. Sapiente aliquid, hic natus.</p>
</div>

Variants

While these modifiers are specific to .fsa-box, other CSS Utilities and Helpers (e.g. Padding) 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

Selectively apply the Box style to an element at each Media Query breakpoint, where BREAKPOINT is one of s, m, l, or xl.

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

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

Selectively override several style properties of .fsa-box at each Media Query breakpoint, where PROPERTY is one of bg, bw, or br, and where BREAKPOINT is one of s, m, l, or xl

<element class="fsa-box fsa-box[PROPERTY]@[BREAKPOINT]">...</element>

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

Return to top