@charset "UTF-8";
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/** Add the correct display in IE 9-. */
article, aside, footer, header, nav, section { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
figcaption, figure, main { /* 1 */ display: block; }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** 1. Remove the bottom border in Chrome 57- and Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Add the correct display in IE 9-. */
audio, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
details, menu { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Scripting ========================================================================== */
/** Add the correct display in IE 9-. */
canvas { display: inline-block; }

/** Add the correct display in IE. */
template { display: none; }

/* Hidden ========================================================================== */
/** Add the correct display in IE 10-. */
[hidden] { display: none; }

/*! Design System - Core v{{version}} */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/* stylelint-disable indentation  */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
@font-face { font-family: Bitter; font-style: normal; font-weight: normal; src: url("fonts//Bitter-Regular.eot"); src: url("fonts//Bitter-Regular.eot?#iefix") format("embedded-opentype"), url("fonts//Bitter-Regular.woff2") format("woff2"), url("fonts//Bitter-Regular.woff") format("woff"), url("fonts//Bitter-Regular.ttf") format("truetype"); }

@font-face { font-family: Bitter; font-style: normal; font-weight: bold; src: url("fonts//Bitter-Bold.eot"); src: url("fonts//Bitter-Bold.eot?#iefix") format("embedded-opentype"), url("fonts//Bitter-Bold.woff2") format("woff2"), url("fonts//Bitter-Bold.woff") format("woff"), url("fonts//Bitter-Bold.ttf") format("truetype"); }

@font-face { font-family: Bitter; font-style: italic; font-weight: normal; src: url("fonts//Bitter-Italic.eot"); src: url("fonts//Bitter-Italic.eot?#iefix") format("embedded-opentype"), url("fonts//Bitter-Italic.woff2") format("woff2"), url("fonts//Bitter-Italic.woff") format("woff"), url("fonts//Bitter-Italic.ttf") format("truetype"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: normal; src: url("fonts//OpenSans-Regular-webfont.eot"); src: url("fonts//OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts//OpenSans-Regular-webfont.woff2") format("woff2"), url("fonts//OpenSans-Regular-webfont.woff") format("woff"), url("fonts//OpenSans-Regular-webfont.ttf") format("truetype"); }

@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: normal; src: url("fonts//OpenSans-Italic-webfont.eot"); src: url("fonts//OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("fonts//OpenSans-Italic-webfont.woff2") format("woff2"), url("fonts//OpenSans-Italic-webfont.woff") format("woff"), url("fonts//OpenSans-Italic-webfont.ttf") format("truetype"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url("fonts//OpenSans-Semibold-webfont.eot"); src: url("fonts//OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts//OpenSans-Semibold-webfont.woff2") format("woff2"), url("fonts//OpenSans-Semibold-webfont.woff") format("woff"), url("fonts//OpenSans-Semibold-webfont.ttf") format("truetype"); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url("fonts//OpenSans-Bold-webfont.eot"); src: url("fonts//OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("fonts//OpenSans-Bold-webfont.woff2") format("woff2"), url("fonts//OpenSans-Bold-webfont.woff") format("woff"), url("fonts//OpenSans-Bold-webfont.ttf") format("truetype"); }

/* stylelint-disable selector-class-pattern */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Base

A base layer of styling can be applied to an area of your site by adding the `ds-base` class. If you're implementing the design system on a new site, you'd likely want to apply this class to the `<body>` element. On existing sites this might not be desirable. In which case, you could apply the `ds-base` class to an element which scopes the styling to itself and its children.

Specifically, the base styling sets the following properties:

- `color`
- `font-family`
- `font-size`
- `line-height`

.ds-base--inverse - Applies an inverse `color` and `background-color`

Markup:
<div class="ds-base {{modifier}} ds-u-padding--2">
  {{lorem-l}}
</div>

Style guide: style.base
*/
.ds-base--inverse, .ds-base { font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.5; }

.ds-base { color: #212121; }

.ds-base--inverse { background-color: #112e51; color: #ffffff; }

/* stylelint-enable */
/* stylelint-disable selector-class-pattern */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Typography

The design system doesn't style base HTML typography elements (like `h1`, `h2`, `p`, etc) in order to avoid conflicting with any existing site styles. You should instead use one of the base typography classes below to apply styling:

- `ds-display`
- `ds-title`
- `ds-h{level}` where `level` is a number between `1` and `6`
- `ds-text` and `ds-text--lead`

Note: The only base HTML element the design system applies styling to is the `<a>` element. To prevent this, you can override the `$ds-include-base-html-rulesets` Sass variable and set it to `false`.

Markup:
<h1 class="ds-display">Display</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-title">Title</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h1">Heading 1</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h2">Heading 2</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h3">Heading 3</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h4">Heading 4</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h5">Heading 5</h1>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted">
    {{ lorem-l }}
  </p>
<h1 class="ds-h6">Heading 6</h1>
<p class="ds-text--lead ds-u-measure--wide">
  <strong>Lead text.</strong>  {{lorem-l}}
</p>
<p class="ds-text ds-u-measure--wide">
  <strong>Body text.</strong>  {{ lorem-l }}
</p>

Style guide: style.typography
*/
a { color: #0071bc; }

a:hover, a:focus { color: #205493; }

a:active { color: #112e51; }

.ds-display, .ds-title, .ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6 { line-height: 1.3; margin: 0; }

.ds-display, .ds-h1, .ds-h2, .ds-h3, .ds-h4 { font-weight: 700; }

.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6 { margin-bottom: 0.5em; margin-top: 1.5em; }

.ds-h1:first-child, .ds-h2:first-child, .ds-h3:first-child, .ds-h4:first-child, .ds-h5:first-child, .ds-h6:first-child { margin-top: 0; }

.ds-h1:last-child, .ds-h2:last-child, .ds-h3:last-child, .ds-h4:last-child, .ds-h5:last-child, .ds-h6:last-child { margin-bottom: 0; }

.ds-display { font-size: 36px; }

@media (min-width: 544px) { .ds-display { font-size: 48px; } }

@media (min-width: 768px) { .ds-display { font-size: 60px; } }

.ds-title { font-size: 36px; font-weight: 400; }

@media (min-width: 768px) { .ds-title { font-size: 48px; } }

.ds-h1 { font-size: 36px; }

.ds-h2 { font-size: 24px; }

.ds-h3 { font-size: 21px; }

.ds-h4 { font-size: 18px; }

.ds-h5 { font-size: 16px; font-weight: 400; text-transform: uppercase; }

.ds-h6 { color: #757575; font-size: 14px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }

.ds-base--inverse .ds-h6 { color: #bac5cf; }

.ds-text, .ds-text--lead { line-height: 1.5; margin-bottom: 1em; margin-top: 1em; }

.ds-text:first-child, .ds-text--lead:first-child { margin-top: 0; }

.ds-text:last-child, .ds-text--lead:last-child { margin-bottom: 0; }

.ds-text { font-size: 16px; }

.ds-text--lead { font-size: 18px; }

/*
Responsive typography

The `ds-display` and `ds-title` classes are responsive by default. To apply responsive typography elsewhere, use the [font size utility class](/utilites/font-size#responsive). Since the base typography margins and line height is measured in `em` units, they'll automatically adjust as you change the font size.

_Resize your browser to see each breakpoint in action:_

Markup:
<article class="ds-base--inverse ds-u-padding--2">
  <h1 class="ds-display">Responsive heading</h1>
  <p class="ds-text ds-u-font-size--small ds-u-md-font-size--base ds-u-lg-font-size--lead ds-u-measure--wide">
    <strong>Responsive body text.</strong>
    {{ lorem-l }}
  </p>
  <h2 class="ds-h2 ds-u-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2">Responsive subheading</h2>
  <p class="ds-text ds-u-measure--wide ds-u-color--muted-inverse">{{ lorem-l }}</p>
</div>

Style guide: style.typography.responsive
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Alert

@uswds https://standards.usa.gov/components/alerts

Alerts keep users informed of important and sometimes time-sensitive changes.

.ds-c-alert--error - Error message
.ds-c-alert--warn - Warning message
.ds-c-alert--success - Success message

Markup:
<div class="ds-c-alert {{modifier}}">
  <div class="ds-c-alert__body">
    <h3 class="ds-c-alert__heading">Status heading</h3>
    <p class="ds-c-alert__text">Lorem ipsum dolor sit <a href="javascript:void(0);">link text</a>, consectetur adipiscing elit, sed do eiusmod.</p>
  </div>
</div>

Style guide: components.alert
*/
.ds-c-alert { background-color: #e1f3f8; background-image: url("images/info.svg"); background-position: 16px 16px; background-repeat: no-repeat; background-size: 40px; border-left: 8px solid #02bfe7; box-sizing: border-box; color: #212121; min-height: 56px; padding: 16px; position: relative; }

.ds-c-alert a { color: #205493; }

.ds-c-alert a:focus, .ds-c-alert a:hover { color: #112e51; }

.ds-c-alert ul:last-child { margin-bottom: 0; }

.ds-c-alert ul:first-child { margin-top: 0; }

.ds-c-alert__body { padding-left: 48px; }

.ds-c-alert__heading { font-size: 18px; font-weight: 700; margin-bottom: 4px; margin-top: 0; }

.ds-c-alert__text { margin-bottom: 0; margin-top: 0; }

.ds-c-alert--error { background-color: #f9dede; background-image: url("images/error.svg"); border-color: #e31c3d; }

.ds-c-alert--warn { background-color: #fff1d2; background-image: url("images/warning.svg"); border-color: #fdb81e; }

.ds-c-alert--success { background-color: #e7f4e4; background-image: url("images/success.svg"); border-color: #2e8540; }

/*
Additional examples

Alerts support various types and lengths of content, including lists and links. You can use the [measure utility]({{root}}/utilities/measure) to maintain a legible line length.

Markup:
<div class="ds-c-alert">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <p class="ds-c-alert__text">{{lorem-s}}</p>
  </div>
</div>
<div class="ds-c-alert ds-u-margin-top--2">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <p class="ds-c-alert__text">{{lorem-l}}</p>
  </div>
</div>
<div class="ds-c-alert ds-u-margin-top--2">
  <div class="ds-c-alert__body ds-u-measure--wide">
    <h3 class="ds-c-alert__heading">Status heading</h3>
    <p class="ds-c-alert__text">{{lorem-m}}</p>
    <ul class="ds-c-list">
      <li>Alert list item</li>
      <li>Alert list item</li>
    </ul>
    <a href="javascript:void(0);">Link text</a>
  </div>
</div>

Style guide: components.alert.variations
*/
/*
`<Alert>`

@react-component Alert

Style guide: components.alert.react
*/
/*
---

## When to use

- As a validation message that alerts someone that they just did something that needs to be corrected or as confirmation that a task was completed successfully.
- As a callout or notification for important or timely information. This includes errors, warnings, and general information.

## When to consider alternatives

- On long forms, always include in-line validation in addition to any error messages that appear at the top of the form. When possible, simplify forms by rewriting and where possible, splitting long forms across multiple pages
- If an action will result in destroying a user’s work (for example, deleting an application) use a more intrusive pattern, such as a confirmation modal dialogue, to allow the user to confirm that this is what they want.

## Guidance

- Don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
- Write the message in concise, human readable language; avoid jargon and computer code.
- Don’t include notifications that aren’t related to the user’s current goal.
- When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible.

**When the alert is for an error:**

- Be polite in error messages — don’t place blame on the user.
- Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
- If the error relates to specific text fields, give these fields an error state as well.

## Accessibility

- Use the ARIA `role="alert"` to inform assistive technologies of a time-sensitive and important message that is not interactive. If the message is interactive, use the `role="alertdialog"` instead.
- Consider putting the alert inside a div with `aria-live="polite"` and `aria-relevant="additions removals"`. These <abbr title="Accessible rich internet applications">ARIA</abbr> attributes ensure screen readers will announce alerts that have been added or updated dynamically.
- Do not visually hide alert messages on the page and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.
- Alerts should give users adequate time to review and comprehend the provided information. Avoid hiding alerts using a timer.
- Include a mechanism like a button to dismiss alerts where appropriate.

## Learn more

- [18F Content Guide \- Active voice](https://content-guide.18f.gov/active-voice/)


Style guide: components.alert.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Badge

Badges hold small amounts of information and draw attention to new or important content.

@status beta

@uswds https://standards.usa.gov/components/labels/

.ds-c-badge--info - Info badge
.ds-c-badge--success - Success badge
.ds-c-badge--warn - Warning badge
.ds-c-badge--alert - Alert or error badge

Markup:
<span class="ds-c-badge {{modifier}}">5</span>
<span class="ds-c-badge {{modifier}}">Badge label</span>
<span class="ds-c-badge {{modifier}} ds-u-font-size--base">Badge label</span>

Style guide: components.badge
*/
.ds-c-badge { background-color: #5b616b; border-radius: 9999px; color: #ffffff; display: inline-block; font-size: 14px; line-height: 1.3; margin-right: 4px; padding: 4px 8px; }

.ds-c-badge:only-of-type { margin-right: 0; }

.ds-c-badge--info { background-color: #0071bc; }

.ds-c-badge--success { background-color: #2e8540; }

.ds-c-badge--warn { background-color: #fdb81e; color: #212121; }

.ds-c-badge--alert { background-color: #e31c3d; }

/*
---

## When to use

- To draw attention to new, important content on a page that might otherwise be missed.
- To filter results with one or more tags.
- To indicate the number of new or unread items within a container. For example, to indicate the number of unread messages within a person’s inbox.

## When to consider alternatives

- When users are likely to confuse a badge with a button. For example, when the badge appears in the same area of the page as buttons.
- To call attention to new or updated content, consider changing the background color of the object itself or experiment with changing the font weight.
- When users already expect content to be updated frequently. For example, on a site dedicated to breaking news. In this case placing the new content at the top may be enough.

## Guidance

- Don’t overdo it — if everything on a page is called out as important, nothing is important.
- Users may confuse badges as buttons. Always conduct usability testing to make sure your particular implementation is not causing frustration.
- Don’t mix interactive and static badges on your site. Once you establish a pattern for how badges behave, users will expect that behavior every time.

## Accessibility

- When badges are used to call out new content that is dynamically loaded onto a page, be sure to use [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) to alert screen readers of the change.

## Future research

- Further usability testing should be done to ensure badges aren't being confused with buttons. Further iteration can be done with sizing and colors if there is confusion.

Style guide: components.badge.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Button

@uswds https://standards.usa.gov/components/buttons

Use buttons to signal actions.

.ds-c-button--primary - The primary call-to-action
.ds-c-button--transparent - A button closer to resembling an anchor element
.ds-c-button--danger - Indicates an action is destructive or dangerous
.ds-c-button--success - Indicates a positive or successful action

Markup:
<button type="button" class="ds-c-button ds-c-button--small {{modifier}}">Small</button>
<button type="button" class="ds-c-button {{modifier}}">Default</button>
<a class="ds-c-button  ds-c-button--big {{modifier}}" href="javascript:void(0);">Big</a>

Style guide: components.button
*/
.ds-c-button { appearance: none; background-color: transparent; border: 1px solid #0071bc; border-radius: 3px; color: #0071bc; cursor: pointer; display: inline-block; font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.3; padding: 8px 24px; text-align: center; text-decoration: none; }

.ds-c-button:focus, .ds-c-button:hover { border-color: #205493; color: #205493; }

.ds-c-button:active { border-color: #112e51; color: #112e51; }

.ds-c-button--big { font-size: 21px; padding-bottom: 16px; padding-top: 16px; }

.ds-c-button--small { font-size: 14px; font-weight: 400; padding: 4px 8px; }

.ds-c-button--primary { background-color: #0071bc; color: #ffffff; }

.ds-c-button--primary:focus, .ds-c-button--primary:hover { background-color: #205493; color: #ffffff; }

.ds-c-button--primary:active { background-color: #112e51; }

.ds-c-button--transparent, .ds-c-button--transparent-inverse { border-color: transparent; }

.ds-c-button--transparent:focus, .ds-c-button--transparent:hover, .ds-c-button--transparent:active, .ds-c-button--transparent-inverse:focus, .ds-c-button--transparent-inverse:hover, .ds-c-button--transparent-inverse:active { border-color: transparent; }

.ds-c-button--danger { background-color: #e31c3d; border-color: #e31c3d; color: #ffffff; }

.ds-c-button--danger:focus, .ds-c-button--danger:hover { background-color: #cd2026; border-color: #cd2026; color: #ffffff; }

.ds-c-button--danger:active { background-color: #981b1e; border-color: #981b1e; }

.ds-c-button--success { background-color: #2e8540; border-color: #2e8540; color: #ffffff; }

.ds-c-button--success:focus, .ds-c-button--success:hover { background-color: #2a7a3b; border-color: #2a7a3b; color: #ffffff; }

.ds-c-button--success:active { background-color: #266e35; border-color: #266e35; }

/*
---

### Disabled button

Markup:
<a href="javascript:void(0);" class="ds-c-button ds-c-button--disabled">Link</a>
<button disabled class="ds-c-button">Button</button>
<input disabled type="submit" class="ds-c-button" />

Style guide: components.button.disabled
*/
.ds-c-button:disabled, .ds-c-button--disabled { background-color: #d6d7d9; border-color: #d6d7d9; color: #323a45; pointer-events: none; }

.ds-c-button:disabled:hover, .ds-c-button:disabled:active, .ds-c-button:disabled:focus, .ds-c-button--disabled:hover, .ds-c-button--disabled:active, .ds-c-button--disabled:focus { background-color: #d6d7d9; border-color: #d6d7d9; color: #323a45; }

/*
---

### Inverse theme

Markup:
<div class="ds-base--inverse ds-u-padding--2">
  <button class="ds-c-button ds-c-button--inverse">Button</button>
  <button class="ds-c-button ds-c-button--transparent-inverse">Button</button>
  <button class="ds-c-button ds-c-button--primary">Button</button>
  <button class="ds-c-button ds-c-button--danger">Button</button>
  <button class="ds-c-button ds-c-button--success">Button</button>
  <button disabled class="ds-c-button ds-c-button--disabled-inverse">Button</button>
</div>

Style guide: components.button.inverse
*/
.ds-c-button--inverse { border-color: #ffffff; }

.ds-c-button--inverse:active, .ds-c-button--inverse:focus, .ds-c-button--inverse:hover { border-color: #ffffff; }

.ds-c-button--inverse, .ds-c-button--transparent-inverse { color: #ffffff; }

.ds-c-button--inverse:active, .ds-c-button--inverse:focus, .ds-c-button--inverse:hover, .ds-c-button--transparent-inverse:active, .ds-c-button--transparent-inverse:focus, .ds-c-button--transparent-inverse:hover { color: #ffffff; opacity: 0.8; }

.ds-c-button--inverse:active, .ds-c-button--transparent-inverse:active { opacity: 0.6; }

.ds-c-button--disabled-inverse, .ds-c-button--disabled-inverse:disabled { background-color: #081627; border-color: #081627; color: #bac5cf; pointer-events: none; }

.ds-c-button--disabled-inverse:hover, .ds-c-button--disabled-inverse:active, .ds-c-button--disabled-inverse:focus, .ds-c-button--disabled-inverse:disabled:hover, .ds-c-button--disabled-inverse:disabled:active, .ds-c-button--disabled-inverse:disabled:focus { background-color: #112e51; border-color: #112e51; color: #bac5cf; }

/*
Button icons

- Add an inline SVG icon and it will become the same color as the button text. For the crispest icon rendering, ensure the icon has a square `viewBox` with values that are multiples of `8` (ie. `24x24`).
- Use the margin utility class to add spacing between the icon and button text.

Markup:
<button class="ds-c-button">
  <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
    <use xlink:href="{{root}}/public/images/symbols.svg#download"></use>
  </svg>Left icon
</button>
<button class="ds-c-button ds-c-button--primary">
  Right icon<svg class="ds-u-margin-left--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
    <use xlink:href="{{root}}/public/images/symbols.svg#arrow-right"></use>
  </svg>
</button>
<button class="ds-c-button ds-c-button--outline">
  No icon
</button>

Style guide: components.button.icons
*/
.ds-c-button > svg { fill: currentColor; height: 1em; margin-bottom: -0.1em; margin-top: -0.1em; position: relative; top: -0.1em; vertical-align: middle; width: 1em; }

/*
Button inline with field

The button is the same height as a single-line text field.

Markup:
<input type="text" class="ds-c-field ds-u-display--inline-block" />
<button class="ds-c-button">Submit</button>

Style guide: components.button.inline-field
*/
/*
`<Button>`

@react-component Button

Style guide: components.button.react
*/
/*
---

## When to use

- Use buttons for the most important actions you want users to take on your site, such as "Download," "Sign up," or "Apply."

## When to consider alternatives

- Less popular or less important actions may be visually styled as links.
- Buttons are for performing actions, not making choices. If you need your users to make a choice, use something else like radio buttons. Alternatively, if one choice is much less important then try styling it as a link instead.

## Guidance

- Use the "primary" button variation for the button most users should click. This is your primary call-to-action.
- Avoid using too many buttons on a page. Aim to use only one button per page.
- Avoid similar styles elsewhere on the page that could be confused for buttons.
- Use buttons for the primary action and links for secondary actions.

**Label text**

- Use sentence case for button labels.
- Button labels should be as short as possible with “trigger words” that your users will recognize to clearly explain what will happen when the button is clicked (for example, “Save and continue,” “Download” or “Sign up”).
- Make the first word of the button’s label a verb. For example, instead of “Complaint Filing”, label the button “File a complaint.”
- If a button has an icon, it should still have accompanying text describing the action.

**Destructive buttons**

- Use the "danger" button variation for destructive buttons. For example, buttons that delete or reset a user's information.
- Confirm the user meant to trigger a destructive action before following through with the action.
- Provide a method for a user to undo a destructive action.

**Disabled buttons**

- Don’t disable buttons, unless there’s a good reason to.
- If you do disable a button, make sure it receives the disabled styling. A `button` element will automatically be styled as a disabled button when it has the `disabled` HTML attribute, but an `a` element will need to have the disabled modifier class applied to it.

## Accessibility

- Buttons should display a visible focus state when users tab to them.
- Create a button with a `button` or `a` element to retain the native click functionality. Avoid using `<div>` or `<img>` tags to create buttons. Screen readers don't automatically know either is a usable button.
- When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the `Space` key triggers a button, but pressing the `Enter` key triggers a link.
- Dimmed or unavailable buttons should have the `disabled` attribute applied. This removes native click and keypress events from the button. It also prevents automated scanners from logging a low contrast error. Finally, it announces the button as "dimmed" or "disabled" to screen readers, offering users additional context.

## Learn more

- [Beyond Blue Links: Making Clickable Elements Recognizable](https://www.nngroup.com/articles/clickable-elements/)
- [7 Basic Best Practices for Buttons](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php)
- [The Grammar of Interactivity](http://www.uxbooth.com/articles/the-grammar-of-interactivity/)
- [GOV.UK navigation buttons discussion](https://paper.dropbox.com/doc/Navigation-buttons-continue-next-previous-ghLqL5a9Ostxxb3rvBhyO)

**Button alignment**
- [Buttons on forms and surveys: a look at some research](http://www.slideshare.net/cjforms/buttons-on-forms-and-surveys-a-look-at-some-research-2012)
- [Previous and Next Actions in Web Forms](https://www.lukew.com/ff/entry.asp?730=)

**ARIA**
- [Using the button role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role)
- [Building Accessible Buttons with ARIA](https://www.deque.com/blog/accessible-aria-buttons)

Style guide: components.button.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Fieldset

Markup:
<fieldset class="ds-c-fieldset">...</fieldset>
*/
.ds-c-fieldset { border: 0; margin: 24px 0 0; min-width: 0; padding: 0; }

/*
Checkbox & Radio

Checkboxes allow users to select one or more options from a visible list, whereas radio buttons allow a user to select only one option.

@uswds https://standards.usa.gov/components/form-controls

Markup:
<fieldset class="ds-c-fieldset ds-u-margin-top--0">
  <legend class="ds-c-label">Historical figures</legend>
  <span class="ds-c-field__hint">Select all that apply</span>
  <input class="ds-c-choice" id="truth-1" type="checkbox" name="historical-figures-1" value="truth" checked>
  <label for="truth-1">Sojourner Truth</label>
  <input class="ds-c-choice" id="douglass-1" type="checkbox" name="historical-figures-1" value="douglass">
  <label for="douglass-1">Frederick Douglass</label>
  <input class="ds-c-choice" id="washington-1" type="checkbox" name="historical-figures-1" value="washington">
  <label for="washington-1">Booker T. Washington</label>
  <input class="ds-c-choice" id="carver-1" type="checkbox" name="historical-figures-1" disabled>
  <label for="carver-1">George Washington Carver</label>
</fieldset>
<fieldset class="ds-c-fieldset">
  <legend class="ds-c-label">Select a historical figure</legend>
  <input class="ds-c-choice" id="truth-3" type="radio" name="historical-figures-3" value="truth" checked>
  <label for="truth-3">Sojourner Truth</label>
  <input class="ds-c-choice" id="douglass-3" type="radio" name="historical-figures-3" value="douglass">
  <label for="douglass-3">Frederick Douglass</label>
  <input class="ds-c-choice" id="washington-3" type="radio" name="historical-figures-3" value="washington">
  <label for="washington-3">Booker T. Washington</label>
</fieldset>

Style guide: components.choice
*/
/*
Inverse theme

Markup:
<div class="ds-base ds-base--inverse ds-u-padding--2 ds-u-margin-top--2">
  <fieldset class="ds-c-fieldset ds-u-margin-top--0">
    <legend class="ds-c-label">Historical figures</legend>
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Select all that apply</span>
    <input class="ds-c-choice ds-c-choice--inverse" id="truth-2" type="checkbox" name="historical-figures-2" value="truth" checked>
    <label for="truth-2">Sojourner Truth</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="douglass-2" type="checkbox" name="historical-figures-2" value="douglass">
    <label for="douglass-2">Frederick Douglass</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="washington-2" type="checkbox" name="historical-figures-2" value="washington">
    <label for="washington-2">Booker T. Washington</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="carver-2" type="checkbox" name="historical-figures-2" disabled>
    <label for="carver-2">George Washington Carver</label>
  </fieldset>
  <fieldset class="ds-c-fieldset">
    <legend class="ds-c-label">Select a historical figure</legend>
    <input class="ds-c-choice ds-c-choice--inverse" id="truth-4" type="radio" name="historical-figures-4" value="truth" checked>
    <label for="truth-4">Sojourner Truth</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="douglass-4" type="radio" name="historical-figures-4" value="douglass">
    <label for="douglass-4">Frederick Douglass</label>
    <input class="ds-c-choice ds-c-choice--inverse" id="washington-4" type="radio" name="historical-figures-4" value="washington">
    <label for="washington-4">Booker T. Washington</label>
  </fieldset>
</div>

Style guide: components.choice.inversed
*/
.ds-c-choice { left: -999em; opacity: 0; position: absolute; }

.ds-c-choice + label { cursor: pointer; display: block; font-weight: 400; margin: 8px 0; max-width: 31em; min-height: 32px; padding-left: 40px; padding-top: 4px; position: relative; }

.ds-c-choice + label::before { background-color: #ffffff; border: 2px solid #212121; box-sizing: border-box; content: '\a0'; height: 32px; left: 0; line-height: 32px; position: absolute; text-indent: 0.15em; top: 0; width: 32px; }

.ds-c-choice--inverse + label::before { background-color: #112e51; border-color: #ffffff; }

.ds-c-choice:focus + label::before { box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px #3e94cf; }

.ds-c-choice--inverse:focus + label::before { box-shadow: 0 0 0 2px #112e51, 0 0 2px 4px #59bcff; }

.ds-c-choice:checked + label::before { background-color: #0071bc; background-image: url("images/checkmark-white.svg"); background-position: 50%; background-repeat: no-repeat; background-size: 24px; border-color: #0071bc; }

.ds-c-choice:disabled + label { color: #757575; }

.ds-c-choice:disabled + label::before { background-color: #d6d7d9; border: 1px solid #aeb0b5; cursor: not-allowed; }

.ds-c-choice--inverse:disabled + label { color: #bac5cf; }

.ds-c-choice--inverse:disabled + label::before { background-color: rgba(186, 197, 207, 0.15); box-shadow: 0 0 0 1px #bac5cf; }

.ds-c-choice[type=radio] + label::before { border-radius: 100%; }

/*
Right-to-Left

Markup:
<div class="ds-u-clearfix">
  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-border--2 ds-u-float--left">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Right to left</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select desired fruits</span>
      <input class="ds-c-choice ds-c-choice--right" id="apple-1" type="checkbox" name="fruit-1" value="apple" checked>
      <label for="apple-1">Apple</label>
      <input class="ds-c-choice ds-c-choice--right" id="banana-1" type="checkbox" name="fruit-1" value="banana">
      <label for="banana-1">Banana</label>
      <input class="ds-c-choice ds-c-choice--right" id="fig-1" type="checkbox" name="fruit-1" value="fig">
      <label for="fig-1">Fig</label>
      <input class="ds-c-choice ds-c-choice--right" id="plum-1" type="checkbox" name="fruit-1" disabled>
      <label for="plum-1">Plum</label>
    </fieldset>
  </div>
  <div class="ds-u-padding--2 ds-u-text-align--right ds-u-float--left ds-u-margin-left--2 ds-base--inverse">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Right to left</legend>
      <span class="ds-c-field__hint ds-c-field__hint--inverse ds-u-margin-bottom--1">Select desired fruits</span>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="apple-2" type="radio" name="fruit-2" value="apple" checked>
      <label for="apple-2">Apple</label>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="banana-2" type="radio" name="fruit-2" value="banana">
      <label for="banana-2">Banana</label>
      <input class="ds-c-choice ds-c-choice--right ds-c-choice--inverse" id="fig-2" type="radio" name="fruit-2" value="fig">
      <label for="fig-2">Fig</label>
    </fieldset>
  </div>
</div>

Style guide: components.choice.rtl
*/
.ds-c-choice--right + label { padding-left: 0; padding-right: 40px; }

.ds-c-choice--right + label::before { left: auto; right: 0; }

/*
Size variants

Markup:
<div class="ds-u-clearfix">
  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Size variants</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
      <input class="ds-c-choice" id="normal-1" type="checkbox" name="size-1" value="normal" checked>
      <label for="normal-1">Normal</label>
      <input class="ds-c-choice ds-c-choice--small" id="small-1" type="checkbox" name="size-1" value="small">
      <label for="small-1">Small</label>
    </fieldset>
  </div>
  <div class="ds-u-padding--2 ds-u-border--2 ds-u-float--left ds-u-margin-left--2">
    <fieldset class="ds-c-fieldset ds-u-margin-top--0">
      <legend class="ds-c-label">Size variants</legend>
      <span class="ds-c-field__hint ds-u-margin-bottom--1">Select a size</span>
      <input class="ds-c-choice" id="normal-2" type="radio" name="size-2" value="normal" checked>
      <label for="normal-2">Normal</label>
      <input class="ds-c-choice ds-c-choice--small" id="small-2" type="radio" name="size-2" value="small">
      <label for="small-2">Small</label>
    </fieldset>
  </div>
</div>

Style guide: components.choice.size
*/
.ds-c-choice--small + label { min-height: 20px; padding-left: 28px; padding-top: 0; }

.ds-c-choice--small + label::before { height: 20px; top: 2px; width: 20px; }

.ds-c-choice--small:checked + label::before { background-size: 20px; }

.ds-c-choice--small.ds-c-choice--right + label { padding-left: 0; padding-right: 28px; }

/*
`<ChoiceList>`

@react-component ChoiceList

Style guide: components.choice.choicelist
*/
/*
`<Choice>`

@react-component Choice

Style guide: components.choice.react
*/
/*
---

## When to use

**Checkboxes**

- When a user can select any number of choices from a set list.
- When a user needs to choose “yes” or “no” on only one option (use a stand-alone checkbox). For example, to toggle a setting on or off.
- When users need to see all the available options at a glance.
- When users should be able to select zero of the options.

**Radio buttons**

- When users need to select only one option out of a set of mutually exclusive choices.

## When to consider alternatives

- If there are too many options to display on a mobile screen. Consider a `select` menu if you don’t have enough space to list out all available options, and if the user can only select one of the options.
- Never use radio buttons for optional questions, since once a radio button is selected from a list, it or another choice will remain selected.

## Guidance

- Don't rely on the visual difference between radio buttons and checkboxes. Make it clear with words when users can select one or multiple options.
- Users should be able to tap on or click on either the text label or the checkbox to select or deselect an option.
- In general, list choices vertically; horizontal listings can make it difficult to tell which label pertains to which choice. An exception is where you have binary choices with short labels, like 'Yes / No'. The convention here is for horizontal alignment.
- Avoid using negative language in labels as they can be counterintuitive. For example, “I want to receive a promotional email” instead of “I don’t want to receive promotional email.”
- Use caution if you decide to set a default value. Setting a default value can discourage users from making conscious decisions, seem pushy, or alienate users who don’t fit into your assumptions. In addition, you'll never know if the user explicitly chose that option or just didn't notice the question. If you're unsure, leave nothing selected by default.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Surround a related set of choices with a `<fieldset>`. The `<legend>` provides context for the grouping. Do not use `fieldset` and `legend` for a single checkbox.
- Some screen readers read the `legend` text for each `fieldset`, so it should be brief and descriptive.
- Each input should have a semantic `id` attribute, and its corresponding `label` should have the same value in its `for` attribute.
- The custom checkboxes and radio buttons here are accessible to screen readers because the default fields are moved off-screen.

## Theming

The following Sass variables can be overridden to theme choice fields:

- `$choice-border-width`
- `$choice-border-color`
- `$choice-border-color-inverse`
- `$choice-checked-background-color`

## Related patterns

- [Select menu]({{root}}/components/select)

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- [GOV.UK Checkbox/Radio buttons discussion](https://paper.dropbox.com/doc/Radio-buttons-oIwWoxwBKClt5IXvDbnpF)
- ["We've updated the radios and checkboxes on GOV.UK"](https://designnotes.blog.gov.uk/2016/11/30/weve-updated-the-radios-and-checkboxes-on-gov-uk/)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)

Style guide: components.choice.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Select

A select field allows users to select one option from a list.

@uswds https://standards.usa.gov/components/form-controls/#dropdown

Markup:
<label class="ds-c-label ds-u-margin-top--0" for="options">Field label</label>
<select class="ds-c-field ds-c-field--select" name="options" id="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>
<div class="ds-base ds-base--inverse ds-u-padding--2 ds-u-margin-top--2">
  <label class="ds-c-label ds-u-margin-top--0" for="options-inverse">
    Field label
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
  </label>
  <select class="ds-c-field ds-c-field--select ds-c-field--inverse" name="options-inverse" id="options-inverse">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
  </select>
</div>

Style guide: components.select
*/
.ds-c-field--select { appearance: none; background-color: #ffffff; background-image: url("images/arrow-both.svg"); background-position: right 14px center; background-repeat: no-repeat; background-size: 14px; }

.ds-c-field--select[multiple] { background-image: none; }

/*
`<ChoiceList>`

@react-component ChoiceList

Style guide: components.select.choicelist
*/
/*
`<Select>`

@react-component Select

Style guide: components.select.react
*/
/*
---

### When to use

- Use sparingly — only when a user needs to choose from about 7 to 15 possible options and you have limited space to display the options.

### When to consider alternatives

- If the list of options is short. Use [radio buttons or checkboxes]({{root}}/components/choice) instead.
- If the list of options is very long. Let users type the same information into a [text input]({{root}}/components/text-field) that suggests possible options instead. Long lists can sometimes be broken into multiple shorter lists by asking a few questions up-front to filter out options.
- If you need to allow users to select more than one option at once. Users often don’t understand how to select multiple items from dropdowns. Use checkboxes instead.
- If the data is highly familiar to users, such as the day, month, or year of their birth.

## Guidance

- Choose a sensible order for the options to enable visual scanning of the lists.
- Test dropdowns thoroughly with members of your target audience. Several usability experts suggest they should be the “UI of last resort.” Many users find them confusing and difficult to use.
- Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.
- When most users will (or should) pick a particular option, make it the default: `<option selected="selected">Default</option>`
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Make sure your dropdown has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the dropdown read “Select a state” by default).
- Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.
- On some devices the list of options cannot be zoomed, which means that some people with visual impairments cannot use them.

## Related patterns

- [Checkbox and Radio]({{root}}/components/choice)
- [Text field]({{root}}/components/text-field)

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)
- [Dropdowns: Design Guidelines](https://www.nngroup.com/articles/drop-down-menus/)

Style guide: components.select.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Form label/legend

Markup:
<label class="ds-c-label" for="field-id">Label text</label>
*/
.ds-c-label { display: block; font-size: 16px; font-weight: 400; margin-bottom: 0; margin-top: 24px; max-width: 460px; padding: 0; }

.ds-c-fieldset > .ds-c-label:first-child { margin-top: 0; }

/*
Hint text

(docs stolen from Gov.UK)

- don’t use placeholder text in form fields, as this will disappear once content is entered into the form field
- use hint text for supporting contextual help, this will always be shown
- hint text should sit above a form field
- ensure hint text can be read correctly by screen readers
*/
.ds-c-field__hint { color: #757575; display: block; }

.ds-c-field__hint--inverse { color: #bac5cf; }

/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
List

Lists organize written information for users.

@uswds https://standards.usa.gov/components/typography/#lists

Markup:
<h2 class="ds-h6" id="unordered-list-id">Unordered list title</h2>
<ul class="ds-c-list {{modifier}}" aria-labelledby="unordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ul>
<h2 class="ds-h6" id="ordered-list-id">Ordered list title</h2>
<ol class="ds-c-list {{modifier}}" aria-labelledby="ordered-list-id">
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

.ds-c-list--bare - Unstyled list (no `margin`, `padding` or `list-style`)

Style guide: components.list
*/
.ds-c-list { margin-bottom: 16px; margin-top: 16px; padding-left: 32px; }

.ds-c-list li { line-height: 1.5; margin-bottom: 8px; }

.ds-c-list li:last-child { margin-bottom: 0; }

.ds-c-list--bare { list-style: none; margin: 0; padding: 0; }

/*
---

## When to use

- Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.
- Use unordered lists to display text in no specific order.

## When to consider alternatives

- If you need to communicate long lists of narrative text.

## Guidance

- Use sentence case and begin lists with a capital letter.
- Use punctuation appropriate to the text. Do not leave sentences without periods.

## Accessibility
- When a list has a heading, consider adding an `id` attribute to the heading element, and an `aria-labelledby` attribute to the list element. Screen readers will then announce the heading text when users navigate to the list.

## Learn more

- [18F Content Guide \- Bulleted lists](https://content-guide.18f.gov/punctuation/#bulleted-lists)

Style guide: components.list.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Skip Nav

Skip navigation links allow users with screen readers to bypass long navigation lists. Make sure you include an `id` at the beginning of your main content and that it matches the skipnav link. Find more information here: [webaim.org/techniques/skipnav](http://webaim.org/techniques/skipnav/)

Markup:
<a class="ds-c-skip-nav" href="#main">Skip to main content</a>
<a href="javascript:void(0);">Navigation link</a>
<main id="main" class="ds-u-padding--4 ds-u-fill--gray-lightest" tabindex="0">
  Main content
</main>

Style guide: components.skip-nav
*/
.ds-c-skip-nav { left: 0; padding: 8px 16px; position: absolute; top: -96px; z-index: 100; }

.ds-c-skip-nav:focus { background-color: #ffffff; left: 0; top: 0; }

/*
`<SkipNav>`

@hide-example

@react-component SkipNav

Style guide: components.skip-nav.react
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Spinner

Spinners signify that the application is waiting for an asynchronous operation to complete.

@status alpha

Markup:
<span class="ds-c-spinner ds-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-c-spinner--big" aria-valuetext="Loading" role="progressbar"></span>

Style guide: components.spinner
*/
.ds-c-spinner { height: 32px; width: 32px; box-sizing: border-box; display: inline-block; position: relative; }

.ds-c-spinner::before, .ds-c-spinner::after { border-width: 4px; height: 32px; left: 0px; top: 0px; width: 32px; }

.ds-c-spinner::before, .ds-c-spinner::after { border-radius: 50%; border-style: solid; box-sizing: border-box; content: ''; display: block; left: 0; position: absolute; top: 0; }

.ds-c-spinner::before { border-color: inherit; opacity: 0.2; }

.ds-c-spinner::after { animation: spin 0.8s infinite linear; border-bottom-color: transparent; border-left-color: inherit; border-right-color: transparent; border-top-color: transparent; transform: translateZ(0); }

.ds-c-button > .ds-c-spinner { fill: currentColor; height: 1em; margin-bottom: -0.1em; margin-top: -0.1em; position: relative; top: -0.1em; vertical-align: middle; width: 1em; height: 1em; width: 1em; }

.ds-c-button > .ds-c-spinner::before, .ds-c-button > .ds-c-spinner::after { border-width: 0.125em; height: 1em; left: 0em; top: 0em; width: 1em; }

.ds-c-spinner--filled { height: 48px; width: 48px; background-color: #ffffff; border-radius: 50%; color: #212121; height: 48px; width: 48px; }

.ds-c-spinner--filled::before, .ds-c-spinner--filled::after { border-width: 4px; height: 32px; left: 8px; top: 8px; width: 32px; }

.ds-c-spinner--small { height: 16px; width: 16px; }

.ds-c-spinner--small::before, .ds-c-spinner--small::after { border-width: 2px; height: 16px; left: 0px; top: 0px; width: 16px; }

.ds-c-spinner--small.ds-c-spinner--filled { height: 24px; width: 24px; }

.ds-c-spinner--small.ds-c-spinner--filled::before, .ds-c-spinner--small.ds-c-spinner--filled::after { border-width: 2px; height: 16px; left: 4px; top: 4px; width: 16px; }

.ds-c-spinner--big { height: 40px; width: 40px; }

.ds-c-spinner--big::before, .ds-c-spinner--big::after { border-width: 5px; height: 40px; left: 0px; top: 0px; width: 40px; }

.ds-c-spinner--big.ds-c-spinner--filled { height: 56px; width: 56px; }

.ds-c-spinner--big.ds-c-spinner--filled::before, .ds-c-spinner--big.ds-c-spinner--filled::after { border-width: 5px; height: 40px; left: 8px; top: 8px; width: 40px; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

/*
Changing the spinner color

To change the color of the spinner, one only has to change the `color` property of the spinner element. This can be done with the standard Design System [utility classes]({{root}}/utilities/color). The color of the spinner also defaults to `inherit`, so it will take on the color of the text in its parent container.

Markup:
<span class="ds-c-spinner ds-u-color--primary" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-u-color--success" aria-valuetext="Loading" role="progressbar"></span>
<span class="ds-c-spinner ds-u-color--muted" aria-valuetext="Loading" role="progressbar"></span>

Style guide: components.spinner.colors
*/
/*
Use inside buttons

Markup:
<button class="ds-c-button">
  <span class="ds-c-spinner ds-c-spinner--small" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="ds-c-button ds-c-button--primary">
  <span class="ds-c-spinner ds-c-spinner--small ds-c-spinner--inverse" aria-valuetext="Loading" role="progressbar"></span> Loading
</button>
<button class="ds-c-button ds-c-button--outline ds-c-button--big">
  <span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span> Big button
</button>
<button class="ds-c-button ds-c-button--success ds-c-button--big">
  <span class="ds-c-spinner" aria-valuetext="Loading" role="progressbar"></span> Big green button
</button>

Style guide: components.spinner.buttons
*/
/*
"Filled" mode

To provide more contrast when being rendered over other content, the `ds-c-spinner--filled` class can be added to give it an appropriately shaped background with some padding.

Markup:
<div class="ds-u-fill--background-inverse ds-u-color--base-inverse ds-u-padding--2" style="position: relative">
  <p>{{lorem-l}}</p>
  <div class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0">
    <span class="ds-c-spinner ds-c-spinner--filled" aria-valuetext="Loading" role="progressbar"></span>
  </div>
</div>
<div class="ds-u-padding--2" style="position: relative">
  <p>{{lorem-l}}</p>
  <div class="ds-u-display--flex ds-u-justify-content--center ds-u-align-items--center" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0">
    <span class="ds-c-spinner ds-c-spinner--filled ds-u-fill--background-inverse ds-u-color--base-inverse" aria-valuetext="Loading" role="progressbar"></span>
  </div>
</div>

Style guide: components.spinner.background
*/
/*
`<Spinner>`

@react-component Spinner

Style guide: components.spinner.react
*/
/*
---

## When to use

- To indicate a loading state for quick asynchronous tasks

## When to consider alternatives

- When the process it is waiting for takes a long time. Spinners provide no feedback other than that _we're waiting_, so long processes can make users nervous that something went wrong. Consider adding descriptive text or another UX pattern entirely.
- When you are loading a whole page of content. If all you show the user is a spinner, the user may spend several seconds watching the spinner to be surprised with all the content all at once. Consider using a [_skeleton screen_](https://www.lukew.com/ff/entry.asp?1797) so the user knows what to expect.

## Guidance

- If the process takes a long time, use something else.

## Accessibility

- The Spinner element should have an [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) attribute with a value of `loading` to provide a human readable text alternative for screen readers.
- When placed within a parent container, the parent element should include several ARIA attributes: `aria-relevant`, `aria-live`, and optionally `aria-atomic`.
  - `aria-relevant` may include `additions`, `text`, and `removals`. If a section will have items added or removed, use `additions removals`. If there will be additions or text changes without explicit removals, use `additions text`.
  - `aria-live` should be set to `polite` for a screen reader to speak the changes whenever the user is idle. `aria-live="assertive"` should only be used in situations that require a user&rsquo;s immediate attention.
  - By default, a screen reader will only speak the contents of a changed node, and not the entire contents of the element. Set `aria-atomic="true"` for cases, such as an address, where a screen reader should read the contents of the entire element.

## Learn more

- [Response Times](https://www.nngroup.com/articles/response-times-3-important-limits/)
- [Progress Indicators](https://www.nngroup.com/articles/progress-indicators/)
- [GOV.UK Loading patterns discussion](https://paper.dropbox.com/doc/Loading-patterns-v0x8Xych1PbZQXOlbP3L6)
- [Avoid the Spinner](https://www.lukew.com/ff/entry.asp?1797)
- [ARIA Live Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)

Style guide: components.spinner.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Table

Tables show tabular data in columns and rows.

@uswds https://standards.usa.gov/components/tables/

Markup:
<table class="ds-c-table {{modifier}}">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th class="ds-u-text-align--right" scope="col">Rate</th>
      <th scope="col">Favorite fruit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Fred</td>
      <td class="ds-u-text-align--right">51.25%</td>
      <td>Apples</td>
    </tr>
    <tr>
      <td>Tamara</td>
      <td class="ds-u-text-align--right">98.70%</td>
      <td>Strawberries</td>
    </tr>
  </tbody>
</table>

.ds-c-table--borderless - Borderless table

Style guide: components.table
*/
.ds-c-table { border-collapse: collapse; border-spacing: 0; margin: 0; min-width: 100%; }

.ds-c-table td { background-color: #ffffff; }

.ds-c-table th, .ds-c-table thead td { background-color: #f1f1f1; text-align: left; }

.ds-c-table tbody th { font-weight: 400; }

.ds-c-table th, .ds-c-table td { border: 1px solid #5b616b; padding: 1.5rem; }

.ds-c-table--borderless thead tr { background-color: transparent; }

.ds-c-table--borderless thead th { border-top: 0; }

.ds-c-table--borderless th, .ds-c-table--borderless td { border-left: 0; border-right: 0; }

.ds-c-table__caption { font-weight: 700; margin-bottom: 8px; text-align: left; }

/*
Table with two headers and a caption

Markup:
<table class="ds-c-table {{modifier}}">
  <caption class="ds-c-table__caption">Household members</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Street</th>
      <th scope="col">Employer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">John Doe</th>
      <td>123 Braavos Ave.</td>
      <td>Acme Co.</td>
    </tr>
    <tr>
      <th scope="row">Jane Doe</th>
      <td>456 King's Landing</td>
      <td>Acme Co.</td>
    </tr>
  </tbody>
</table>

Style guide: components.table.complex
*/
/*
---

## When to use

- When you need tabular information, such as statistical data.
- When users need to compare sets of information.

## When to consider alternatives

- Depending on the type of content, consider using other presentation formats such as definition lists or hierarchical lists.
- If you're writing out name / value pairs, there's often a more compact way compared to using a table.

## Guidance

- Right-align numerical data in tables. You can use a [text alignment utility class]({{root}}/utilities/text-align) for this. This makes it easier to scan and compare values.

## Accessibility

- Tables can have two levels of headers. Each header cell should have `scope="col"` or `scope="row"`. [Learn more about the "scope" attribute.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope)
- Complex tables are tables with more than two levels of headers. Each header should be given a unique `id` and each data cell should have a `headers` attribute with each related header cell’s `id` listed.
- When adding a title to a table, include it in a `<caption>` tag inside of the `<table>` element.

## Learn more

- [W3C Web Accessibility Tutorial \- Table Concepts](https://www.w3.org/WAI/tutorials/tables/)
- [Design Better Data Tables](https://medium.com/mission-log/design-better-data-tables-430a30a00d8c)

Style guide: components.table.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Tabs

Tabs are a secondary navigation pattern, allowing a user to view only the content they're interested in. They build upon a real world metaphor, and the selected state simulates a folder being physically in front of others in the group.

@status beta

Markup:
<div class="ds-c-tabs" role="tablist" aria-label="Settings">
  <a
    class="ds-c-tabs__item"
    href="#panel-profile"
    role="tab"
    aria-selected="true"
    aria-controls="panel-profile"
    id="tab-profile"
  >
    <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
      <use xlink:href="{{root}}/public/images/symbols.svg#placeholder"></use>
    </svg>Profile
  </a>
  <a
    class="ds-c-tabs__item"
    href="#panel-comms"
    role="tab"
    aria-selected="false"
    aria-controls="panel-comms"
    id="tab-comms"
  >
    <svg class="ds-u-margin-right--1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24">
      <use xlink:href="{{root}}/public/images/symbols.svg#placeholder"></use>
    </svg>Communication preferences
  </a>
</div>
<div class="ds-c-tabs__panel" id="panel-profile" aria-labelledby="tab-profile" role="tabpanel">
  Note: This is just an example of the HTML markup. See the React example for
  a functioning example.
</div>
<div class="ds-c-tabs__panel" id="panel-comms" aria-hidden="true" aria-labelledby="tab-comms" aria-selected="false" role="tabpanel">
  Communication preferences content
</div>

Style guide: components.tabs
*/
/*
`<Tabs>`

@react-component Tabs

Style guide: components.tabs.react-tabs
*/
.ds-c-tabs { border-bottom: 1px solid #d6d7d9; display: flex; }

/*
`<TabPanel>`

@hide-example

@react-component TabPanel

Style guide: components.tabs.react-tabpanel
*/
.ds-c-tabs__panel { background-color: #ffffff; border-bottom: 1px solid #d6d7d9; border-left: 1px solid #d6d7d9; border-right: 1px solid #d6d7d9; padding: 24px; }

.ds-c-tabs__panel[aria-hidden='true'] { /* stylelint-disable declaration-no-important */ display: none !important; }

/*
`<Tab>`

@react-component Tab

Style guide: components.tabs.react-tab
*/
.ds-c-tabs__item { background-color: #ffffff; border-bottom: 1px solid #d6d7d9; border-left: 1px solid #d6d7d9; border-top: 1px solid #d6d7d9; color: #212121; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 700; line-height: 1; margin-bottom: -1px; padding: 16px 8px; position: relative; text-decoration: none; transition: border-bottom-color 0.3s cubic-bezier(1, 0, 0, 1); }

@media (min-width: 544px) { .ds-c-tabs__item { padding-left: 16px; padding-right: 16px; } }

@media (min-width: 768px) { .ds-c-tabs__item { font-size: 16px; padding-left: 24px; padding-right: 24px; } }

.ds-c-tabs__item:last-child { border-right: 1px solid #d6d7d9; }

.ds-c-tabs__item::after { background-color: #0071bc; content: ''; height: 4px; left: -1px; opacity: 0; position: absolute; right: -1px; top: -1px; transform: scale3d(0, 1, 1); transition: opacity 0.3s cubic-bezier(1, 0, 0, 1), transform 0.3s cubic-bezier(1, 0, 0, 1); }

.ds-c-tabs__item[aria-selected='true'] { border-bottom-color: #ffffff; color: #0071bc; pointer-events: none; }

.ds-c-tabs__item[aria-selected='true']::after { opacity: 1; transform: scale3d(1, 1, 1); }

.ds-c-tabs__item:focus, .ds-c-tabs__item:hover { color: #0071bc; }

.ds-c-tabs__item:active { color: #205493; }

.ds-c-tabs__item > svg { fill: currentColor; height: 1em; margin-bottom: -0.1em; margin-top: -0.1em; position: relative; top: -0.1em; vertical-align: middle; width: 1em; }

/*
---

## When to use

- If you have sub-sections of a page, and there's the need to only show one sub-section at a time.

## When to consider alternatives

- If you have more than four tabs. Consider using a different pattern if your content requires being split into more than four panels.
- If the panel contents can be displayed at once. This will improve the scanability of your page's content and it's more likely the user will be able to find what they're looking for. Typography, including clear section headers, should be enough to allow the user to navigate the page.

## Guidance

- Avoid overflowing tabs to new lines. If the tabs can't fit on one row on small screens, consider using utility classes to apply additional responsive styles or use a different pattern.
- Tab labels should be descriptive of their content and set the user's expectations.
- Tab labels should be short — aim for no more than two words.

## Accessibility

- Use an anchor link (`a`) to create the tabs. This allows you to link directly to a tab, and allows you to progressively enhance the page, retaining default browser behavior like opening links in a new window. _Note: You'll need to implement the logic for selecting the correct tab based on the current URL._
- Ensure the HTML markup includes the proper ARIA attributes:
  - For tabs: `role`, `aria-selected`, `aria-controls`
  - For the tabs list parent: `role`, `aria-label`
  - For a tab panel: `role`, `aria-labelledby`

## Related patterns

- [Vertical navigation]({{root}}/components/vertical-nav)

## Learn more

- [How Tabs Should Work](https://24ways.org/2015/how-tabs-should-work/)
- [Simple ARIA tab interface](http://heydonworks.com/practical_aria_examples/#tab-interface)

Style guide: components.tabs.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Text field

@uswds https://standards.usa.gov/components/form-controls/#text-input

Text fields allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted). Text fields can span single or multiple lines.

Markup:
<label class="ds-c-label ds-u-margin-top--0" for="input-firstname">First name</label>
<input class="ds-c-field" id="input-firstname" name="firstname" type="text">
<label class="ds-c-label" for="input-lastname">
  <span class="ds-u-font-weight--bold">Last name</span>
  <span class="ds-c-field__hint ds-u-color--error" role="alert">
    Please enter your last name
  </span>
  <span class="ds-c-field__hint">Helpful hint text</span>
</label>
<input class="ds-c-field ds-c-field--error" id="input-lastname" name="lastname" type="text" />
<label class="ds-c-label" for="input-username">
  Username
  <span class="ds-c-field__hint">Example of a success field state</span>
</label>
<input class="ds-c-field ds-c-field--success" id="input-username" name="username" type="text" value="johnsnow">
<label class="ds-c-label" for="input-bio">Bio</label>
<textarea class="ds-c-field" id="input-bio" name="bio" rows="5"></textarea>
<label class="ds-c-label" for="input-id-num">
  ID Number
  <span class="ds-c-field__hint">
    Example of a disabled field
  </span>
</label>
<input class="ds-c-field ds-c-field--inverse" id="input-id-num" name="id-num" type="text" value="1234" disabled>

Style guide: components.text-field
*/
.ds-c-field { appearance: none; border: 1px solid #212121; border-radius: 3px; box-sizing: border-box; color: #212121; display: block; font-size: 16px; line-height: 1.3; margin: 4px 0; max-width: 460px; outline: none; padding: 8px; width: 100%; }

.ds-c-field:disabled { background-color: #d6d7d9; border-width: 0; }

.ds-c-field:focus { box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf; }

/*
---

Markup:
<div class="ds-base--inverse ds-u-padding--2">
  <label class="ds-c-label ds-u-margin-top--0" for="input-firstname-2">First name</label>
  <input class="ds-c-field ds-c-field--inverse" id="input-firstname-2" name="firstname" type="text">
  <label class="ds-c-label" for="input-lastname-2">
    <span class="ds-u-font-weight--bold">Last name</span>
    <span class="ds-c-field__hint ds-u-color--error-light" role="alert">
      Please enter your last name
    </span>
    <span class="ds-c-field__hint ds-c-field__hint--inverse">Helpful hint text</span>
  </label>
  <input class="ds-c-field ds-c-field--inverse ds-c-field--error" id="input-lastname-2" name="lastname" type="text">
  <label class="ds-c-label" for="input-username-2">Username</label>
  <input class="ds-c-field ds-c-field--inverse ds-c-field--success" id="input-username-2" name="username" type="text">
  <label class="ds-c-label" for="input-id-num-2">
    ID Number
    <span class="ds-c-field__hint ds-c-field__hint--inverse">
      Example of a disabled field
    </span>
  </label>
  <input class="ds-c-field ds-c-field--inverse" id="input-id-num-2" name="id-num-2" type="text" value="1234" disabled>
</div>

Style guide: components.text-field.inverse
*/
.ds-c-field--inverse { border-color: #000000; }

.ds-c-field--inverse:focus { box-shadow: 0 0 3px #59bcff, 0 0 7px #59bcff; }

.ds-c-field--error { border: 3px solid #e31c3d; }

.ds-c-field--success { border: 3px solid #4aa564; }

/*
`<TextField>`

@react-component TextField

Style guide: components.text-field.react
*/
/*
---

## When to use

- If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers.
- When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
- When users want to paste in a response.

## When to consider alternatives

- When users are choosing from a specific set of options. Consider [checkboxes, radio buttons]({{root}}/components/choice), or a [select menu]({{root}}/components/select) in these cases.

## Guidance

- Don't use placeholder text in form fields. Use hint text instead, if you need to provide contextual information. Placeholder text disappears after a user types a value, therefore users will no longer have that text available when they need to review their entries. People who have cognitive or visual disabilities have additional problems with placeholder text.
- The length of the text field provides a hint to users as to how much text to write. Do not require users to write paragraphs of text into a single-line `input` box; use a `textarea` instead.
- Text fields are among the easiest type of input for desktop users but are more difficult for mobile users.
- Only show error messages or styling after a user has interacted with a particular field.

**[View the "Forms" guidelines for additional guidance and best practices.]({{root}}/guidelines/forms/)**

## Accessibility

- Group each set of thematically related controls in a `fieldset` element. Use the `legend` element to offer a label within each `fieldset`. The `fieldset` and `legend` elements make it easier for screen reader users to navigate the form.
- Keep your form blocks in a vertical pattern. This approach is ideal, from an accessibility standpoint, because of limited vision that makes it hard to scan from left to right.

## Theming

The following Sass variables can be overridden to theme a field:

- `$color-focus`
- `$color-focus-inverse`
- `$focus-shadow`
- `$focus-shadow-inverse`
- `$input-border-color`
- `$input-border-color-inverse`
- `$input-border-radius`
- `$input-line-height`
- `$input-border-width`
- `$input-padding`

## Learn more

- [Form Guidelines]({{root}}/guidelines/forms/)
- ["Placeholders in Form Fields Are Harmful"](https://www.nngroup.com/articles/form-design-placeholders/)
- [Asking for a date of birth](https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/)
- [GOV.UK text boxes discussion](https://paper.dropbox.com/doc/Text-boxes-8NLlgz9tjR8OzTz2N9wE3)
- [Four steps for choosing form elements on the Web (PDF)](http://www.formsthatwork.com/files/Articles/dropdown.pdf)

Style guide: components.text-field.guidance
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Vertical navigation

Hierarchical, vertical navigation.

@uswds https://standards.usa.gov/components/sidenav/

Markup:
<ul class="ds-c-vertical-nav">
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Parent link</a>
  </li>
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current" href="javascript:void(0);">Current page</a>
    <ul class="ds-c-vertical-nav__subnav">
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
      </li>
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
        <ul class="ds-c-vertical-nav__subnav">
          <li class="ds-c-vertical-nav__item">
            <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Grandchild link</a>
          </li>
          <li class="ds-c-vertical-nav__item">
            <a class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current" href="javascript:void(0);">Grandchild link</a>
          </li>
        </ul>
      </li>
      <li class="ds-c-vertical-nav__item">
        <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Child link</a>
      </li>
    </ul>
  </li>
  <li class="ds-c-vertical-nav__item">
    <a class="ds-c-vertical-nav__label" href="javascript:void(0);">Parent link</a>
  </li>
</ul>

Style guide: components.vertical-nav
*/
.ds-c-vertical-nav { list-style: none; margin: 0; padding: 0; }

.ds-c-vertical-nav > .ds-c-vertical-nav__item { background-color: transparent; border-top: 1px solid #5b616b; }

.ds-c-vertical-nav > .ds-c-vertical-nav__item:first-child { border-top: 0; }

.ds-c-vertical-nav__item { position: relative; }

.ds-c-vertical-nav__label { border-left: 4px solid transparent; color: #212121; display: block; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 1.3; padding: 8px 16px; text-align: left; text-decoration: none; }

.ds-c-vertical-nav__label--current { border-left-color: #0071bc; color: #0071bc; font-weight: 700; }

.ds-c-vertical-nav__label--parent { appearance: none; background-color: transparent; background-image: url("images/arrow-down.svg"); background-position: right 8px center; background-repeat: no-repeat; background-size: 14px; border-bottom: 0; border-right: 0; border-top: 0; cursor: pointer; padding-right: 40px; width: 100%; }

.ds-c-vertical-nav__label--parent[aria-expanded='true'] { background-image: url("images/arrow-up.svg"); }

/* stylelint-disable-next-line selector-no-qualifying-type */
a.ds-c-vertical-nav__label:hover, .ds-c-vertical-nav__label--parent:hover { background-color: #f1f1f1; color: #0071bc; text-decoration: none; }

.ds-c-vertical-nav__subnav { list-style: none; margin: 0; padding: 0; }

.ds-c-vertical-nav__subnav .ds-c-vertical-nav__label { font-size: 14px; line-height: 1.3; padding-left: 24px; }

.ds-c-vertical-nav__subnav .ds-c-vertical-nav__label--current { border-color: transparent; }

.ds-c-vertical-nav__subnav .ds-c-vertical-nav__subnav .ds-c-vertical-nav__label { padding-left: 32px; }

/*
`<VerticalNav>`

@react-component VerticalNav

Style guide: components.vertical-nav.VerticalNav
*/
/*
`<VerticalNavItem>`

@hide-example

@react-component VerticalNavItem

Style guide: components.vertical-nav.VerticalNavItem
*/
/*
---

## When to use

- To display a navigational hierarchy with one to three levels.
- To display the “sub-navigation” within a section of the website.

## When to consider alternatives

- If the site has fewer than five pages, consider organizing the page without a navigational hierarchy.
- If your page already has a horizontal and vertical navigation bar, consider ways to simplify your navigation system.
- If your content is within a frame or sub-area of a page, consider ways to simplify your navigation system.

## Guidance

- Indicate where a user is within the navigational hierarchy. Use the `ds-c-vertical-nav__label--current` modifier to show users which page they have navigated to.
- Keep the navigation links short and follow sentence case. They can be shorter derivatives of page titles themselves.
- If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth.

## Accessibility

- Users should be able to tab through each link.
- If you have nested menus that are collapsible, ensure the toggle button has its `aria-controls` and `aria-expanded` attributes set. This is done automatically for you
if you're using the React components.
- If your navigation list is longer than 3 items, consider using a skip navigation link. This allows screen reader and keyboard users to skip to the main content area(s).
- If a skip navigation link is not an option, consider using:
  * A valid, descriptive page header
  * Landmark regions like `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`
  * A `role` attribute like `<div role="navigation">`

## Related patterns

- [Tabs]({{root}}/components/tabs)

## Learn more

- [18F Content Guide \- Heading capitalization](https://content-guide.18f.gov/capitalization/#headings)
- [18F Content Guide \- Headings and titles](https://content-guide.18f.gov/headings-and-titles/)

Style guide: components.vertical-nav.guidance
*/
/*
Utilities

A utility class modifies a single trait, typically a single CSS property. To apply a trait, or a combination of traits to an element, add the corresponding utility class directly to the HTML element.

Together, they can form a variety of UI patterns. You won't always want to use combinations of utilities to generate more complicated patterns, but the option is there. Once you've identified a set of traits that seem to be reused a lot, it's a good time to consider turning those into a component.

**Format:** `ds-u-[NAME]`

Markup:
<div class="ds-u-fill--primary-alt ds-u-padding--3">
  <p class="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">Hello world</p>
</div>

Weight: 20

Style guide: utilities
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Background color

Use the background color utility to change the default background color of an element.

**Format**: `ds-u-fill--[COLOR NAME]-[SHADE]`

@hide-markup

Markup:
<% var groups = [
  ['primary', 'primary-darker', 'primary-darkest'],
  ['primary-alt', 'primary-alt-dark', 'primary-alt-darkest', 'primary-alt-light', 'primary-alt-lightest'],
  ['gray', 'gray-dark', 'gray-light', 'gray-lighter', 'gray-lightest'],
  ['gold', 'gold-light', 'gold-lighter', 'gold-lightest'],
  ['warn', 'warn-light', 'warn-lighter', 'warn-lightest'],
  ['green', 'green-light', 'green-lighter', 'green-lightest'],
  ['success', 'success-light', 'success-lighter', 'success-lightest'],
  ['secondary', 'secondary-dark', 'secondary-darkest', 'secondary-light', 'secondary-lightest'],
  ['error', 'error-dark', 'error-darkest', 'error-light', 'error-lighter', 'error-lightest'],
  ['base', 'white', 'background', 'background-inverse', 'transparent']
]; -%>
<% groups.forEach(group => { -%>
<div class="ds-l-row ds-u-margin-x--0 ds-u-margin-bottom--7">
<% group.forEach(color => { -%>
  <article class="c-swatch ds-l-col--12 ds-l-sm-col--6 ds-u-padding--0 ds-u-margin-bottom--3">
    <div class="c-swatch__preview c-swatch__preview--condensed ds-u-fill--<%= color %>"></div>
    <code class="c-swatch__label ds-u-font-size--base">
      .ds-u-fill--<%= color %>
    </code>
    <span class="ds-u-color--muted js-swatch-hex">#</span>
  </article>
<% }) -%>
</div>
<% }) %>

Style guide: utilities.background-color
*/
.ds-u-fill--primary { background-color: #0071bc !important; }

.ds-u-fill--primary-darker { background-color: #205493 !important; }

.ds-u-fill--primary-darkest { background-color: #112e51 !important; }

.ds-u-fill--primary-alt { background-color: #02bfe7 !important; }

.ds-u-fill--primary-alt-dark { background-color: #00a6d2 !important; }

.ds-u-fill--primary-alt-darkest { background-color: #046b99 !important; }

.ds-u-fill--primary-alt-light { background-color: #9bdaf1 !important; }

.ds-u-fill--primary-alt-lightest { background-color: #e1f3f8 !important; }

.ds-u-fill--secondary { background-color: #e31c3d !important; }

.ds-u-fill--secondary-dark { background-color: #cd2026 !important; }

.ds-u-fill--secondary-darkest { background-color: #981b1e !important; }

.ds-u-fill--secondary-light { background-color: #e59393 !important; }

.ds-u-fill--secondary-lightest { background-color: #f9dede !important; }

.ds-u-fill--gray { background-color: #5b616b !important; }

.ds-u-fill--gray-dark { background-color: #323a45 !important; }

.ds-u-fill--gray-light { background-color: #aeb0b5 !important; }

.ds-u-fill--gray-lighter { background-color: #d6d7d9 !important; }

.ds-u-fill--gray-lightest { background-color: #f1f1f1 !important; }

.ds-u-fill--gold { background-color: #fdb81e !important; }

.ds-u-fill--gold-light { background-color: #f9c642 !important; }

.ds-u-fill--gold-lighter { background-color: #fad980 !important; }

.ds-u-fill--gold-lightest { background-color: #fff1d2 !important; }

.ds-u-fill--green { background-color: #2e8540 !important; }

.ds-u-fill--green-light { background-color: #4aa564 !important; }

.ds-u-fill--green-lighter { background-color: #94bfa2 !important; }

.ds-u-fill--green-lightest { background-color: #e7f4e4 !important; }

.ds-u-fill--error { background-color: #e31c3d !important; }

.ds-u-fill--error-dark { background-color: #cd2026 !important; }

.ds-u-fill--error-darkest { background-color: #981b1e !important; }

.ds-u-fill--error-light { background-color: #e59393 !important; }

.ds-u-fill--error-lighter { background-color: #efb9b9 !important; }

.ds-u-fill--error-lightest { background-color: #f9dede !important; }

.ds-u-fill--warn { background-color: #fdb81e !important; }

.ds-u-fill--warn-light { background-color: #f9c642 !important; }

.ds-u-fill--warn-lighter { background-color: #fad980 !important; }

.ds-u-fill--warn-lightest { background-color: #fff1d2 !important; }

.ds-u-fill--success { background-color: #2e8540 !important; }

.ds-u-fill--success-light { background-color: #4aa564 !important; }

.ds-u-fill--success-lighter { background-color: #94bfa2 !important; }

.ds-u-fill--success-lightest { background-color: #e7f4e4 !important; }

.ds-u-fill--base { background-color: #212121 !important; }

.ds-u-fill--white { background-color: #ffffff !important; }

.ds-u-fill--background { background-color: #ffffff !important; }

.ds-u-fill--background-inverse { background-color: #112e51 !important; }

.ds-u-fill--transparent { background-color: transparent !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Border

Use the border utility classes to control the border size and color properties.

The border utility class sets the `border-color` and `border-size`, with support for the following sizes: `0`, `1px`, or `2px`.

**Format**: `ds-u-border-[x|y|bottom|left|right|top]--[SIZE]`

@hide-markup

Markup:
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 3; i++) { %>
<div class="ds-u-border<%= name %>--<%= i %> ds-u-margin-y--1 ds-u-padding--1">
  <code class="ds-u-fill--background">ds-u-border<%= name %>--<%= i %></code>
</div>
<% } -%>
<% }) -%>

Style guide: utilities.border
*/
.ds-u-border--1 { border: 1px solid #d6d7d9 !important; }

.ds-u-border-top--1 { border-top: 1px solid #d6d7d9 !important; }

.ds-u-border-right--1 { border-right: 1px solid #d6d7d9 !important; }

.ds-u-border-bottom--1 { border-bottom: 1px solid #d6d7d9 !important; }

.ds-u-border-left--1 { border-left: 1px solid #d6d7d9 !important; }

.ds-u-border-x--1 { border-left: 1px solid #d6d7d9 !important; border-right: 1px solid #d6d7d9 !important; }

.ds-u-border-y--1 { border-bottom: 1px solid #d6d7d9 !important; border-top: 1px solid #d6d7d9 !important; }

.ds-u-border--2 { border: 2px solid #d6d7d9 !important; }

.ds-u-border-top--2 { border-top: 2px solid #d6d7d9 !important; }

.ds-u-border-right--2 { border-right: 2px solid #d6d7d9 !important; }

.ds-u-border-bottom--2 { border-bottom: 2px solid #d6d7d9 !important; }

.ds-u-border-left--2 { border-left: 2px solid #d6d7d9 !important; }

.ds-u-border-x--2 { border-left: 2px solid #d6d7d9 !important; border-right: 2px solid #d6d7d9 !important; }

.ds-u-border-y--2 { border-bottom: 2px solid #d6d7d9 !important; border-top: 2px solid #d6d7d9 !important; }

.ds-u-border--0 { border: 0 !important; }

.ds-u-border-top--0 { border-top: 0 !important; }

.ds-u-border-right--0 { border-right: 0 !important; }

.ds-u-border-bottom--0 { border-bottom: 0 !important; }

.ds-u-border-left--0 { border-left: 0 !important; }

.ds-u-border-x--0 { border-left: 0 !important; border-right: 0 !important; }

.ds-u-border-y--0 { border-bottom: 0 !important; border-top: 0 !important; }

/*
Border color

**Format**: `ds-u-border--[COLOR NAME]`

@hide-markup

Markup:
<% ['inverse',
    'error', 'error-light', 'error-lighter',
    'warn', 'warn-light', 'warn-lighter',
    'success', 'success-light', 'success-lighter'].forEach(color => { -%>
<div <% if (color.match(/(lighte|inverse)/)) { -%>class="ds-u-fill--primary-darkest ds-u-padding--1"<% } -%>>
  <div class="ds-u-border--<%= color %> ds-u-border--2 ds-u-margin-y--1 ds-u-padding--1">
    <code class="ds-u-fill--background">ds-u-border--<%= color %></code>
  </div>
</div>
<% }) -%>

Style guide: utilities.border.color
*/
.ds-u-border--inverse { border-color: #ffffff !important; }

.ds-u-border--error { border-color: #e31c3d !important; }

.ds-u-border--error-light { border-color: #e59393 !important; }

.ds-u-border--error-lighter { border-color: #efb9b9 !important; }

.ds-u-border--warn { border-color: #fdb81e !important; }

.ds-u-border--warn-light { border-color: #f9c642 !important; }

.ds-u-border--warn-lighter { border-color: #fad980 !important; }

.ds-u-border--success { border-color: #2e8540 !important; }

.ds-u-border--success-light { border-color: #4aa564 !important; }

.ds-u-border--success-lighter { border-color: #94bfa2 !important; }

/*
---

## Theming

The following Sass variables can be overridden to theme the border utility:

- `$border-color`
- `$border-color-inverse`

Style guide: utilities.border.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Border radius

Apply rounded corners to an element with the border radius utility.

- `ds-u-radius` applies the default radius (`3px`)
- `ds-u-radius--pill`
- `ds-u-radius--circle` can make a circle when combined with a fixed height and width.

Markup:
<code class="preview__label">ds-u-radius</code>
<div class="ds-u-radius ds-u-fill--primary-alt ds-u-padding--2"></div>
<code class="preview__label">ds-u-radius--pill</code>
<div class="ds-u-radius--pill ds-u-fill--primary-alt ds-u-padding--2"></div>
<code class="preview__label">ds-u-radius--circle</code>
<div class="ds-u-radius--circle ds-u-fill--primary-alt" style="width: 50px; height: 50px;"></div>

Style guide: utilities.border-radius
*/
.ds-u-radius { border-radius: 3px; }

.ds-u-radius--pill { border-radius: 9999px; }

.ds-u-radius--circle { border-radius: 100%; }

/*
---

## Theming

The following Sass variables can be overridden to theme the border radius utility:

- `$border-radius`

Style guide: utilities.border-radius.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

Use the color utility to change an element's text color.

**Format**: `ds-u-color--[COLOR NAME]-[SHADE]`

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, **use only these permitted color combinations**.

@hide-markup

Markup:
<% var groups = {
  'white': [
    'base',
    'muted',
    'black',
    'primary', 'primary-darker', 'primary-darkest',
    'gray',
    'error', 'error-dark',
    'success'
  ],
  'background-inverse': ['base-inverse', 'muted-inverse', 'error-light'],
  'base': ['white'],
  'gray-dark': ['white'],
  'gray': ['white'],
  'primary-darkest': ['white'],
  'primary-darker': ['white'],
  'primary': ['white'],
  'primary-alt-darkest': ['white'],
  'primary-alt-dark': ['base'],
  'primary-alt': ['base'],
  'green': ['white'],
  'success': ['white'],
  'green-light': ['base'],
  'success-light': ['base'],
  'gold': ['base'],
  'warn': ['base'],
  'gold-light': ['base'],
  'warn-light': ['base'],
  'secondary-darkest': ['white'],
  'error-darkest': ['white'],
  'secondary-dark': ['white'],
  'error-dark': ['white'],
  'secondary': ['white'],
  'error': ['white'],
  'gray-light': ['base'],
  'gray-lighter': ['base'],
  'primary-alt-lightest': ['base'],
  'green-lighter': ['base'],
  'success-lighter': ['base'],
  'green-lightest': ['base'],
  'success-lightest': ['base'],
  'gold-lighter': ['base'],
  'warn-lighter': ['base'],
  'gold-lightest': ['base'],
  'warn-lightest': ['base'],
  'secondary-lightest': ['base'],
  'error-lightest': ['base'],
}; -%>
<% Object.keys(groups).forEach(fill => { -%>
<% groups[fill].forEach(color => { -%>
  <div class="ds-u-color--<%= color %> ds-u-fill--<%= fill %> ds-u-padding--1">
    <code class="ds-h3 ds-u-fill--transparent ds-u-color--<%= color %>">ds-u-color--<%= color %></code>
    <br />
    <span class="ds-u-font-size--small">on</span>
    <code class="ds-u-fill--transparent ds-u-color--<%= color %>">ds-u-fill--<%= fill %></code>
  </div>
<% }) -%>
<% }) %>

Style guide: utilities.color
*/
.ds-u-color--primary { color: #0071bc !important; }

.ds-u-color--primary-darker { color: #205493 !important; }

.ds-u-color--primary-darkest { color: #112e51 !important; }

.ds-u-color--gray { color: #5b616b !important; }

.ds-u-color--muted { color: #757575 !important; }

.ds-u-color--error { color: #e31c3d !important; }

.ds-u-color--error-dark { color: #cd2026 !important; }

.ds-u-color--error-light { color: #e59393 !important; }

.ds-u-color--success { color: #2e8540 !important; }

.ds-u-color--base { color: #212121 !important; }

.ds-u-color--base-inverse { color: #ffffff !important; }

.ds-u-color--muted-inverse { color: #bac5cf !important; }

.ds-u-color--black { color: #000000 !important; }

.ds-u-color--white { color: #ffffff !important; }

/*
---

## Accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of [at least 4.5:1](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text.

Style guide: utilities.color.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Display/Visibility

Use the `display` and `visibility` utility classes to show and hide elements.

Style guide: utilities.display-visibility
*/
/*
Display

> The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)

**Format**: `ds-u-display--[VALUE]`

#### Available `display` utilities:

- `ds-u-display--block`
- `ds-u-display--inline-block`
- `ds-u-display--flex`
- `ds-u-display--none`

Markup:
<% ['ds-u-display--block',
  'ds-u-display--inline-block',
  'ds-u-display--flex',
  'ds-u-display--none'].forEach(util => { -%>
<p class="<%= util %> ds-base--inverse ds-u-padding--2"><%= util %></p>
<% }) %>

Style guide: utilities.display-visibility.display
*/
.ds-u-display--block { display: block !important; }

.ds-u-display--inline-block { display: inline-block !important; }

.ds-u-display--flex { display: flex !important; }

.ds-u-display--none { display: none !important; }

/*
Visibility

> The visibility property can be used to hide an element while leaving the space where it would have been. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)

**Format**: `ds-u-visibility--[VALUE]`

#### Available `visibility` utilities:

- `ds-u-visibility--hidden`
- `ds-u-visibility--visible`
- `ds-u-visibility--screen-reader`

#### Accessibility

There may be times when you want to hide an element, but still want its text to be read by a screen reader. The `ds-u-visibility--screen-reader` class will hide the content visually, but provide the content to screen readers.

Markup:
<span class="ds-u-visibility--hidden">I'm hidden</span>
<span class="ds-u-visibility--screen-reader">I'm visible to screen readers only</span>
<span class="ds-u-visibility--visible">I'm visible</span>

Style guide: utilities.display-visibility.visibility
*/
.ds-u-visibility--hidden { visibility: hidden !important; }

.ds-u-visibility--visible { visibility: visible !important; }

.ds-u-visibility--screen-reader { border: 0; clip: rect(0, 0, 0, 0); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }

/*
Toggling visibility by breakpoint

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to show/hide content at specific breakpoints.

A breakpoint prefix is supported on all of the utility classes mentioned above, except for `ds-u-visibility--screen-reader`.

Markup:
<% ['sm', 'md', 'lg', 'xl'].forEach(breakpoint => { %>
  <div class="ds-u-<%= breakpoint %>-display--none ds-u-color--muted">
    Hidden on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-display--block">
    Displayed as block on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-visibility--hidden ds-u-color--muted">
    Invisible on <%= breakpoint %> screens and larger
  </div>
  <div class="ds-u-<%= breakpoint %>-visibility--visible">
    Visible on <%= breakpoint %> screens and larger
  </div>
<% }) %>

Style guide: utilities.display-visibility.responsive
*/
@media (min-width: 544px) { .ds-u-sm-display--block { display: block !important; } .ds-u-sm-display--inline-block { display: inline-block !important; } .ds-u-sm-display--none { display: none !important; } .ds-u-sm-visibility--hidden { visibility: hidden !important; } .ds-u-sm-visibility--visible { visibility: visible !important; } }

@media (min-width: 768px) { .ds-u-md-display--block { display: block !important; } .ds-u-md-display--inline-block { display: inline-block !important; } .ds-u-md-display--none { display: none !important; } .ds-u-md-visibility--hidden { visibility: hidden !important; } .ds-u-md-visibility--visible { visibility: visible !important; } }

@media (min-width: 1024px) { .ds-u-lg-display--block { display: block !important; } .ds-u-lg-display--inline-block { display: inline-block !important; } .ds-u-lg-display--none { display: none !important; } .ds-u-lg-visibility--hidden { visibility: hidden !important; } .ds-u-lg-visibility--visible { visibility: visible !important; } }

@media (min-width: 1280px) { .ds-u-xl-display--block { display: block !important; } .ds-u-xl-display--inline-block { display: inline-block !important; } .ds-u-xl-display--none { display: none !important; } .ds-u-xl-visibility--hidden { visibility: hidden !important; } .ds-u-xl-visibility--visible { visibility: visible !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Flexbox

Use the [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) utility classes to control various flexbox properties. These are especially useful when combined with [flexbox grid]({{root}}/layout/grid#layout.grid.alignment) classes.

#### Usage

For these utility classes to work, first create a flex container &mdash; you can use the [`ds-u-display--flex`]({{root}}/utilities/display-visibility) utility class &mdash; then apply these  utility classes to the container's direct children elements.

Style guide: utilities.flexbox
*/
/*
Justify content

Use the `justify-content` utility class on a flexbox container to change the alignment of its child elements on the main axis (x-axis by default).

> The CSS `justify-content` property defines how the browser distributes space between and around content items along the main axis of their container. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)

The classes follow the format: `ds-u-justify-content--{value}` and `ds-u-{breakpoint}-justify-content--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `start` (browser default)
- `end`
- `center`
- `between`
- `around`

Markup:
<section>
<% ['start','end','center','between','around'].forEach(value => { %>
  <code class="preview__label">ds-u-justify-content--<%= value %></code>
  <article class="ds-u-justify-content--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.justify-content
*/
.ds-u-justify-content--start { justify-content: flex-start !important; }

.ds-u-justify-content--end { justify-content: flex-end !important; }

.ds-u-justify-content--center { justify-content: center !important; }

.ds-u-justify-content--between { justify-content: space-between !important; }

.ds-u-justify-content--around { justify-content: space-around !important; }

@media (min-width: 544px) { .ds-u-sm-justify-content--start { justify-content: flex-start !important; } .ds-u-sm-justify-content--end { justify-content: flex-end !important; } .ds-u-sm-justify-content--center { justify-content: center !important; } .ds-u-sm-justify-content--between { justify-content: space-between !important; } .ds-u-sm-justify-content--around { justify-content: space-around !important; } }

@media (min-width: 768px) { .ds-u-md-justify-content--start { justify-content: flex-start !important; } .ds-u-md-justify-content--end { justify-content: flex-end !important; } .ds-u-md-justify-content--center { justify-content: center !important; } .ds-u-md-justify-content--between { justify-content: space-between !important; } .ds-u-md-justify-content--around { justify-content: space-around !important; } }

@media (min-width: 1024px) { .ds-u-lg-justify-content--start { justify-content: flex-start !important; } .ds-u-lg-justify-content--end { justify-content: flex-end !important; } .ds-u-lg-justify-content--center { justify-content: center !important; } .ds-u-lg-justify-content--between { justify-content: space-between !important; } .ds-u-lg-justify-content--around { justify-content: space-around !important; } }

@media (min-width: 1280px) { .ds-u-xl-justify-content--start { justify-content: flex-start !important; } .ds-u-xl-justify-content--end { justify-content: flex-end !important; } .ds-u-xl-justify-content--center { justify-content: center !important; } .ds-u-xl-justify-content--between { justify-content: space-between !important; } .ds-u-xl-justify-content--around { justify-content: space-around !important; } }

/*
Align items

Use the `align-items` utility class on a flexbox container to change the alignment of its child elements on the cross axis (y-axis by default).

> The CSS `align-items` property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like `justify-content` but in the perpendicular direction. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)

The classes follow the format: `ds-u-align-items--{value}` and `ds-u-{breakpoint}-align-items--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `start`
- `end`
- `center`
- `baseline`
- `stretch` (browser default)

Markup:
<section>
<% ['start','end','center','baseline','stretch'].forEach(value => { %>
  <code class="preview__label">ds-u-align-items--<%= value %></code>
  <article class="ds-u-align-items--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest" style="height: 75px">
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
    <div class="ds-u-fill--white ds-u-margin--1"><%= value %></div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.align-items
*/
.ds-u-align-items--start { align-items: flex-start !important; }

.ds-u-align-items--end { align-items: flex-end !important; }

.ds-u-align-items--center { align-items: center !important; }

.ds-u-align-items--baseline { align-items: baseline !important; }

.ds-u-align-items--stretch { align-items: stretch !important; }

@media (min-width: 544px) { .ds-u-sm-align-items--start { align-items: flex-start !important; } .ds-u-sm-align-items--end { align-items: flex-end !important; } .ds-u-sm-align-items--center { align-items: center !important; } .ds-u-sm-align-items--baseline { align-items: baseline !important; } .ds-u-sm-align-items--stretch { align-items: stretch !important; } }

@media (min-width: 768px) { .ds-u-md-align-items--start { align-items: flex-start !important; } .ds-u-md-align-items--end { align-items: flex-end !important; } .ds-u-md-align-items--center { align-items: center !important; } .ds-u-md-align-items--baseline { align-items: baseline !important; } .ds-u-md-align-items--stretch { align-items: stretch !important; } }

@media (min-width: 1024px) { .ds-u-lg-align-items--start { align-items: flex-start !important; } .ds-u-lg-align-items--end { align-items: flex-end !important; } .ds-u-lg-align-items--center { align-items: center !important; } .ds-u-lg-align-items--baseline { align-items: baseline !important; } .ds-u-lg-align-items--stretch { align-items: stretch !important; } }

@media (min-width: 1280px) { .ds-u-xl-align-items--start { align-items: flex-start !important; } .ds-u-xl-align-items--end { align-items: flex-end !important; } .ds-u-xl-align-items--center { align-items: center !important; } .ds-u-xl-align-items--baseline { align-items: baseline !important; } .ds-u-xl-align-items--stretch { align-items: stretch !important; } }

/*
Flex-wrap

Use the `flex-wrap` utility class on a flexbox container to change how its child elements wrap.

> The CSS `flex-wrap` property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines. If wrapping is allowed, this property also enables you to control the direction in which lines are stacked. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)

The classes follow the format: `ds-u-flex-wrap--{value}` and `ds-u-{breakpoint}-flex-wrap--{value}` where `breakpoint` is one of the [breakpoint prefixes]({{root}}/guidelines/responsive), and `value` is one of:

- `nowrap` (browser default)
- `wrap`
- `reverse`

Markup:
<section>
<% ['nowrap','wrap','reverse'].forEach(value => { %>
  <code class="preview__label">ds-u-flex-wrap--<%= value %></code>
  <article class="ds-u-flex-wrap--<%= value %> ds-u-display--flex ds-u-fill--primary-darkest">
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #1</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #2</div>
    <div class="ds-u-fill--white ds-u-margin--1 ds-u-padding-y--2 ds-u-text-align--center" style="width: 50%"><%= value %> element #3</div>
  </article>
<% }) %>
</section>

Style guide: utilities.flexbox.flex-wrap
*/
.ds-u-flex-wrap--nowrap { flex-wrap: nowrap !important; }

.ds-u-flex-wrap--wrap { flex-wrap: wrap !important; }

.ds-u-flex-wrap--reverse { flex-wrap: wrap-reverse !important; }

@media (min-width: 544px) { .ds-u-sm-flex-wrap--nowrap { flex-wrap: nowrap !important; } .ds-u-sm-flex-wrap--wrap { flex-wrap: wrap !important; } .ds-u-sm-flex-wrap--reverse { flex-wrap: wrap-reverse !important; } }

@media (min-width: 768px) { .ds-u-md-flex-wrap--nowrap { flex-wrap: nowrap !important; } .ds-u-md-flex-wrap--wrap { flex-wrap: wrap !important; } .ds-u-md-flex-wrap--reverse { flex-wrap: wrap-reverse !important; } }

@media (min-width: 1024px) { .ds-u-lg-flex-wrap--nowrap { flex-wrap: nowrap !important; } .ds-u-lg-flex-wrap--wrap { flex-wrap: wrap !important; } .ds-u-lg-flex-wrap--reverse { flex-wrap: wrap-reverse !important; } }

@media (min-width: 1280px) { .ds-u-xl-flex-wrap--nowrap { flex-wrap: nowrap !important; } .ds-u-xl-flex-wrap--wrap { flex-wrap: wrap !important; } .ds-u-xl-flex-wrap--reverse { flex-wrap: wrap-reverse !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Float

Set an element's `float` property using the float utility.

You can use the [clearfix utility class]({{root}}/utilities/clearfix) to automatically clear your floats.

**Format**: `ds-u-float--[VALUE]`

Markup:
<% ['ds-u-float--left', 'ds-u-float--right', 'ds-u-float--none'].forEach(util => { -%>
<div class="ds-u-clearfix">
  <p class="<%= util %> ds-base--inverse ds-u-padding--2">
    <code><%= util %></code>
  </p>
</div>
<% }) %>

Style guide: utilities.float
*/
.ds-u-float--left { float: left !important; }

.ds-u-float--right { float: right !important; }

.ds-u-float--none { float: none !important; }

/*
Responsive

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change how an element is floated at specific breakpoints.

Markup:
<div class="ds-u-clearfix">
  <strong>Inline text</strong>
  <div class="ds-u-float--none ds-u-md-float--left ds-u-lg-float--right">
    <p class="ds-u-md-display--none ds-base--inverse ds-u-padding--2">
      float: none
    </p>
    <p class="ds-u-display--none ds-u-md-display--inline-block ds-u-lg-display--none ds-base--inverse ds-u-padding--2">
      float: left
    </p>
    <p class="ds-u-display--none ds-u-lg-display--inline-block ds-base--inverse ds-u-padding--2">
      float: right
    </p>
  </div>
</div>

Style guide: utilities.float.responsive
*/
@media (min-width: 544px) { .ds-u-sm-float--left { float: left !important; } .ds-u-sm-float--right { float: right !important; } .ds-u-sm-float--none { float: none !important; } }

@media (min-width: 768px) { .ds-u-md-float--left { float: left !important; } .ds-u-md-float--right { float: right !important; } .ds-u-md-float--none { float: none !important; } }

@media (min-width: 1024px) { .ds-u-lg-float--left { float: left !important; } .ds-u-lg-float--right { float: right !important; } .ds-u-lg-float--none { float: none !important; } }

@media (min-width: 1280px) { .ds-u-xl-float--left { float: left !important; } .ds-u-xl-float--right { float: right !important; } .ds-u-xl-float--none { float: none !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Font familiy

Change an element's typeface to either the sans-serif (Open Sans) or serif (Bitter) family using the font family utility.

**Format**: `ds-u-[serif|sans]`

Markup:
<h2 class="preview__label">ds-u-sans (default)</h2>
<p class="ds-u-sans ds-title">Open Sans, Helvetica, sans-serif</p>
<h2 class="preview__label">ds-u-serif</h2>
<p class="ds-u-serif ds-title">Bitter, Georgia, serif</p>

Style guide: utilities.font-family
*/
.ds-u-sans { font-family: "Roboto", sans-serif !important; }

.ds-u-serif { font-family: Bitter, Georgia, serif !important; }

/*
---

## Theming

The following Sass variables can be overridden to theme the font family utility:

- `$font-sans`
- `$font-serif`

Style guide: utilities.font-family.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Font size

Use the font size utility to make the text larger or smaller.

**Format**: `ds-u-font-size--[SIZE]`

Markup:
<% ['display','title','h1','h2','h3', 'h4', 'lead','base','small'].forEach(size => { -%>
<article class="ds-u-font-size--<%= size %> ds-u-leading--heading ds-u-margin-bottom--3 ds-u-truncate">
  <h2 class="preview__label ds-u-margin-bottom--1">
    ds-u-font-size--<%= size %>
  </h2>
  {{lorem-s}}
</article>
<% }) -%>

Style guide: utilities.font-size
*/
.ds-u-font-size--small { font-size: 14px !important; }

.ds-u-font-size--base { font-size: 16px !important; }

.ds-u-font-size--lead { font-size: 18px !important; }

.ds-u-font-size--display { font-size: 60px !important; }

.ds-u-font-size--title { font-size: 48px !important; }

.ds-u-font-size--h1 { font-size: 36px !important; }

.ds-u-font-size--h2 { font-size: 24px !important; }

.ds-u-font-size--h3 { font-size: 21px !important; }

.ds-u-font-size--h4 { font-size: 18px !important; }

/*
Responsive font sizes

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the font size at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-u-font-size--base ds-u-sm-font-size--h4 ds-u-md-font-size--h3 ds-u-lg-font-size--h2 ds-u-xl-font-size--h1">
  {{ lorem-m }}
</div>

Style guide: utilities.font-size.responsive
*/
@media (min-width: 544px) { .ds-u-sm-font-size--small { font-size: 14px !important; } .ds-u-sm-font-size--base { font-size: 16px !important; } .ds-u-sm-font-size--lead { font-size: 18px !important; } .ds-u-sm-font-size--display { font-size: 60px !important; } .ds-u-sm-font-size--title { font-size: 48px !important; } .ds-u-sm-font-size--h1 { font-size: 36px !important; } .ds-u-sm-font-size--h2 { font-size: 24px !important; } .ds-u-sm-font-size--h3 { font-size: 21px !important; } .ds-u-sm-font-size--h4 { font-size: 18px !important; } }

@media (min-width: 768px) { .ds-u-md-font-size--small { font-size: 14px !important; } .ds-u-md-font-size--base { font-size: 16px !important; } .ds-u-md-font-size--lead { font-size: 18px !important; } .ds-u-md-font-size--display { font-size: 60px !important; } .ds-u-md-font-size--title { font-size: 48px !important; } .ds-u-md-font-size--h1 { font-size: 36px !important; } .ds-u-md-font-size--h2 { font-size: 24px !important; } .ds-u-md-font-size--h3 { font-size: 21px !important; } .ds-u-md-font-size--h4 { font-size: 18px !important; } }

@media (min-width: 1024px) { .ds-u-lg-font-size--small { font-size: 14px !important; } .ds-u-lg-font-size--base { font-size: 16px !important; } .ds-u-lg-font-size--lead { font-size: 18px !important; } .ds-u-lg-font-size--display { font-size: 60px !important; } .ds-u-lg-font-size--title { font-size: 48px !important; } .ds-u-lg-font-size--h1 { font-size: 36px !important; } .ds-u-lg-font-size--h2 { font-size: 24px !important; } .ds-u-lg-font-size--h3 { font-size: 21px !important; } .ds-u-lg-font-size--h4 { font-size: 18px !important; } }

@media (min-width: 1280px) { .ds-u-xl-font-size--small { font-size: 14px !important; } .ds-u-xl-font-size--base { font-size: 16px !important; } .ds-u-xl-font-size--lead { font-size: 18px !important; } .ds-u-xl-font-size--display { font-size: 60px !important; } .ds-u-xl-font-size--title { font-size: 48px !important; } .ds-u-xl-font-size--h1 { font-size: 36px !important; } .ds-u-xl-font-size--h2 { font-size: 24px !important; } .ds-u-xl-font-size--h3 { font-size: 21px !important; } .ds-u-xl-font-size--h4 { font-size: 18px !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Font style

Change an element's `font-style` property using the font style utility.

**Format**: `ds-u-font-style--[VALUE]`

Markup:
<h2 class="preview__label">ds-u-font-style--normal</h2>
<div class="ds-u-font-style--normal">{{ lorem-m }}</div>
<h2 class="preview__label">ds-u-font-style--italic</h2>
<div class="ds-u-font-style--italic">{{ lorem-m }}</div>

Style guide: utilities.font-style
*/
.ds-u-font-style--normal { font-style: normal !important; }

.ds-u-font-style--italic { font-style: italic !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Font weight

Change an element's `font-weight` property using the font weight utility.

**Format**: `ds-u-font-weight--[VALUE]`

Markup:
<p class="ds-u-font-weight--normal">ds-u-font-weight--normal</p>
<p class="ds-u-font-weight--semibold">ds-u-font-weight--semibold</p>
<p class="ds-u-font-weight--bold">ds-u-font-weight--bold</p>

Style guide: utilities.font-weight
*/
.ds-u-font-weight--normal { font-weight: 400 !important; }

.ds-u-font-weight--semibold { font-weight: 600 !important; }

.ds-u-font-weight--bold { font-weight: 700 !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Line height

In CSS, the `line-height` property controls the leading (`led-ing`). Leading refers to the vertical distance from the baseline of one line to the baseline of the next.

**Format**: `ds-u-leading--[NAME]`

Markup:
<h2 class="preview__label">ds-u-leading--lead</h2>
<div class="ds-u-leading--lead">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--base</h2>
<div class="ds-u-leading--base ds-u-font-size--base">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--heading</h2>
<div class="ds-u-leading--heading">{{lorem-l}}</div>
<h2 class="preview__label">ds-u-leading--reset</h2>
<div class="ds-u-leading--reset">{{lorem-l}}</div>

Style guide: utilities.line-height
*/
.ds-u-leading--base { line-height: 1.5 !important; }

.ds-u-leading--lead { line-height: 1.7 !important; }

.ds-u-leading--heading { line-height: 1.3 !important; }

.ds-u-leading--reset { line-height: 1 !important; }

/*
---

## Accessibility

> Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between `1.5` to `2` allows them to start a new line more easily once they have finished the previous one. &mdash; [WCAG 2.0 Compliance Techniques](https://www.w3.org/TR/WCAG20-TECHS/C21.html)

Style guide: utilities.line-height.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Margin

Use the margin utility to change an element's margin.

**Format**: `ds-u-margin-[x|y|bottom|left|right|top]--[MULTIPLE]`

[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)

@hide-markup

Markup:
<% var backgrounds = ['-cool-light', '-warm-light', '-lightest', '-lighter', '-light', '-medium', '', '-dark']; %>
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 8; i++) { %>
<div class="ds-u-fill--gray<%= backgrounds[i] %>">
  <div class="ds-u-margin<%= name %>--<%= i %> ds-u-display--inline-block">
    <code class="ds-u-fill--background ds-u-margin--0">ds-u-margin<%= name %>--<%= i %></code>
  </div>
</div>
<% } -%>
<div class="ds-u-fill--gray<%= backgrounds[i] %>">
  <div class="ds-u-margin<%= name %>--auto" style="width: 250px">
    <code class="ds-u-fill--background ds-u-margin--0 ds-u-display--block">ds-u-margin<%= name %>--auto</code>
  </div>
</div>
<% }) -%>

Style guide: utilities.margin
*/
.ds-u-margin--0 { margin: 0 !important; }

.ds-u-margin-top--0 { margin-top: 0 !important; }

.ds-u-margin-right--0 { margin-right: 0 !important; }

.ds-u-margin-bottom--0 { margin-bottom: 0 !important; }

.ds-u-margin-left--0 { margin-left: 0 !important; }

.ds-u-margin-x--0 { margin-left: 0 !important; margin-right: 0 !important; }

.ds-u-margin-y--0 { margin-bottom: 0 !important; margin-top: 0 !important; }

.ds-u-margin--1 { margin: 8px !important; }

.ds-u-margin-top--1 { margin-top: 8px !important; }

.ds-u-margin-right--1 { margin-right: 8px !important; }

.ds-u-margin-bottom--1 { margin-bottom: 8px !important; }

.ds-u-margin-left--1 { margin-left: 8px !important; }

.ds-u-margin-x--1 { margin-left: 8px !important; margin-right: 8px !important; }

.ds-u-margin-y--1 { margin-bottom: 8px !important; margin-top: 8px !important; }

.ds-u-margin--2 { margin: 16px !important; }

.ds-u-margin-top--2 { margin-top: 16px !important; }

.ds-u-margin-right--2 { margin-right: 16px !important; }

.ds-u-margin-bottom--2 { margin-bottom: 16px !important; }

.ds-u-margin-left--2 { margin-left: 16px !important; }

.ds-u-margin-x--2 { margin-left: 16px !important; margin-right: 16px !important; }

.ds-u-margin-y--2 { margin-bottom: 16px !important; margin-top: 16px !important; }

.ds-u-margin--3 { margin: 24px !important; }

.ds-u-margin-top--3 { margin-top: 24px !important; }

.ds-u-margin-right--3 { margin-right: 24px !important; }

.ds-u-margin-bottom--3 { margin-bottom: 24px !important; }

.ds-u-margin-left--3 { margin-left: 24px !important; }

.ds-u-margin-x--3 { margin-left: 24px !important; margin-right: 24px !important; }

.ds-u-margin-y--3 { margin-bottom: 24px !important; margin-top: 24px !important; }

.ds-u-margin--4 { margin: 32px !important; }

.ds-u-margin-top--4 { margin-top: 32px !important; }

.ds-u-margin-right--4 { margin-right: 32px !important; }

.ds-u-margin-bottom--4 { margin-bottom: 32px !important; }

.ds-u-margin-left--4 { margin-left: 32px !important; }

.ds-u-margin-x--4 { margin-left: 32px !important; margin-right: 32px !important; }

.ds-u-margin-y--4 { margin-bottom: 32px !important; margin-top: 32px !important; }

.ds-u-margin--5 { margin: 40px !important; }

.ds-u-margin-top--5 { margin-top: 40px !important; }

.ds-u-margin-right--5 { margin-right: 40px !important; }

.ds-u-margin-bottom--5 { margin-bottom: 40px !important; }

.ds-u-margin-left--5 { margin-left: 40px !important; }

.ds-u-margin-x--5 { margin-left: 40px !important; margin-right: 40px !important; }

.ds-u-margin-y--5 { margin-bottom: 40px !important; margin-top: 40px !important; }

.ds-u-margin--6 { margin: 48px !important; }

.ds-u-margin-top--6 { margin-top: 48px !important; }

.ds-u-margin-right--6 { margin-right: 48px !important; }

.ds-u-margin-bottom--6 { margin-bottom: 48px !important; }

.ds-u-margin-left--6 { margin-left: 48px !important; }

.ds-u-margin-x--6 { margin-left: 48px !important; margin-right: 48px !important; }

.ds-u-margin-y--6 { margin-bottom: 48px !important; margin-top: 48px !important; }

.ds-u-margin--7 { margin: 56px !important; }

.ds-u-margin-top--7 { margin-top: 56px !important; }

.ds-u-margin-right--7 { margin-right: 56px !important; }

.ds-u-margin-bottom--7 { margin-bottom: 56px !important; }

.ds-u-margin-left--7 { margin-left: 56px !important; }

.ds-u-margin-x--7 { margin-left: 56px !important; margin-right: 56px !important; }

.ds-u-margin-y--7 { margin-bottom: 56px !important; margin-top: 56px !important; }

.ds-u-margin--auto { margin: auto !important; }

.ds-u-margin-top--auto { margin-top: auto !important; }

.ds-u-margin-right--auto { margin-right: auto !important; }

.ds-u-margin-bottom--auto { margin-bottom: auto !important; }

.ds-u-margin-left--auto { margin-left: auto !important; }

.ds-u-margin-x--auto { margin-left: auto !important; margin-right: auto !important; }

.ds-u-margin-y--auto { margin-bottom: auto !important; margin-top: auto !important; }

/*
Responsive margins

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the margin at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-u-fill--gray-dark">
  <div class="ds-u-margin--1 ds-u-sm-margin--2 ds-u-md-margin--3 ds-u-lg-margin--4 ds-u-xl-margin--5 ds-u-display--inline-block">
    <span class="ds-u-fill--background">Responsive margins</span>
  </div>
</div>

Style guide: utilities.margin.responsive
*/
@media (min-width: 544px) { .ds-u-sm-margin--0 { margin: 0 !important; } .ds-u-sm-margin-top--0 { margin-top: 0 !important; } .ds-u-sm-margin-right--0 { margin-right: 0 !important; } .ds-u-sm-margin-bottom--0 { margin-bottom: 0 !important; } .ds-u-sm-margin-left--0 { margin-left: 0 !important; } .ds-u-sm-margin-x--0 { margin-left: 0 !important; margin-right: 0 !important; } .ds-u-sm-margin-y--0 { margin-bottom: 0 !important; margin-top: 0 !important; } .ds-u-sm-margin--1 { margin: 8px !important; } .ds-u-sm-margin-top--1 { margin-top: 8px !important; } .ds-u-sm-margin-right--1 { margin-right: 8px !important; } .ds-u-sm-margin-bottom--1 { margin-bottom: 8px !important; } .ds-u-sm-margin-left--1 { margin-left: 8px !important; } .ds-u-sm-margin-x--1 { margin-left: 8px !important; margin-right: 8px !important; } .ds-u-sm-margin-y--1 { margin-bottom: 8px !important; margin-top: 8px !important; } .ds-u-sm-margin--2 { margin: 16px !important; } .ds-u-sm-margin-top--2 { margin-top: 16px !important; } .ds-u-sm-margin-right--2 { margin-right: 16px !important; } .ds-u-sm-margin-bottom--2 { margin-bottom: 16px !important; } .ds-u-sm-margin-left--2 { margin-left: 16px !important; } .ds-u-sm-margin-x--2 { margin-left: 16px !important; margin-right: 16px !important; } .ds-u-sm-margin-y--2 { margin-bottom: 16px !important; margin-top: 16px !important; } .ds-u-sm-margin--3 { margin: 24px !important; } .ds-u-sm-margin-top--3 { margin-top: 24px !important; } .ds-u-sm-margin-right--3 { margin-right: 24px !important; } .ds-u-sm-margin-bottom--3 { margin-bottom: 24px !important; } .ds-u-sm-margin-left--3 { margin-left: 24px !important; } .ds-u-sm-margin-x--3 { margin-left: 24px !important; margin-right: 24px !important; } .ds-u-sm-margin-y--3 { margin-bottom: 24px !important; margin-top: 24px !important; } .ds-u-sm-margin--4 { margin: 32px !important; } .ds-u-sm-margin-top--4 { margin-top: 32px !important; } .ds-u-sm-margin-right--4 { margin-right: 32px !important; } .ds-u-sm-margin-bottom--4 { margin-bottom: 32px !important; } .ds-u-sm-margin-left--4 { margin-left: 32px !important; } .ds-u-sm-margin-x--4 { margin-left: 32px !important; margin-right: 32px !important; } .ds-u-sm-margin-y--4 { margin-bottom: 32px !important; margin-top: 32px !important; } .ds-u-sm-margin--5 { margin: 40px !important; } .ds-u-sm-margin-top--5 { margin-top: 40px !important; } .ds-u-sm-margin-right--5 { margin-right: 40px !important; } .ds-u-sm-margin-bottom--5 { margin-bottom: 40px !important; } .ds-u-sm-margin-left--5 { margin-left: 40px !important; } .ds-u-sm-margin-x--5 { margin-left: 40px !important; margin-right: 40px !important; } .ds-u-sm-margin-y--5 { margin-bottom: 40px !important; margin-top: 40px !important; } .ds-u-sm-margin--6 { margin: 48px !important; } .ds-u-sm-margin-top--6 { margin-top: 48px !important; } .ds-u-sm-margin-right--6 { margin-right: 48px !important; } .ds-u-sm-margin-bottom--6 { margin-bottom: 48px !important; } .ds-u-sm-margin-left--6 { margin-left: 48px !important; } .ds-u-sm-margin-x--6 { margin-left: 48px !important; margin-right: 48px !important; } .ds-u-sm-margin-y--6 { margin-bottom: 48px !important; margin-top: 48px !important; } .ds-u-sm-margin--7 { margin: 56px !important; } .ds-u-sm-margin-top--7 { margin-top: 56px !important; } .ds-u-sm-margin-right--7 { margin-right: 56px !important; } .ds-u-sm-margin-bottom--7 { margin-bottom: 56px !important; } .ds-u-sm-margin-left--7 { margin-left: 56px !important; } .ds-u-sm-margin-x--7 { margin-left: 56px !important; margin-right: 56px !important; } .ds-u-sm-margin-y--7 { margin-bottom: 56px !important; margin-top: 56px !important; } .ds-u-sm-margin--auto { margin: auto !important; } .ds-u-sm-margin-top--auto { margin-top: auto !important; } .ds-u-sm-margin-right--auto { margin-right: auto !important; } .ds-u-sm-margin-bottom--auto { margin-bottom: auto !important; } .ds-u-sm-margin-left--auto { margin-left: auto !important; } .ds-u-sm-margin-x--auto { margin-left: auto !important; margin-right: auto !important; } .ds-u-sm-margin-y--auto { margin-bottom: auto !important; margin-top: auto !important; } }

@media (min-width: 768px) { .ds-u-md-margin--0 { margin: 0 !important; } .ds-u-md-margin-top--0 { margin-top: 0 !important; } .ds-u-md-margin-right--0 { margin-right: 0 !important; } .ds-u-md-margin-bottom--0 { margin-bottom: 0 !important; } .ds-u-md-margin-left--0 { margin-left: 0 !important; } .ds-u-md-margin-x--0 { margin-left: 0 !important; margin-right: 0 !important; } .ds-u-md-margin-y--0 { margin-bottom: 0 !important; margin-top: 0 !important; } .ds-u-md-margin--1 { margin: 8px !important; } .ds-u-md-margin-top--1 { margin-top: 8px !important; } .ds-u-md-margin-right--1 { margin-right: 8px !important; } .ds-u-md-margin-bottom--1 { margin-bottom: 8px !important; } .ds-u-md-margin-left--1 { margin-left: 8px !important; } .ds-u-md-margin-x--1 { margin-left: 8px !important; margin-right: 8px !important; } .ds-u-md-margin-y--1 { margin-bottom: 8px !important; margin-top: 8px !important; } .ds-u-md-margin--2 { margin: 16px !important; } .ds-u-md-margin-top--2 { margin-top: 16px !important; } .ds-u-md-margin-right--2 { margin-right: 16px !important; } .ds-u-md-margin-bottom--2 { margin-bottom: 16px !important; } .ds-u-md-margin-left--2 { margin-left: 16px !important; } .ds-u-md-margin-x--2 { margin-left: 16px !important; margin-right: 16px !important; } .ds-u-md-margin-y--2 { margin-bottom: 16px !important; margin-top: 16px !important; } .ds-u-md-margin--3 { margin: 24px !important; } .ds-u-md-margin-top--3 { margin-top: 24px !important; } .ds-u-md-margin-right--3 { margin-right: 24px !important; } .ds-u-md-margin-bottom--3 { margin-bottom: 24px !important; } .ds-u-md-margin-left--3 { margin-left: 24px !important; } .ds-u-md-margin-x--3 { margin-left: 24px !important; margin-right: 24px !important; } .ds-u-md-margin-y--3 { margin-bottom: 24px !important; margin-top: 24px !important; } .ds-u-md-margin--4 { margin: 32px !important; } .ds-u-md-margin-top--4 { margin-top: 32px !important; } .ds-u-md-margin-right--4 { margin-right: 32px !important; } .ds-u-md-margin-bottom--4 { margin-bottom: 32px !important; } .ds-u-md-margin-left--4 { margin-left: 32px !important; } .ds-u-md-margin-x--4 { margin-left: 32px !important; margin-right: 32px !important; } .ds-u-md-margin-y--4 { margin-bottom: 32px !important; margin-top: 32px !important; } .ds-u-md-margin--5 { margin: 40px !important; } .ds-u-md-margin-top--5 { margin-top: 40px !important; } .ds-u-md-margin-right--5 { margin-right: 40px !important; } .ds-u-md-margin-bottom--5 { margin-bottom: 40px !important; } .ds-u-md-margin-left--5 { margin-left: 40px !important; } .ds-u-md-margin-x--5 { margin-left: 40px !important; margin-right: 40px !important; } .ds-u-md-margin-y--5 { margin-bottom: 40px !important; margin-top: 40px !important; } .ds-u-md-margin--6 { margin: 48px !important; } .ds-u-md-margin-top--6 { margin-top: 48px !important; } .ds-u-md-margin-right--6 { margin-right: 48px !important; } .ds-u-md-margin-bottom--6 { margin-bottom: 48px !important; } .ds-u-md-margin-left--6 { margin-left: 48px !important; } .ds-u-md-margin-x--6 { margin-left: 48px !important; margin-right: 48px !important; } .ds-u-md-margin-y--6 { margin-bottom: 48px !important; margin-top: 48px !important; } .ds-u-md-margin--7 { margin: 56px !important; } .ds-u-md-margin-top--7 { margin-top: 56px !important; } .ds-u-md-margin-right--7 { margin-right: 56px !important; } .ds-u-md-margin-bottom--7 { margin-bottom: 56px !important; } .ds-u-md-margin-left--7 { margin-left: 56px !important; } .ds-u-md-margin-x--7 { margin-left: 56px !important; margin-right: 56px !important; } .ds-u-md-margin-y--7 { margin-bottom: 56px !important; margin-top: 56px !important; } .ds-u-md-margin--auto { margin: auto !important; } .ds-u-md-margin-top--auto { margin-top: auto !important; } .ds-u-md-margin-right--auto { margin-right: auto !important; } .ds-u-md-margin-bottom--auto { margin-bottom: auto !important; } .ds-u-md-margin-left--auto { margin-left: auto !important; } .ds-u-md-margin-x--auto { margin-left: auto !important; margin-right: auto !important; } .ds-u-md-margin-y--auto { margin-bottom: auto !important; margin-top: auto !important; } }

@media (min-width: 1024px) { .ds-u-lg-margin--0 { margin: 0 !important; } .ds-u-lg-margin-top--0 { margin-top: 0 !important; } .ds-u-lg-margin-right--0 { margin-right: 0 !important; } .ds-u-lg-margin-bottom--0 { margin-bottom: 0 !important; } .ds-u-lg-margin-left--0 { margin-left: 0 !important; } .ds-u-lg-margin-x--0 { margin-left: 0 !important; margin-right: 0 !important; } .ds-u-lg-margin-y--0 { margin-bottom: 0 !important; margin-top: 0 !important; } .ds-u-lg-margin--1 { margin: 8px !important; } .ds-u-lg-margin-top--1 { margin-top: 8px !important; } .ds-u-lg-margin-right--1 { margin-right: 8px !important; } .ds-u-lg-margin-bottom--1 { margin-bottom: 8px !important; } .ds-u-lg-margin-left--1 { margin-left: 8px !important; } .ds-u-lg-margin-x--1 { margin-left: 8px !important; margin-right: 8px !important; } .ds-u-lg-margin-y--1 { margin-bottom: 8px !important; margin-top: 8px !important; } .ds-u-lg-margin--2 { margin: 16px !important; } .ds-u-lg-margin-top--2 { margin-top: 16px !important; } .ds-u-lg-margin-right--2 { margin-right: 16px !important; } .ds-u-lg-margin-bottom--2 { margin-bottom: 16px !important; } .ds-u-lg-margin-left--2 { margin-left: 16px !important; } .ds-u-lg-margin-x--2 { margin-left: 16px !important; margin-right: 16px !important; } .ds-u-lg-margin-y--2 { margin-bottom: 16px !important; margin-top: 16px !important; } .ds-u-lg-margin--3 { margin: 24px !important; } .ds-u-lg-margin-top--3 { margin-top: 24px !important; } .ds-u-lg-margin-right--3 { margin-right: 24px !important; } .ds-u-lg-margin-bottom--3 { margin-bottom: 24px !important; } .ds-u-lg-margin-left--3 { margin-left: 24px !important; } .ds-u-lg-margin-x--3 { margin-left: 24px !important; margin-right: 24px !important; } .ds-u-lg-margin-y--3 { margin-bottom: 24px !important; margin-top: 24px !important; } .ds-u-lg-margin--4 { margin: 32px !important; } .ds-u-lg-margin-top--4 { margin-top: 32px !important; } .ds-u-lg-margin-right--4 { margin-right: 32px !important; } .ds-u-lg-margin-bottom--4 { margin-bottom: 32px !important; } .ds-u-lg-margin-left--4 { margin-left: 32px !important; } .ds-u-lg-margin-x--4 { margin-left: 32px !important; margin-right: 32px !important; } .ds-u-lg-margin-y--4 { margin-bottom: 32px !important; margin-top: 32px !important; } .ds-u-lg-margin--5 { margin: 40px !important; } .ds-u-lg-margin-top--5 { margin-top: 40px !important; } .ds-u-lg-margin-right--5 { margin-right: 40px !important; } .ds-u-lg-margin-bottom--5 { margin-bottom: 40px !important; } .ds-u-lg-margin-left--5 { margin-left: 40px !important; } .ds-u-lg-margin-x--5 { margin-left: 40px !important; margin-right: 40px !important; } .ds-u-lg-margin-y--5 { margin-bottom: 40px !important; margin-top: 40px !important; } .ds-u-lg-margin--6 { margin: 48px !important; } .ds-u-lg-margin-top--6 { margin-top: 48px !important; } .ds-u-lg-margin-right--6 { margin-right: 48px !important; } .ds-u-lg-margin-bottom--6 { margin-bottom: 48px !important; } .ds-u-lg-margin-left--6 { margin-left: 48px !important; } .ds-u-lg-margin-x--6 { margin-left: 48px !important; margin-right: 48px !important; } .ds-u-lg-margin-y--6 { margin-bottom: 48px !important; margin-top: 48px !important; } .ds-u-lg-margin--7 { margin: 56px !important; } .ds-u-lg-margin-top--7 { margin-top: 56px !important; } .ds-u-lg-margin-right--7 { margin-right: 56px !important; } .ds-u-lg-margin-bottom--7 { margin-bottom: 56px !important; } .ds-u-lg-margin-left--7 { margin-left: 56px !important; } .ds-u-lg-margin-x--7 { margin-left: 56px !important; margin-right: 56px !important; } .ds-u-lg-margin-y--7 { margin-bottom: 56px !important; margin-top: 56px !important; } .ds-u-lg-margin--auto { margin: auto !important; } .ds-u-lg-margin-top--auto { margin-top: auto !important; } .ds-u-lg-margin-right--auto { margin-right: auto !important; } .ds-u-lg-margin-bottom--auto { margin-bottom: auto !important; } .ds-u-lg-margin-left--auto { margin-left: auto !important; } .ds-u-lg-margin-x--auto { margin-left: auto !important; margin-right: auto !important; } .ds-u-lg-margin-y--auto { margin-bottom: auto !important; margin-top: auto !important; } }

@media (min-width: 1280px) { .ds-u-xl-margin--0 { margin: 0 !important; } .ds-u-xl-margin-top--0 { margin-top: 0 !important; } .ds-u-xl-margin-right--0 { margin-right: 0 !important; } .ds-u-xl-margin-bottom--0 { margin-bottom: 0 !important; } .ds-u-xl-margin-left--0 { margin-left: 0 !important; } .ds-u-xl-margin-x--0 { margin-left: 0 !important; margin-right: 0 !important; } .ds-u-xl-margin-y--0 { margin-bottom: 0 !important; margin-top: 0 !important; } .ds-u-xl-margin--1 { margin: 8px !important; } .ds-u-xl-margin-top--1 { margin-top: 8px !important; } .ds-u-xl-margin-right--1 { margin-right: 8px !important; } .ds-u-xl-margin-bottom--1 { margin-bottom: 8px !important; } .ds-u-xl-margin-left--1 { margin-left: 8px !important; } .ds-u-xl-margin-x--1 { margin-left: 8px !important; margin-right: 8px !important; } .ds-u-xl-margin-y--1 { margin-bottom: 8px !important; margin-top: 8px !important; } .ds-u-xl-margin--2 { margin: 16px !important; } .ds-u-xl-margin-top--2 { margin-top: 16px !important; } .ds-u-xl-margin-right--2 { margin-right: 16px !important; } .ds-u-xl-margin-bottom--2 { margin-bottom: 16px !important; } .ds-u-xl-margin-left--2 { margin-left: 16px !important; } .ds-u-xl-margin-x--2 { margin-left: 16px !important; margin-right: 16px !important; } .ds-u-xl-margin-y--2 { margin-bottom: 16px !important; margin-top: 16px !important; } .ds-u-xl-margin--3 { margin: 24px !important; } .ds-u-xl-margin-top--3 { margin-top: 24px !important; } .ds-u-xl-margin-right--3 { margin-right: 24px !important; } .ds-u-xl-margin-bottom--3 { margin-bottom: 24px !important; } .ds-u-xl-margin-left--3 { margin-left: 24px !important; } .ds-u-xl-margin-x--3 { margin-left: 24px !important; margin-right: 24px !important; } .ds-u-xl-margin-y--3 { margin-bottom: 24px !important; margin-top: 24px !important; } .ds-u-xl-margin--4 { margin: 32px !important; } .ds-u-xl-margin-top--4 { margin-top: 32px !important; } .ds-u-xl-margin-right--4 { margin-right: 32px !important; } .ds-u-xl-margin-bottom--4 { margin-bottom: 32px !important; } .ds-u-xl-margin-left--4 { margin-left: 32px !important; } .ds-u-xl-margin-x--4 { margin-left: 32px !important; margin-right: 32px !important; } .ds-u-xl-margin-y--4 { margin-bottom: 32px !important; margin-top: 32px !important; } .ds-u-xl-margin--5 { margin: 40px !important; } .ds-u-xl-margin-top--5 { margin-top: 40px !important; } .ds-u-xl-margin-right--5 { margin-right: 40px !important; } .ds-u-xl-margin-bottom--5 { margin-bottom: 40px !important; } .ds-u-xl-margin-left--5 { margin-left: 40px !important; } .ds-u-xl-margin-x--5 { margin-left: 40px !important; margin-right: 40px !important; } .ds-u-xl-margin-y--5 { margin-bottom: 40px !important; margin-top: 40px !important; } .ds-u-xl-margin--6 { margin: 48px !important; } .ds-u-xl-margin-top--6 { margin-top: 48px !important; } .ds-u-xl-margin-right--6 { margin-right: 48px !important; } .ds-u-xl-margin-bottom--6 { margin-bottom: 48px !important; } .ds-u-xl-margin-left--6 { margin-left: 48px !important; } .ds-u-xl-margin-x--6 { margin-left: 48px !important; margin-right: 48px !important; } .ds-u-xl-margin-y--6 { margin-bottom: 48px !important; margin-top: 48px !important; } .ds-u-xl-margin--7 { margin: 56px !important; } .ds-u-xl-margin-top--7 { margin-top: 56px !important; } .ds-u-xl-margin-right--7 { margin-right: 56px !important; } .ds-u-xl-margin-bottom--7 { margin-bottom: 56px !important; } .ds-u-xl-margin-left--7 { margin-left: 56px !important; } .ds-u-xl-margin-x--7 { margin-left: 56px !important; margin-right: 56px !important; } .ds-u-xl-margin-y--7 { margin-bottom: 56px !important; margin-top: 56px !important; } .ds-u-xl-margin--auto { margin: auto !important; } .ds-u-xl-margin-top--auto { margin-top: auto !important; } .ds-u-xl-margin-right--auto { margin-right: auto !important; } .ds-u-xl-margin-bottom--auto { margin-bottom: auto !important; } .ds-u-xl-margin-left--auto { margin-left: auto !important; } .ds-u-xl-margin-x--auto { margin-left: auto !important; margin-right: auto !important; } .ds-u-xl-margin-y--auto { margin-bottom: auto !important; margin-top: auto !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Measure

Line length, also called "measure", is an important part of readability.

The design system includes 3 measure modifiers:

- **narrow** = line length ~45 characters
- **base** = line length ~65 characters
- **wide** = line length ~80 characters

**Format**: `ds-u-measure--[NAME]`

Markup:
<h2 class="preview__label">ds-u-measure--narrow</h2>
<div class="ds-u-measure--narrow">{{ lorem-l }}</div>
<h2 class="preview__label">ds-u-measure--base</h2>
<div class="ds-u-measure--base ds-u-font-size--small">{{ lorem-l }}</div>
<h2 class="preview__label">ds-u-measure--wide</h2>
<div class="ds-u-measure--wide ds-u-font-size--small">{{ lorem-l }}</div>

Style guide: utilities.measure
*/
.ds-u-measure--narrow { max-width: 21em !important; }

.ds-u-measure--base { max-width: 31em !important; }

.ds-u-measure--wide { max-width: 41em !important; }

/*
---

## Accessibility

> A line of text shouldn’t be longer than 80 characters. This helps users with certain reading or visual disabilities that have trouble keeping their place when reading long lines of text. If the width of the text container is resized, it should be allowed to scale in a way so 80 characters or less are shown...Another way to ensure good line-length is to use a fluid layout or apply responsive web design techniques that allow the user to resize the window to find a comfortable line length. &mdash; [W3C](https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length)

Style guide: utilities.measure.guidance
*/
/* stylelint-disable declaration-no-important */
/*
Overflow

Use the overflow utility to set the `overflow` property of an element.

> The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container. &mdash; [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

**Format**: `ds-u-overflow--[VALUE]`

Markup:
<% ['ds-u-overflow--hidden', 'ds-u-overflow--scroll', 'ds-u-overflow--auto'].forEach(util => { -%>
  <code class="preview__label"><%= util %></code>
  <div class="<%= util %> ds-base--inverse ds-u-padding--2" style="height: 100px">
    <div class="ds-u-measure--narrow">{{lorem-l }}</div>
  </div>
<% }) -%>

Style guide: utilities.overflow
*/
.ds-u-overflow--hidden { overflow: hidden !important; }

.ds-u-overflow--scroll { overflow: scroll !important; }

.ds-u-overflow--auto { overflow: auto !important; }

/*
Clearfix

The clearfix utility can be applied to an element to clear floats around the element.

**Format**: `ds-u-clearfix`

Markup:
<div class="ds-u-clearfix ds-u-fill--gray">
  <div class="ds-u-float--right ds-u-fill--primary-alt-lightest" style="width: 100px; height: 100px;">
    Floated right
  </div>
</div>

Style guide: utilities.clearfix
*/
.ds-u-clearfix::before { content: ''; display: table; }

.ds-u-clearfix::after { clear: both; content: ''; display: table; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Padding

Use the padding utility to change an element's padding.

**Format**: `ds-u-padding-[x|y|bottom|left|right|top]--[MULTIPLE]`

[Read more about how the design system approaches spacing here.]({{root}}/layout/spacing)

@hide-markup

Markup:
<% ['', '-x', '-y', '-bottom', '-left', '-right', '-top'].forEach(name => { -%>
<% for (var i = 0; i < 8; i++) { %>
<div class="ds-base--inverse ds-u-padding<%= name %>--<%= i %> ds-u-margin-bottom--2">
  <code>ds-u-padding<%= name %>--<%= i %></code>
</div>
<% } -%>
<% }) -%>

Style guide: utilities.padding
*/
.ds-u-padding--0 { padding: 0 !important; }

.ds-u-padding-top--0 { padding-top: 0 !important; }

.ds-u-padding-right--0 { padding-right: 0 !important; }

.ds-u-padding-bottom--0 { padding-bottom: 0 !important; }

.ds-u-padding-left--0 { padding-left: 0 !important; }

.ds-u-padding-x--0 { padding-left: 0 !important; padding-right: 0 !important; }

.ds-u-padding-y--0 { padding-bottom: 0 !important; padding-top: 0 !important; }

.ds-u-padding--1 { padding: 8px !important; }

.ds-u-padding-top--1 { padding-top: 8px !important; }

.ds-u-padding-right--1 { padding-right: 8px !important; }

.ds-u-padding-bottom--1 { padding-bottom: 8px !important; }

.ds-u-padding-left--1 { padding-left: 8px !important; }

.ds-u-padding-x--1 { padding-left: 8px !important; padding-right: 8px !important; }

.ds-u-padding-y--1 { padding-bottom: 8px !important; padding-top: 8px !important; }

.ds-u-padding--2 { padding: 16px !important; }

.ds-u-padding-top--2 { padding-top: 16px !important; }

.ds-u-padding-right--2 { padding-right: 16px !important; }

.ds-u-padding-bottom--2 { padding-bottom: 16px !important; }

.ds-u-padding-left--2 { padding-left: 16px !important; }

.ds-u-padding-x--2 { padding-left: 16px !important; padding-right: 16px !important; }

.ds-u-padding-y--2 { padding-bottom: 16px !important; padding-top: 16px !important; }

.ds-u-padding--3 { padding: 24px !important; }

.ds-u-padding-top--3 { padding-top: 24px !important; }

.ds-u-padding-right--3 { padding-right: 24px !important; }

.ds-u-padding-bottom--3 { padding-bottom: 24px !important; }

.ds-u-padding-left--3 { padding-left: 24px !important; }

.ds-u-padding-x--3 { padding-left: 24px !important; padding-right: 24px !important; }

.ds-u-padding-y--3 { padding-bottom: 24px !important; padding-top: 24px !important; }

.ds-u-padding--4 { padding: 32px !important; }

.ds-u-padding-top--4 { padding-top: 32px !important; }

.ds-u-padding-right--4 { padding-right: 32px !important; }

.ds-u-padding-bottom--4 { padding-bottom: 32px !important; }

.ds-u-padding-left--4 { padding-left: 32px !important; }

.ds-u-padding-x--4 { padding-left: 32px !important; padding-right: 32px !important; }

.ds-u-padding-y--4 { padding-bottom: 32px !important; padding-top: 32px !important; }

.ds-u-padding--5 { padding: 40px !important; }

.ds-u-padding-top--5 { padding-top: 40px !important; }

.ds-u-padding-right--5 { padding-right: 40px !important; }

.ds-u-padding-bottom--5 { padding-bottom: 40px !important; }

.ds-u-padding-left--5 { padding-left: 40px !important; }

.ds-u-padding-x--5 { padding-left: 40px !important; padding-right: 40px !important; }

.ds-u-padding-y--5 { padding-bottom: 40px !important; padding-top: 40px !important; }

.ds-u-padding--6 { padding: 48px !important; }

.ds-u-padding-top--6 { padding-top: 48px !important; }

.ds-u-padding-right--6 { padding-right: 48px !important; }

.ds-u-padding-bottom--6 { padding-bottom: 48px !important; }

.ds-u-padding-left--6 { padding-left: 48px !important; }

.ds-u-padding-x--6 { padding-left: 48px !important; padding-right: 48px !important; }

.ds-u-padding-y--6 { padding-bottom: 48px !important; padding-top: 48px !important; }

.ds-u-padding--7 { padding: 56px !important; }

.ds-u-padding-top--7 { padding-top: 56px !important; }

.ds-u-padding-right--7 { padding-right: 56px !important; }

.ds-u-padding-bottom--7 { padding-bottom: 56px !important; }

.ds-u-padding-left--7 { padding-left: 56px !important; }

.ds-u-padding-x--7 { padding-left: 56px !important; padding-right: 56px !important; }

.ds-u-padding-y--7 { padding-bottom: 56px !important; padding-top: 56px !important; }

/*
Responsive padding

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the padding at specific breakpoints.

_Resize your browser to see each breakpoint in action:_

Markup:
<div class="ds-base--inverse">
  <div class="ds-u-padding--1 ds-u-sm-padding--2 ds-u-md-padding--3 ds-u-lg-padding--4 ds-u-xl-padding--5">
    Responsive padding
  </div>
</div>

Style guide: utilities.padding.responsive
*/
@media (min-width: 544px) { .ds-u-sm-padding--0 { padding: 0 !important; } .ds-u-sm-padding-top--0 { padding-top: 0 !important; } .ds-u-sm-padding-right--0 { padding-right: 0 !important; } .ds-u-sm-padding-bottom--0 { padding-bottom: 0 !important; } .ds-u-sm-padding-left--0 { padding-left: 0 !important; } .ds-u-sm-padding-x--0 { padding-left: 0 !important; padding-right: 0 !important; } .ds-u-sm-padding-y--0 { padding-bottom: 0 !important; padding-top: 0 !important; } .ds-u-sm-padding--1 { padding: 8px !important; } .ds-u-sm-padding-top--1 { padding-top: 8px !important; } .ds-u-sm-padding-right--1 { padding-right: 8px !important; } .ds-u-sm-padding-bottom--1 { padding-bottom: 8px !important; } .ds-u-sm-padding-left--1 { padding-left: 8px !important; } .ds-u-sm-padding-x--1 { padding-left: 8px !important; padding-right: 8px !important; } .ds-u-sm-padding-y--1 { padding-bottom: 8px !important; padding-top: 8px !important; } .ds-u-sm-padding--2 { padding: 16px !important; } .ds-u-sm-padding-top--2 { padding-top: 16px !important; } .ds-u-sm-padding-right--2 { padding-right: 16px !important; } .ds-u-sm-padding-bottom--2 { padding-bottom: 16px !important; } .ds-u-sm-padding-left--2 { padding-left: 16px !important; } .ds-u-sm-padding-x--2 { padding-left: 16px !important; padding-right: 16px !important; } .ds-u-sm-padding-y--2 { padding-bottom: 16px !important; padding-top: 16px !important; } .ds-u-sm-padding--3 { padding: 24px !important; } .ds-u-sm-padding-top--3 { padding-top: 24px !important; } .ds-u-sm-padding-right--3 { padding-right: 24px !important; } .ds-u-sm-padding-bottom--3 { padding-bottom: 24px !important; } .ds-u-sm-padding-left--3 { padding-left: 24px !important; } .ds-u-sm-padding-x--3 { padding-left: 24px !important; padding-right: 24px !important; } .ds-u-sm-padding-y--3 { padding-bottom: 24px !important; padding-top: 24px !important; } .ds-u-sm-padding--4 { padding: 32px !important; } .ds-u-sm-padding-top--4 { padding-top: 32px !important; } .ds-u-sm-padding-right--4 { padding-right: 32px !important; } .ds-u-sm-padding-bottom--4 { padding-bottom: 32px !important; } .ds-u-sm-padding-left--4 { padding-left: 32px !important; } .ds-u-sm-padding-x--4 { padding-left: 32px !important; padding-right: 32px !important; } .ds-u-sm-padding-y--4 { padding-bottom: 32px !important; padding-top: 32px !important; } .ds-u-sm-padding--5 { padding: 40px !important; } .ds-u-sm-padding-top--5 { padding-top: 40px !important; } .ds-u-sm-padding-right--5 { padding-right: 40px !important; } .ds-u-sm-padding-bottom--5 { padding-bottom: 40px !important; } .ds-u-sm-padding-left--5 { padding-left: 40px !important; } .ds-u-sm-padding-x--5 { padding-left: 40px !important; padding-right: 40px !important; } .ds-u-sm-padding-y--5 { padding-bottom: 40px !important; padding-top: 40px !important; } .ds-u-sm-padding--6 { padding: 48px !important; } .ds-u-sm-padding-top--6 { padding-top: 48px !important; } .ds-u-sm-padding-right--6 { padding-right: 48px !important; } .ds-u-sm-padding-bottom--6 { padding-bottom: 48px !important; } .ds-u-sm-padding-left--6 { padding-left: 48px !important; } .ds-u-sm-padding-x--6 { padding-left: 48px !important; padding-right: 48px !important; } .ds-u-sm-padding-y--6 { padding-bottom: 48px !important; padding-top: 48px !important; } .ds-u-sm-padding--7 { padding: 56px !important; } .ds-u-sm-padding-top--7 { padding-top: 56px !important; } .ds-u-sm-padding-right--7 { padding-right: 56px !important; } .ds-u-sm-padding-bottom--7 { padding-bottom: 56px !important; } .ds-u-sm-padding-left--7 { padding-left: 56px !important; } .ds-u-sm-padding-x--7 { padding-left: 56px !important; padding-right: 56px !important; } .ds-u-sm-padding-y--7 { padding-bottom: 56px !important; padding-top: 56px !important; } }

@media (min-width: 768px) { .ds-u-md-padding--0 { padding: 0 !important; } .ds-u-md-padding-top--0 { padding-top: 0 !important; } .ds-u-md-padding-right--0 { padding-right: 0 !important; } .ds-u-md-padding-bottom--0 { padding-bottom: 0 !important; } .ds-u-md-padding-left--0 { padding-left: 0 !important; } .ds-u-md-padding-x--0 { padding-left: 0 !important; padding-right: 0 !important; } .ds-u-md-padding-y--0 { padding-bottom: 0 !important; padding-top: 0 !important; } .ds-u-md-padding--1 { padding: 8px !important; } .ds-u-md-padding-top--1 { padding-top: 8px !important; } .ds-u-md-padding-right--1 { padding-right: 8px !important; } .ds-u-md-padding-bottom--1 { padding-bottom: 8px !important; } .ds-u-md-padding-left--1 { padding-left: 8px !important; } .ds-u-md-padding-x--1 { padding-left: 8px !important; padding-right: 8px !important; } .ds-u-md-padding-y--1 { padding-bottom: 8px !important; padding-top: 8px !important; } .ds-u-md-padding--2 { padding: 16px !important; } .ds-u-md-padding-top--2 { padding-top: 16px !important; } .ds-u-md-padding-right--2 { padding-right: 16px !important; } .ds-u-md-padding-bottom--2 { padding-bottom: 16px !important; } .ds-u-md-padding-left--2 { padding-left: 16px !important; } .ds-u-md-padding-x--2 { padding-left: 16px !important; padding-right: 16px !important; } .ds-u-md-padding-y--2 { padding-bottom: 16px !important; padding-top: 16px !important; } .ds-u-md-padding--3 { padding: 24px !important; } .ds-u-md-padding-top--3 { padding-top: 24px !important; } .ds-u-md-padding-right--3 { padding-right: 24px !important; } .ds-u-md-padding-bottom--3 { padding-bottom: 24px !important; } .ds-u-md-padding-left--3 { padding-left: 24px !important; } .ds-u-md-padding-x--3 { padding-left: 24px !important; padding-right: 24px !important; } .ds-u-md-padding-y--3 { padding-bottom: 24px !important; padding-top: 24px !important; } .ds-u-md-padding--4 { padding: 32px !important; } .ds-u-md-padding-top--4 { padding-top: 32px !important; } .ds-u-md-padding-right--4 { padding-right: 32px !important; } .ds-u-md-padding-bottom--4 { padding-bottom: 32px !important; } .ds-u-md-padding-left--4 { padding-left: 32px !important; } .ds-u-md-padding-x--4 { padding-left: 32px !important; padding-right: 32px !important; } .ds-u-md-padding-y--4 { padding-bottom: 32px !important; padding-top: 32px !important; } .ds-u-md-padding--5 { padding: 40px !important; } .ds-u-md-padding-top--5 { padding-top: 40px !important; } .ds-u-md-padding-right--5 { padding-right: 40px !important; } .ds-u-md-padding-bottom--5 { padding-bottom: 40px !important; } .ds-u-md-padding-left--5 { padding-left: 40px !important; } .ds-u-md-padding-x--5 { padding-left: 40px !important; padding-right: 40px !important; } .ds-u-md-padding-y--5 { padding-bottom: 40px !important; padding-top: 40px !important; } .ds-u-md-padding--6 { padding: 48px !important; } .ds-u-md-padding-top--6 { padding-top: 48px !important; } .ds-u-md-padding-right--6 { padding-right: 48px !important; } .ds-u-md-padding-bottom--6 { padding-bottom: 48px !important; } .ds-u-md-padding-left--6 { padding-left: 48px !important; } .ds-u-md-padding-x--6 { padding-left: 48px !important; padding-right: 48px !important; } .ds-u-md-padding-y--6 { padding-bottom: 48px !important; padding-top: 48px !important; } .ds-u-md-padding--7 { padding: 56px !important; } .ds-u-md-padding-top--7 { padding-top: 56px !important; } .ds-u-md-padding-right--7 { padding-right: 56px !important; } .ds-u-md-padding-bottom--7 { padding-bottom: 56px !important; } .ds-u-md-padding-left--7 { padding-left: 56px !important; } .ds-u-md-padding-x--7 { padding-left: 56px !important; padding-right: 56px !important; } .ds-u-md-padding-y--7 { padding-bottom: 56px !important; padding-top: 56px !important; } }

@media (min-width: 1024px) { .ds-u-lg-padding--0 { padding: 0 !important; } .ds-u-lg-padding-top--0 { padding-top: 0 !important; } .ds-u-lg-padding-right--0 { padding-right: 0 !important; } .ds-u-lg-padding-bottom--0 { padding-bottom: 0 !important; } .ds-u-lg-padding-left--0 { padding-left: 0 !important; } .ds-u-lg-padding-x--0 { padding-left: 0 !important; padding-right: 0 !important; } .ds-u-lg-padding-y--0 { padding-bottom: 0 !important; padding-top: 0 !important; } .ds-u-lg-padding--1 { padding: 8px !important; } .ds-u-lg-padding-top--1 { padding-top: 8px !important; } .ds-u-lg-padding-right--1 { padding-right: 8px !important; } .ds-u-lg-padding-bottom--1 { padding-bottom: 8px !important; } .ds-u-lg-padding-left--1 { padding-left: 8px !important; } .ds-u-lg-padding-x--1 { padding-left: 8px !important; padding-right: 8px !important; } .ds-u-lg-padding-y--1 { padding-bottom: 8px !important; padding-top: 8px !important; } .ds-u-lg-padding--2 { padding: 16px !important; } .ds-u-lg-padding-top--2 { padding-top: 16px !important; } .ds-u-lg-padding-right--2 { padding-right: 16px !important; } .ds-u-lg-padding-bottom--2 { padding-bottom: 16px !important; } .ds-u-lg-padding-left--2 { padding-left: 16px !important; } .ds-u-lg-padding-x--2 { padding-left: 16px !important; padding-right: 16px !important; } .ds-u-lg-padding-y--2 { padding-bottom: 16px !important; padding-top: 16px !important; } .ds-u-lg-padding--3 { padding: 24px !important; } .ds-u-lg-padding-top--3 { padding-top: 24px !important; } .ds-u-lg-padding-right--3 { padding-right: 24px !important; } .ds-u-lg-padding-bottom--3 { padding-bottom: 24px !important; } .ds-u-lg-padding-left--3 { padding-left: 24px !important; } .ds-u-lg-padding-x--3 { padding-left: 24px !important; padding-right: 24px !important; } .ds-u-lg-padding-y--3 { padding-bottom: 24px !important; padding-top: 24px !important; } .ds-u-lg-padding--4 { padding: 32px !important; } .ds-u-lg-padding-top--4 { padding-top: 32px !important; } .ds-u-lg-padding-right--4 { padding-right: 32px !important; } .ds-u-lg-padding-bottom--4 { padding-bottom: 32px !important; } .ds-u-lg-padding-left--4 { padding-left: 32px !important; } .ds-u-lg-padding-x--4 { padding-left: 32px !important; padding-right: 32px !important; } .ds-u-lg-padding-y--4 { padding-bottom: 32px !important; padding-top: 32px !important; } .ds-u-lg-padding--5 { padding: 40px !important; } .ds-u-lg-padding-top--5 { padding-top: 40px !important; } .ds-u-lg-padding-right--5 { padding-right: 40px !important; } .ds-u-lg-padding-bottom--5 { padding-bottom: 40px !important; } .ds-u-lg-padding-left--5 { padding-left: 40px !important; } .ds-u-lg-padding-x--5 { padding-left: 40px !important; padding-right: 40px !important; } .ds-u-lg-padding-y--5 { padding-bottom: 40px !important; padding-top: 40px !important; } .ds-u-lg-padding--6 { padding: 48px !important; } .ds-u-lg-padding-top--6 { padding-top: 48px !important; } .ds-u-lg-padding-right--6 { padding-right: 48px !important; } .ds-u-lg-padding-bottom--6 { padding-bottom: 48px !important; } .ds-u-lg-padding-left--6 { padding-left: 48px !important; } .ds-u-lg-padding-x--6 { padding-left: 48px !important; padding-right: 48px !important; } .ds-u-lg-padding-y--6 { padding-bottom: 48px !important; padding-top: 48px !important; } .ds-u-lg-padding--7 { padding: 56px !important; } .ds-u-lg-padding-top--7 { padding-top: 56px !important; } .ds-u-lg-padding-right--7 { padding-right: 56px !important; } .ds-u-lg-padding-bottom--7 { padding-bottom: 56px !important; } .ds-u-lg-padding-left--7 { padding-left: 56px !important; } .ds-u-lg-padding-x--7 { padding-left: 56px !important; padding-right: 56px !important; } .ds-u-lg-padding-y--7 { padding-bottom: 56px !important; padding-top: 56px !important; } }

@media (min-width: 1280px) { .ds-u-xl-padding--0 { padding: 0 !important; } .ds-u-xl-padding-top--0 { padding-top: 0 !important; } .ds-u-xl-padding-right--0 { padding-right: 0 !important; } .ds-u-xl-padding-bottom--0 { padding-bottom: 0 !important; } .ds-u-xl-padding-left--0 { padding-left: 0 !important; } .ds-u-xl-padding-x--0 { padding-left: 0 !important; padding-right: 0 !important; } .ds-u-xl-padding-y--0 { padding-bottom: 0 !important; padding-top: 0 !important; } .ds-u-xl-padding--1 { padding: 8px !important; } .ds-u-xl-padding-top--1 { padding-top: 8px !important; } .ds-u-xl-padding-right--1 { padding-right: 8px !important; } .ds-u-xl-padding-bottom--1 { padding-bottom: 8px !important; } .ds-u-xl-padding-left--1 { padding-left: 8px !important; } .ds-u-xl-padding-x--1 { padding-left: 8px !important; padding-right: 8px !important; } .ds-u-xl-padding-y--1 { padding-bottom: 8px !important; padding-top: 8px !important; } .ds-u-xl-padding--2 { padding: 16px !important; } .ds-u-xl-padding-top--2 { padding-top: 16px !important; } .ds-u-xl-padding-right--2 { padding-right: 16px !important; } .ds-u-xl-padding-bottom--2 { padding-bottom: 16px !important; } .ds-u-xl-padding-left--2 { padding-left: 16px !important; } .ds-u-xl-padding-x--2 { padding-left: 16px !important; padding-right: 16px !important; } .ds-u-xl-padding-y--2 { padding-bottom: 16px !important; padding-top: 16px !important; } .ds-u-xl-padding--3 { padding: 24px !important; } .ds-u-xl-padding-top--3 { padding-top: 24px !important; } .ds-u-xl-padding-right--3 { padding-right: 24px !important; } .ds-u-xl-padding-bottom--3 { padding-bottom: 24px !important; } .ds-u-xl-padding-left--3 { padding-left: 24px !important; } .ds-u-xl-padding-x--3 { padding-left: 24px !important; padding-right: 24px !important; } .ds-u-xl-padding-y--3 { padding-bottom: 24px !important; padding-top: 24px !important; } .ds-u-xl-padding--4 { padding: 32px !important; } .ds-u-xl-padding-top--4 { padding-top: 32px !important; } .ds-u-xl-padding-right--4 { padding-right: 32px !important; } .ds-u-xl-padding-bottom--4 { padding-bottom: 32px !important; } .ds-u-xl-padding-left--4 { padding-left: 32px !important; } .ds-u-xl-padding-x--4 { padding-left: 32px !important; padding-right: 32px !important; } .ds-u-xl-padding-y--4 { padding-bottom: 32px !important; padding-top: 32px !important; } .ds-u-xl-padding--5 { padding: 40px !important; } .ds-u-xl-padding-top--5 { padding-top: 40px !important; } .ds-u-xl-padding-right--5 { padding-right: 40px !important; } .ds-u-xl-padding-bottom--5 { padding-bottom: 40px !important; } .ds-u-xl-padding-left--5 { padding-left: 40px !important; } .ds-u-xl-padding-x--5 { padding-left: 40px !important; padding-right: 40px !important; } .ds-u-xl-padding-y--5 { padding-bottom: 40px !important; padding-top: 40px !important; } .ds-u-xl-padding--6 { padding: 48px !important; } .ds-u-xl-padding-top--6 { padding-top: 48px !important; } .ds-u-xl-padding-right--6 { padding-right: 48px !important; } .ds-u-xl-padding-bottom--6 { padding-bottom: 48px !important; } .ds-u-xl-padding-left--6 { padding-left: 48px !important; } .ds-u-xl-padding-x--6 { padding-left: 48px !important; padding-right: 48px !important; } .ds-u-xl-padding-y--6 { padding-bottom: 48px !important; padding-top: 48px !important; } .ds-u-xl-padding--7 { padding: 56px !important; } .ds-u-xl-padding-top--7 { padding-top: 56px !important; } .ds-u-xl-padding-right--7 { padding-right: 56px !important; } .ds-u-xl-padding-bottom--7 { padding-bottom: 56px !important; } .ds-u-xl-padding-left--7 { padding-left: 56px !important; } .ds-u-xl-padding-x--7 { padding-left: 56px !important; padding-right: 56px !important; } .ds-u-xl-padding-y--7 { padding-bottom: 56px !important; padding-top: 56px !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Text alignment

Align text using the `text-align` utility.

**Format**: `ds-u-text-align--[VALUE]`

Markup:
<div class="ds-u-text-align--center">
  <code class="preview__label">ds-u-text-align--center</code>
  Center
</div>
<div class="ds-u-text-align--left">
  <code class="preview__label">ds-u-text-align--left</code>
  Left
</div>
<div class="ds-u-text-align--right">
  <code class="preview__label">ds-u-text-align--right</code>
  Right
</div>

Style guide: utilities.text-align
*/
.ds-u-text-align--center { text-align: center !important; }

.ds-u-text-align--left { text-align: left !important; }

.ds-u-text-align--right { text-align: right !important; }

/*
Responsive text alignment

@responsive

Use a [breakpoint prefix]({{root}}/guidelines/responsive) to change the text alignment at specific breakpoints.

Markup:
<div class="ds-u-sm-text-align--center ds-u-md-text-align--left ds-u-lg-text-align--right">
  {{lorem-s}}
</div>

Style guide: utilities.text-align.responsive
*/
@media (min-width: 544px) { .ds-u-sm-text-align--center { text-align: center !important; } .ds-u-sm-text-align--left { text-align: left !important; } .ds-u-sm-text-align--right { text-align: right !important; } }

@media (min-width: 768px) { .ds-u-md-text-align--center { text-align: center !important; } .ds-u-md-text-align--left { text-align: left !important; } .ds-u-md-text-align--right { text-align: right !important; } }

@media (min-width: 1024px) { .ds-u-lg-text-align--center { text-align: center !important; } .ds-u-lg-text-align--left { text-align: left !important; } .ds-u-lg-text-align--right { text-align: right !important; } }

@media (min-width: 1280px) { .ds-u-xl-text-align--center { text-align: center !important; } .ds-u-xl-text-align--left { text-align: left !important; } .ds-u-xl-text-align--right { text-align: right !important; } }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Text decoration

Set whether text is underlined or not using the `text-decoration` utility.

**Format**: `ds-u-text-decoration--[VALUE]`

Markup:
<code class="preview__label">ds-u-text-decoration--underline</code>
<span class="ds-u-text-decoration--underline">Underlined text</span>
<code class="preview__label">ds-u-text-decoration--none</code>
<a class="ds-u-text-decoration--none" href="javascript:void(0);">Link text without underline</a>

Style guide: utilities.text-decoration
*/
.ds-u-text-decoration--underline { text-decoration: underline !important; }

.ds-u-text-decoration--none { text-decoration: none !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Text transform

Set the capitalization of text using the text transform utility.

**Format**: `ds-u-text-transform--[VALUE]`

Markup:
<code class="preview__label">ds-u-text-transform--uppercase</code>
<div class="ds-u-text-transform--uppercase">{{lorem-m}}</div>
<code class="preview__label">ds-u-text-transform--lowercase</code>
<div class="ds-u-text-transform--lowercase">{{lorem-m}}</div>
<code class="preview__label">ds-u-text-transform--capitalize</code>
<div class="ds-u-text-transform--capitalize">{{lorem-m}}</div>

Style guide: utilities.text-transform
*/
.ds-u-text-transform--uppercase { text-transform: uppercase !important; }

.ds-u-text-transform--lowercase { text-transform: lowercase !important; }

.ds-u-text-transform--capitalize { text-transform: capitalize !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Truncate

Use the truncate utility (`ds-u-truncate`) to limit a text string to one line.

### Accessibility

Place the full text in a `title` attribute so that it’s accessible on hover.

Markup:
<p class="ds-u-truncate" title="{{lorem-l}}">
  {{lorem-l}}
</p>

Style guide: utilities.truncate
*/
.ds-u-truncate { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* stylelint-disable declaration-no-important */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Vertical align

Use the vertical align utility on inline-level elements (`inline` and `inline-block`) and on table cells.

**Format**: `ds-u-valign--[VALUE]`

Markup:
<table>
  <tbody>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">A</td>
      <td class="ds-u-valign--top">
        <code class="preview__label">ds-u-valign--top</code>
        Top alignment
      </td>
    </tr>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">B</td>
      <td class="ds-u-valign--middle">
        <code class="preview__label">ds-u-valign--middle</code>
        Middle alignment
      </td>
    </tr>
    <tr>
      <td class="ds-u-font-size--display ds-u-leading--reset ds-u-padding--4 ds-u-fill--primary-alt-lightest">C</td>
      <td class="ds-u-valign--bottom">
        <code class="preview__label">ds-u-valign--bottom</code>
        Bottom alignment
      </td>
    </tr>
  </tbody>
</table>

Style guide: utilities.vertical-align
*/
.ds-u-valign--top { vertical-align: top !important; }

.ds-u-valign--middle { vertical-align: middle !important; }

.ds-u-valign--bottom { vertical-align: bottom !important; }

/*! Design System - Layout v{{version}} */
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Color

@uswds https://standards.usa.gov/components/colors/

<p class="ds-text--lead">The design system provides a flexible, yet distinctly American palette designed to communicate warmth and trustworthiness while meeting the highest standards of 508 color contrast requirements.</p>

The palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open American spirit, with bright saturated tints of blue, grounded in sophisticated deeper shades of cool blues and grays. These colors — combined with clear hierarchy, good information design, and ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral backdrop on which brighter shades, clean type treatment, and bright white content areas “pop” on the page.

Style guide: style.color
*/
/*
Primary colors

@hide-markup

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Markup:
<% var colors = [
  'primary', 'primary-darker', 'primary-darkest',
  'base', 'gray-dark', 'gray-light', 'white'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.primary
*/
/*
Secondary colors

@hide-markup

These are accent colors to provide additional lightness and style to pages looking for a more modern flair. These colors should be used to highlight important features on a page, such as buttons, or for visual style elements, such as illustrations. They should be used sparingly and never draw the eye to more than one piece of information at a time.

Markup:
<% var colors = [
  'primary-alt-darkest', 'primary-alt-dark', 'primary-alt', 'primary-alt-light', 'primary-alt-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.secondary
*/
/*
Background colors

@hide-markup

These colors are used largely for background blocks and large content areas. When alternating between tones, be sure to use enough contrast between adjacent colors.

Markup:
<% var colors = [
  'background', 'background-inverse', 'gray-dark', 'gray', 'gray-light', 'gray-lighter', 'gray-lightest'
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.background
*/
/*
Status colors

@hide-markup

These colors are used largely to indicate the status of something. Be cautious using these colors to signify something that may contradict what most people would expect the colors to be used for.

Markup:
<% var colors = [
  'success', 'success-light', 'success-lighter', 'success-lightest',
  'warn', 'warn-light', 'warn-lighter', 'warn-lightest',
  'error-darkest', 'error-dark', 'error', 'error-light', 'error-lighter', 'error-lightest',
]; -%>
<div class="ds-l-container">
  <div class="ds-l-row">
    <% colors.forEach(color => { -%>
      <article class="ds-l-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-u-padding-x--1 ds-u-padding-bottom--2 c-swatch">
        <div class="c-swatch__preview ds-u-fill--<%= color %>"></div>
        <strong class="js-swatch-hex">#</strong>
        <code class="c-swatch__label">
          $color-<%= color %>
        </code>
      </article>
    <% }) -%>
  </div>

Style guide: style.color.status
*/
/*
Spacing

The design system uses multiples of `8px` for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

## Usage

- Use the [margin]({{root}}/utilities/margin) and [padding]({{root}}/utilities/padding) utility classes to change a UI's spacing. These utility classes are named in a way that allows you to use the modifier to calculate the amount of spacing. For example, a margin utility class that adds `16px` of spacing would be `ds-u-margin--2`. We can calculate this by looking at the class's modifier (`2`) and multiplying that by our multiple: `2 × 8px = 16px`
- If you've imported the design system's Sass file, you can also use the spacer Sass variables, which follow the format `$spacer-*` where `*` is a number between 1–7 (i.e. `$spacer-4`)

## Learn more

- [The 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

Style guide: layout.spacing
*/
/*
Use a container to center align your page and constrain its width so it doesn't
span too wide.
*/
.ds-l-container { margin-left: auto; margin-right: auto; max-width: 1040px; padding-left: 16px; padding-right: 16px; }

@media (min-width: 544px) { .ds-l-container { padding-left: 32px; padding-right: 32px; } }

.ds-l-row { display: flex; flex-wrap: wrap; margin-left: -16px; margin-right: -16px; }

.ds-l-xl-col, .ds-l-xl-col--12, .ds-l-xl-col--11, .ds-l-xl-col--10, .ds-l-xl-col--9, .ds-l-xl-col--8, .ds-l-xl-col--7, .ds-l-xl-col--6, .ds-l-xl-col--5, .ds-l-xl-col--4, .ds-l-xl-col--3, .ds-l-xl-col--2, .ds-l-xl-col--1, .ds-l-lg-col, .ds-l-lg-col--12, .ds-l-lg-col--11, .ds-l-lg-col--10, .ds-l-lg-col--9, .ds-l-lg-col--8, .ds-l-lg-col--7, .ds-l-lg-col--6, .ds-l-lg-col--5, .ds-l-lg-col--4, .ds-l-lg-col--3, .ds-l-lg-col--2, .ds-l-lg-col--1, .ds-l-md-col, .ds-l-md-col--12, .ds-l-md-col--11, .ds-l-md-col--10, .ds-l-md-col--9, .ds-l-md-col--8, .ds-l-md-col--7, .ds-l-md-col--6, .ds-l-md-col--5, .ds-l-md-col--4, .ds-l-md-col--3, .ds-l-md-col--2, .ds-l-md-col--1, .ds-l-sm-col, .ds-l-sm-col--12, .ds-l-sm-col--11, .ds-l-sm-col--10, .ds-l-sm-col--9, .ds-l-sm-col--8, .ds-l-sm-col--7, .ds-l-sm-col--6, .ds-l-sm-col--5, .ds-l-sm-col--4, .ds-l-sm-col--3, .ds-l-sm-col--2, .ds-l-sm-col--1, .ds-l-col, .ds-l-col--12, .ds-l-col--11, .ds-l-col--10, .ds-l-col--9, .ds-l-col--8, .ds-l-col--7, .ds-l-col--6, .ds-l-col--5, .ds-l-col--4, .ds-l-col--3, .ds-l-col--2, .ds-l-col--1 { box-sizing: border-box; min-height: 1px; min-width: 0; padding-left: 16px; padding-right: 16px; position: relative; width: 100%; }

.ds-l-col { flex-basis: 0; flex-grow: 1; max-width: 100%; }

.ds-l-col--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; }

.ds-l-col--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; }

.ds-l-col--3 { flex: 0 0 25%; max-width: 25%; }

.ds-l-col--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; }

.ds-l-col--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; }

.ds-l-col--6 { flex: 0 0 50%; max-width: 50%; }

.ds-l-col--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; }

.ds-l-col--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; }

.ds-l-col--9 { flex: 0 0 75%; max-width: 75%; }

.ds-l-col--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; }

.ds-l-col--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; }

.ds-l-col--12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 544px) { .ds-l-sm-col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .ds-l-sm-col--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-l-sm-col--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-l-sm-col--3 { flex: 0 0 25%; max-width: 25%; } .ds-l-sm-col--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-l-sm-col--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-l-sm-col--6 { flex: 0 0 50%; max-width: 50%; } .ds-l-sm-col--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-l-sm-col--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-l-sm-col--9 { flex: 0 0 75%; max-width: 75%; } .ds-l-sm-col--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-l-sm-col--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-l-sm-col--12 { flex: 0 0 100%; max-width: 100%; } }

@media (min-width: 768px) { .ds-l-md-col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .ds-l-md-col--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-l-md-col--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-l-md-col--3 { flex: 0 0 25%; max-width: 25%; } .ds-l-md-col--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-l-md-col--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-l-md-col--6 { flex: 0 0 50%; max-width: 50%; } .ds-l-md-col--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-l-md-col--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-l-md-col--9 { flex: 0 0 75%; max-width: 75%; } .ds-l-md-col--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-l-md-col--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-l-md-col--12 { flex: 0 0 100%; max-width: 100%; } }

@media (min-width: 1024px) { .ds-l-lg-col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .ds-l-lg-col--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-l-lg-col--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-l-lg-col--3 { flex: 0 0 25%; max-width: 25%; } .ds-l-lg-col--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-l-lg-col--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-l-lg-col--6 { flex: 0 0 50%; max-width: 50%; } .ds-l-lg-col--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-l-lg-col--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-l-lg-col--9 { flex: 0 0 75%; max-width: 75%; } .ds-l-lg-col--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-l-lg-col--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-l-lg-col--12 { flex: 0 0 100%; max-width: 100%; } }

@media (min-width: 1280px) { .ds-l-xl-col { flex-basis: 0; flex-grow: 1; max-width: 100%; } .ds-l-xl-col--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; } .ds-l-xl-col--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; } .ds-l-xl-col--3 { flex: 0 0 25%; max-width: 25%; } .ds-l-xl-col--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .ds-l-xl-col--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; } .ds-l-xl-col--6 { flex: 0 0 50%; max-width: 50%; } .ds-l-xl-col--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; } .ds-l-xl-col--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; } .ds-l-xl-col--9 { flex: 0 0 75%; max-width: 75%; } .ds-l-xl-col--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; } .ds-l-xl-col--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; } .ds-l-xl-col--12 { flex: 0 0 100%; max-width: 100%; } }

/*
Grid

The design system provides a 12-column, responsive, flexbox grid to provide structure and align content.

The grid consists of three distinct pieces:

- A **container** adds a maximum width and centers the content
- A **row** enables the flexbox layout and holds between 1-12 **columns**

### Installation

The grid is opt-in and not distributed with the core design system package. Install the NPM package or [download the latest release](https://github.com/CMSgov/design-system/releases).

```
npm install @cmsgov/design-system-layout --save
```

[View the package's README for additional info.](https://github.com/CMSgov/design-system/blob/master/packages/layout/README.md)

### Browser support

Flexbox grid supports modern browsers and Internet Explorer 10+. In older versions of Internet Explorer the grid columns will be stacked.

Style guide: layout.grid
*/
/*
Default behavior

Columns without a set width will automatically layout with equal widths. For example, below are four instances of `.ds-l-col` which are each automatically 25% wide. The columns will automatically wrap when they don't fit a single row.

Column widths are set in percentages, so they’re always responsive and will be sized relative to their parent row.

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col">
      Auto
    </div>
    <div class="ds-l-col">
      Auto
    </div>
    <div class="ds-l-col">
      Auto
    </div>
    <div class="ds-l-col">
      Auto
    </div>
  </div>
</section>

Style guide: layout.grid.default
*/
/*
Specifying number of columns

Specify the number of columns (1-12) to span using `.ds-l-col--*` classes. These classes will span `*` columns. So, if you want two elements that each span half the row, you would use `.ds-l-col--6`

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--6">
      6 columns
    </div>
    <div class="ds-l-col--6">
      6 columns
    </div>
  </div>
</section>

Style guide: layout.grid.columns
*/
/*
Mobile, tablet, and desktop grids

@responsive

Each column class can include a [breakpoint "prefix"]({{root}}/guidelines/responsive) (`sm`, `md`, `lg`, `xl`), allowing you to change the column widths based on the viewport width.

An element with a `ds-l-{breakpoint}-col--*` class will span `*` columns at viewports matching `breakpoint` and larger.

In the example below, the cells span:

- 1/6 of the row on `xl` viewports, using `ds-l-xl-col--2`
- 1/4 of the row on `lg` viewports, using `ds-l-lg-col--3`
- 1/3 of the row on `md` viewports, using `ds-l-md-col--4`
- 1/2 of the row on `sm` viewports, using `ds-l-sm-col--6`
- The entire width of the row on viewports smaller than the `sm` breakpoint, using `ds-l-col--12`

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      A
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      B
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      C
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      D
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      E
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      F
    </div>
  </div>
</section>

Style guide: layout.grid.responsive
*/
/*
Nested grids

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--9">
      Level 1
      <div class="ds-l-row">
        <article class="ds-l-col--4">
          Level 2
        </article>
        <article class="ds-l-col--4">
          Level 2
        </article>
        <article class="ds-l-col--4">
          Level 2
        </article>
      </div>
    </div>
    <div class="ds-l-col--3">
      Level 1
    </div>
  </div>
</section>

Style guide: layout.grid.nested
*/
/*
Offsetting columns

Offset columns using the [margin auto utility class]({{root}}/utilities/margin):

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--3">
      3 columns
    </div>
    <div class="ds-l-col--4 ds-u-margin-left--auto">
      4 columns, offset 5 columns
    </div>
  </div>
</section>

Style guide: layout.grid.offset
*/
/*
Alignment

Align columns horizontally or vertically using [flexbox utility classes]({{root}}/utilities/flexbox). To align columns horizontally, use the `justify-content` utility class. To align columns vertically, use the `align-items` utility class.

Markup:
<section class="ds-l-container preview__grid">
  <div class="ds-l-row ds-u-fill--gray">
    <div class="ds-l-col--3">Left</div>
  </div>
  <div class="ds-l-row ds-u-justify-content--center ds-u-fill--gray">
    <div class="ds-l-col--3">Center</div>
  </div>
  <div class="ds-l-row ds-u-justify-content--end ds-u-fill--gray">
    <div class="ds-l-col--3">Right</div>
  </div>
  <div class="ds-l-row ds-u-align-items--start ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Top</div>
    <div class="ds-l-col--3">Top</div>
    <div class="ds-l-col--3">Top</div>
  </div>
  <div class="ds-l-row ds-u-align-items--center ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Center</div>
    <div class="ds-l-col--3">Center</div>
    <div class="ds-l-col--3">Center</div>
  </div>
  <div class="ds-l-row ds-u-align-items--end ds-u-fill--gray ds-u-margin-y--2" style="height: 125px">
    <div class="ds-l-col--3">Bottom</div>
    <div class="ds-l-col--3">Bottom</div>
    <div class="ds-l-col--3">Bottom</div>
  </div>
</section>

Style guide: layout.grid.alignment
*/
/*
---

## When to use

- Almost always use a grid layout — visitors can read more quickly on pages that use grids. Choose a single grid system for your entire site.

## When to consider alternatives

- Avoid mixing this grid and other grid systems.

## Guidance

- Choose a 12-column grid with flexible column widths and fixed gutters.
- Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the [measure utility classes]({{root}}/utilities/measure).

## Accessibility

- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
- The DOM order and visual presentation of content should be consistent, in order to not break keyboard navigation. This means you should avoid changing the flexbox `order` property of the grid columns.

## Customization

The following Sass variables can be overridden to customize the grid:

- `$grid-columns`
- `$grid-gutter-width`

## Learn more

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Flexbox & the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)

Style guide: layout.grid.guidance
*/
.cherry-tangerine-underline { position: relative; }

.cherry-tangerine-underline:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #C9312A 10%, #F1B75E 90%); }

.grape-rose-underline { position: relative; }

.grape-rose-underline:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #6F38AE 10%, #DC6069 90%); }

.blueberry-lime-underline { position: relative; }

.blueberry-lime-underline:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #0573AE 10%, #CBE771 90%); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.CMS-developer-portal-logo { text-decoration: none; }

.main-nav ul { list-style-type: none; }

.main-nav ul li { display: inline-block; margin-left: 32px; }

.main-nav ul li a { color: #323a45; text-decoration: none; }

@media only screen and (max-width: 544px) { .main-nav { display: none; } }

.subnav { position: sticky; top: 24px; }

.subnav ul li { margin-bottom: 16px; }

.subnav ul li a { color: #323a45; text-decoration: none; transition: padding 0.5s ease; position: relative; }

.subnav ul li a:hover, .subnav ul li a:focus, .subnav ul li a:active { padding-left: 8px; }

.subnav ul li.active a { padding-left: 8px; }

.subnav ul li.active .cherry-tangerine-link { position: relative; }

.subnav ul li.active .cherry-tangerine-link:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #C9312A 10%, #F1B75E 90%); }

.subnav ul li.active .grape-rose-link { position: relative; }

.subnav ul li.active .grape-rose-link:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #6F38AE 10%, #DC6069 90%); }

.subnav ul li.active .blueberry-lime-link { position: relative; }

.subnav ul li.active .blueberry-lime-link:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #0573AE 10%, #CBE771 90%); }

.subnav .cherry-tangerine-link:hover, .subnav .cherry-tangerine-link:focus, .subnav .cherry-tangerine-link:active { position: relative; }

.subnav .cherry-tangerine-link:hover:before, .subnav .cherry-tangerine-link:focus:before, .subnav .cherry-tangerine-link:active:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #C9312A 10%, #F1B75E 90%); }

.subnav .grape-rose-link:hover, .subnav .grape-rose-link:focus, .subnav .grape-rose-link:active { position: relative; }

.subnav .grape-rose-link:hover:before, .subnav .grape-rose-link:focus:before, .subnav .grape-rose-link:active:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #6F38AE 10%, #DC6069 90%); }

.subnav .blueberry-lime-link:hover, .subnav .blueberry-lime-link:focus, .subnav .blueberry-lime-link:active { position: relative; }

.subnav .blueberry-lime-link:hover:before, .subnav .blueberry-lime-link:focus:before, .subnav .blueberry-lime-link:active:before { content: ""; position: absolute; left: -8px; width: 4px; height: 100%; background: linear-gradient(30deg, #0573AE 10%, #CBE771 90%); }

.mobile-nav-trigger { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1000; font-weight: bold; text-decoration: none; }

.mobile-nav-tray { position: fixed; top: 100%; height: 0; right: 0; bottom: 0; left: 0; z-index: 999; transition: all 0.5s ease; }

.mobile-nav-tray .mobile-nav ul li a { color: #323a45; text-decoration: none; }

.mobile-nav-tray-expanded { top: 0; height: 100%; transition: all 0.5s ease; }

.home-developer-background { background-image: url(img/collaborative-developers.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }

.home-developer-background h2 { margin-top: 0px; }

.solid-container { width: 80%; flex-grow: 2; background-color: #00529B; opacity: 0.9; }

.gradient-container { width: 20%; flex-grow: 1; background: linear-gradient(90deg, #00529B 10%, #45CEB0 90%); opacity: 0.9; }

header .ctas a:not(:first-child) { margin-left: 16px; }

@media only screen and (max-width: 544px) { header .ctas a:not(:first-child) { margin-left: 0px; margin-top: 16px; } }

.ocean-teal-gradient-background { background: linear-gradient(30deg, rgba(0, 82, 155, 0.9), rgba(0, 82, 155, 0.9) 70%, rgba(69, 206, 176, 0.8)); }

.grape-rose-gradient-background { background: linear-gradient(30deg, #6F38AE, #6F38AE 70%, #DC6069); }

.cherry-tangerine-gradient-background { background: linear-gradient(30deg, #C9312A, #C9312A 70%, #F1B75E); }

.blueberry-lime-gradient-background { background: linear-gradient(30deg, #0573AE, #0573AE 70%, #CBE771); }

.ocean-flat-background { background-color: rgba(0, 82, 155, 0.1); }

.grape-flat-background { background-color: #6F38AE; }

.cherry-flat-background { background-color: #C9312A; }

.blueberry-flat-background { background-color: #0573AE; }

.fefwsg-pattern { background-image: url(img/fwsg-pattern-fade.png); background-size: contain; background-repeat: no-repeat; background-position: top right; }

.dataset-pattern { background-image: url(img/data-pattern-fade.png); background-size: contain; background-repeat: no-repeat; background-position: top right; }

.api-pattern { background-image: url(img/api-pattern-fade.png); background-size: contain; background-repeat: no-repeat; background-position: top right; }

@media only screen and (max-width: 995px) { .ocean-teal-gradient-background { background: none; background-color: #00529b; } .ocean-flat-background { background-color: #00529b; } .grape-rose-gradient-background { background: none; background-color: #6F38AE; } .blueberry-lime-gradient-background { background: none; background-color: #0573AE; } .cherry-tangerine-gradient-background { background: none; background-color: #C9312A; } .fefwsg-pattern { background: none; } .dataset-pattern { background: none; } .api-pattern { background: none; } }

.project-section { margin-bottom: 96px; }

.project-list { list-style-type: none; margin: 0px; padding: 0px; }

.project-card { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.07), 0 7px 17px 0 rgba(0, 0, 0, 0.1); padding: 16px; position: relative; transition: all .2s ease-out; text-decoration: none !important; }

.project-card:hover { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 7px 17px 0 rgba(0, 0, 0, 0.3); }

.page-header { background: linear-gradient(30deg, #00529B 10%, #45CEB0 90%); }

.ds-c-badge { letter-spacing: 2px; background-color: #fff; color: #323a45; }

article hr { border: 0; height: 2px; background: #d6d7d9; margin: 32px 0px; }

article.datasets h2 { position: relative; display: inline-block; }

article.datasets h2:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #C9312A 10%, #F1B75E 90%); }

article.front-end-frameworks h2 { position: relative; display: inline-block; }

article.front-end-frameworks h2:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #6F38AE 10%, #DC6069 90%); }

article.api h2 { position: relative; display: inline-block; }

article.api h2:after { content: ""; position: absolute; bottom: -8px; left: 0; height: 4px; width: 100%; background: linear-gradient(30deg, #0573AE 10%, #CBE771 90%); }

.button--white { color: #fff; border: 2px #fff solid; transition: all .3s ease; }

.button--white:hover, .button--white:active, .button--white:focus { border: 2px #fff solid; background-color: #fff; color: #323a45; }

footer:before { background: linear-gradient(30deg, #00529B 10%, #45CEB0 90%); content: ''; position: relative; top: -48px; display: block; height: 3px; width: 100%; }

input.ds-c-field__error-message, textarea.ds-c-field__error-message { border: 1px solid #e31c3d; }

span.ds-c-field__error-message { color: #e31c3d; display: block; }

/*# sourceMappingURL=main.css.map */