An official website of the United States Government
Overview
Organize a set of content in a standalone object.
Preview
View Kitchen SinkDeserunt 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>
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>