SAMHSA Styleguide

Standards - Accordions

Details and Specs

Description

The Accordion Component uses the USWDS skeleton with a custom Group Header and Expand / Collapse feature and several custom styles to match SAMHSA standards.

An accordion is a list of headers that hide or reveal additional content when selected.

Guidance

Usability

Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)

Accessibility

Code header areas in the accordion as buttons. Using a < button type="button" > assures accordions are usable with both screen readers and keyboards.
Use aria-expanded on buttons to express an accordion’s default state. Buttons should state if they are expanded by default with aria-expanded="true". The aria-expanded="false" attribute will be added to other buttons when the accordion is initialized by the JavaScript.
Use unique ids. Each button has a unique name, aria-controls="id", that associates the control with the appropriate region by referencing the controlled element’s id.
Accordions use javascript to set the hidden values of their content areas. Each content area will have its hidden attribute set by the component, depending on its corresponding button’s aria-expanded attribute. To ensure your content is accessible in the event that the JavaScript does not load or is disabled, you should not manually set hidden on any of your content areas.

Examples


          .usa-accordion { 

  color: #4a4a4a; 

} 



.usa-accordion:last-child { 

  margin-bottom: 1.5rem; 

} 



.usa-accordion .usa-accordion { 

  margin-bottom: 0; 

} 



.usa-accordion .usa-accordion__heading { 

  color: #4a4a4a; 

  background-color: #eee; 

  border-radius: 4px; 

} 



.usa-accordion .usa-accordion__heading button { 

  color: #4a4a4a; 

  border-radius: 4px 4px 0px 0px; 

  border: 0; 

  font-weight: 600; 

  line-height: 20px; 

  margin: 0; 

  padding: 1rem 56px 1rem 1.5rem; 

  position: relative; 

  word-break: break-word; 

  word-wrap: break-word; 

  overflow-wrap: break-word; 

  text-align: left; 

  white-space: normal; 

} 



.usa-accordion .usa-accordion__heading button p { 

  padding: 0; 

  margin: 0; 

  user-select: all; 

  line-height: 100%; 

} 



.usa-accordion .usa-accordion__heading button[aria-expanded="true"] { 

  background: url('../../images/chevron-up-solid.svg') no-repeat; 

  background-size: 14px 14px; 

  background-position: right 15px top 18px; 

  border-radius: 4px 4px 0px 0px; 

  border: 2px solid #bbc3c9; 

  color: #4a4a4a; 

} 



.usa-accordion .usa-accordion__heading button[aria-expanded="true"]:hover, .usa-accordion .usa-accordion__heading button[aria-expanded="true"]:focus { 

  border-radius: 4px 4px 0px 0px; 

} 



.usa-accordion .usa-accordion__heading button[aria-expanded="false"] { 

  background: url('../../images/chevron-down-solid.svg') no-repeat; 

  background-size: 14px 14px; 

  background-position: right 15px top 18px; 

  color: #4a4a4a; 

} 



.usa-accordion .usa-accordion__heading button[aria-expanded="false"]:hover, .usa-accordion .usa-accordion__heading button[aria-expanded="false"]:focus { 

  border-radius: 4px; 

} 



.usa-accordion .usa-accordion__heading button:hover, .usa-accordion .usa-accordion__heading button:focus { 

  background-color: #ddd; 

} 



.usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path { 

  fill: #1f419a; 

} 



.usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path:hover, .usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path:focus { 

  fill: #a82d2b; 

} 



.usa-accordion .usa-accordion-group-header h1, .usa-accordion .usa-accordion-group-header h2, .usa-accordion .usa-accordion-group-header h3, .usa-accordion .usa-accordion-group-header h4, .usa-accordion .usa-accordion-group-header h5, .usa-accordion .usa-accordion-group-header h6 { 

  margin: 5px 0; 

} 



.usa-accordion .usa-accordion-group-header h1 p, .usa-accordion .usa-accordion-group-header h2 p, .usa-accordion .usa-accordion-group-header h3 p, .usa-accordion .usa-accordion-group-header h4 p, .usa-accordion .usa-accordion-group-header h5 p, .usa-accordion .usa-accordion-group-header h6 p { 

  margin: 0; 

} 



.usa-accordion .usa-accordion__expandcollapse { 

  margin: auto 0; 

} 



.usa-accordion .usa-accordion_panel_wrapper { 

  margin-top: 0.5rem; 

} 



.usa-accordion .usa-accordion_panel_wrapper:first-child { 

  margin-top: 0; 

} 



.usa-accordion .usa-accordion__content { 

  color: #4a4a4a; 

  border-radius: 0px 0px 4px 4px; 

  font-family: "Source Sans Pro", sans-serif; 

  font-size: 1.06rem; 

  font-style: normal; 

  font-weight: 400; 

  line-height: 150%; 

} 



.usa-accordion.usa-accordion--bordered .usa-accordion__content { 

  border-bottom: 2px solid #bbc3c9; 

  border-left: 2px solid #bbc3c9; 

  border-right: 2px solid #bbc3c9; 

  background-position: right -3% bottom; 

  background-repeat: no-repeat; 

  background-size: contain; 

} 



.accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button { 

  background-color: #daeaf6; 

  border-radius: 40px; 

  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.16); 

  z-index: 10; 

} 



.accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button:hover, .accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button[aria-expanded='true']:hover { 

  background-color: #ddd; 

} 



.accordion-group.accordion-style-blue .usa-accordion__content { 

  background-color: #daeaf6; 

  background-position: right -25px bottom -2%; 

  background-repeat: no-repeat; 

  background-size: contain; 

  border: none; 

  border-radius: 0 0 40px 40px; 

  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.16); 

  margin-top: -30px; 

  padding-top: 40px; 

  position: relative; 

  z-index: 9; 

} 



@media screen and (min-width: 481px) { 

  .accordion-group.accordion-style-blue .usa-accordion__content { 

    margin-top: -15px; 

 } 

} 



@media screen and (max-width: 1023px) { 

  .accordion-group.accordion-style-blue .usa-accordion__content { 

    background-image: none !important; 

 } 

} 



.accordion-group.accordion-style-blue .usa-accordion__content .header-25 { 

  font-size: 1.5rem; 

  font-weight: 700; 

  line-height: 35px; 

  margin-block-end: 5px; 

} 



.accordion-group.accordion-style-blue .usa-accordion__content a.button { 

  margin: 20px 0; 

  line-height: 1.5; 

} 



.accordion-group.accordion-style-styleguide .usa-accordion__heading button { 

  background-color: #d7ffe4; 

}

Preview - Borderless

Expand All | Collapse All

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. This is an internal link. This is an external link.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized.

No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation.

Preview - Bordered

Expand All | Collapse All

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

Preview - Multiselectable

Expand All | Collapse All

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

This is a list item
Another list item

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

<!-- CUSTOM STYLES  -->
<style></style>
<!-- CUSTOM SCRIPTS  -->
<script></script>
<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="templates-details"> Details </button>
    </h4>
    <div id="templates-details" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/accordion/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=797-0&t=uH0YibLYyS6uWQcn-1" class="button primary-button-1" title="Link to Figma Designs" aria-label="Link Figma Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p> The Accordion Component uses the USWDS skeleton with a custom Group Header and Expand / Collapse feature and several custom styles to match SAMHSA standards. </p>
        <p>An accordion is a list of headers that hide or reveal additional content when selected.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.</li>
          <li>Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Code header areas in the accordion as buttons. Using a < button type="button" > assures accordions are usable with both screen readers and keyboards.</li>
          <li>Use aria-expanded on buttons to express an accordion’s default state. Buttons should state if they are expanded by default with aria-expanded="true". The aria-expanded="false" attribute will be added to other buttons when the accordion is initialized by the JavaScript.</li>
          <li>Use unique ids. Each button has a unique name, aria-controls="id", that associates the control with the appropriate region by referencing the controlled element’s id.</li>
          <li>Accordions use javascript to set the hidden values of their content areas. Each content area will have its hidden attribute set by the component, depending on its corresponding button’s aria-expanded attribute. To ensure your content is accessible in the event that the JavaScript does not load or is disabled, you should not manually set hidden on any of your content areas.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>
            <a href="/about-us/frequently-asked-questions" target="_blank">/about-us/frequently-asked-questions</a>
          </li>
          <li>
            <a href="/native-connections/webinars" target="_blank">/native-connections/webinars</a>
          </li>
          <li>
            <a href="/sbirt/grantees" target="_blank">/sbirt/grantees</a>
          </li>
          <li>
            <a href="/find-help/988/faqs" target="_blank">/find-help/988/faqs</a>
          </li>
        </ul>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="templates-specs"> Specs </button>
    </h4>
    <div id="templates-specs" class="usa-accordion__content">
      <code>
          .usa-accordion { <br />
  color: #4a4a4a; <br />
} <br />
<br />
.usa-accordion:last-child { <br />
  margin-bottom: 1.5rem; <br />
} <br />
<br />
.usa-accordion .usa-accordion { <br />
  margin-bottom: 0; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading { <br />
  color: #4a4a4a; <br />
  background-color: #eee; <br />
  border-radius: 4px; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button { <br />
  color: #4a4a4a; <br />
  border-radius: 4px 4px 0px 0px; <br />
  border: 0; <br />
  font-weight: 600; <br />
  line-height: 20px; <br />
  margin: 0; <br />
  padding: 1rem 56px 1rem 1.5rem; <br />
  position: relative; <br />
  word-break: break-word; <br />
  word-wrap: break-word; <br />
  overflow-wrap: break-word; <br />
  text-align: left; <br />
  white-space: normal; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button p { <br />
  padding: 0; <br />
  margin: 0; <br />
  user-select: all; <br />
  line-height: 100%; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button[aria-expanded="true"] { <br />
  background: url('../../images/chevron-up-solid.svg') no-repeat; <br />
  background-size: 14px 14px; <br />
  background-position: right 15px top 18px; <br />
  border-radius: 4px 4px 0px 0px; <br />
  border: 2px solid #bbc3c9; <br />
  color: #4a4a4a; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button[aria-expanded="true"]:hover, .usa-accordion .usa-accordion__heading button[aria-expanded="true"]:focus { <br />
  border-radius: 4px 4px 0px 0px; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button[aria-expanded="false"] { <br />
  background: url('../../images/chevron-down-solid.svg') no-repeat; <br />
  background-size: 14px 14px; <br />
  background-position: right 15px top 18px; <br />
  color: #4a4a4a; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button[aria-expanded="false"]:hover, .usa-accordion .usa-accordion__heading button[aria-expanded="false"]:focus { <br />
  border-radius: 4px; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button:hover, .usa-accordion .usa-accordion__heading button:focus { <br />
  background-color: #ddd; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path { <br />
  fill: #1f419a; <br />
} <br />
<br />
.usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path:hover, .usa-accordion .usa-accordion__heading button span.exitDisclaimer .fa-external-link-alt path:focus { <br />
  fill: #a82d2b; <br />
} <br />
<br />
.usa-accordion .usa-accordion-group-header h1, .usa-accordion .usa-accordion-group-header h2, .usa-accordion .usa-accordion-group-header h3, .usa-accordion .usa-accordion-group-header h4, .usa-accordion .usa-accordion-group-header h5, .usa-accordion .usa-accordion-group-header h6 { <br />
  margin: 5px 0; <br />
} <br />
<br />
.usa-accordion .usa-accordion-group-header h1 p, .usa-accordion .usa-accordion-group-header h2 p, .usa-accordion .usa-accordion-group-header h3 p, .usa-accordion .usa-accordion-group-header h4 p, .usa-accordion .usa-accordion-group-header h5 p, .usa-accordion .usa-accordion-group-header h6 p { <br />
  margin: 0; <br />
} <br />
<br />
.usa-accordion .usa-accordion__expandcollapse { <br />
  margin: auto 0; <br />
} <br />
<br />
.usa-accordion .usa-accordion_panel_wrapper { <br />
  margin-top: 0.5rem; <br />
} <br />
<br />
.usa-accordion .usa-accordion_panel_wrapper:first-child { <br />
  margin-top: 0; <br />
} <br />
<br />
.usa-accordion .usa-accordion__content { <br />
  color: #4a4a4a; <br />
  border-radius: 0px 0px 4px 4px; <br />
  font-family: "Source Sans Pro", sans-serif; <br />
  font-size: 1.06rem; <br />
  font-style: normal; <br />
  font-weight: 400; <br />
  line-height: 150%; <br />
} <br />
<br />
.usa-accordion.usa-accordion--bordered .usa-accordion__content { <br />
  border-bottom: 2px solid #bbc3c9; <br />
  border-left: 2px solid #bbc3c9; <br />
  border-right: 2px solid #bbc3c9; <br />
  background-position: right -3% bottom; <br />
  background-repeat: no-repeat; <br />
  background-size: contain; <br />
} <br />
<br />
.accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button { <br />
  background-color: #daeaf6; <br />
  border-radius: 40px; <br />
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.16); <br />
  z-index: 10; <br />
} <br />
<br />
.accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button:hover, .accordion-group.accordion-style-blue .usa-accordion_panel_wrapper .usa-accordion__heading .usa-accordion__button[aria-expanded='true']:hover { <br />
  background-color: #ddd; <br />
} <br />
<br />
.accordion-group.accordion-style-blue .usa-accordion__content { <br />
  background-color: #daeaf6; <br />
  background-position: right -25px bottom -2%; <br />
  background-repeat: no-repeat; <br />
  background-size: contain; <br />
  border: none; <br />
  border-radius: 0 0 40px 40px; <br />
  box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.16); <br />
  margin-top: -30px; <br />
  padding-top: 40px; <br />
  position: relative; <br />
  z-index: 9; <br />
} <br />
<br />
@media screen and (min-width: 481px) { <br />
  .accordion-group.accordion-style-blue .usa-accordion__content { <br />
    margin-top: -15px; <br />
 } <br />
} <br />
<br />
@media screen and (max-width: 1023px) { <br />
  .accordion-group.accordion-style-blue .usa-accordion__content { <br />
    background-image: none !important; <br />
 } <br />
} <br />
<br />
.accordion-group.accordion-style-blue .usa-accordion__content .header-25 { <br />
  font-size: 1.5rem; <br />
  font-weight: 700; <br />
  line-height: 35px; <br />
  margin-block-end: 5px; <br />
} <br />
<br />
.accordion-group.accordion-style-blue .usa-accordion__content a.button { <br />
  margin: 20px 0; <br />
  line-height: 1.5; <br />
} <br />
<br />
.accordion-group.accordion-style-styleguide .usa-accordion__heading button { <br />
  background-color: #d7ffe4; <br />
} <br />
      </code>
    </div>
  </div>
</div>
<br />
<hr />
<br />
<!-- MARKUP  -->
<div class="usa-accordion">
  <!-- NON-USWDS - SAMHSA CUSTOM EXPAND/COLLAPSE FUNCTION  -->
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Preview - Borderless</p>
      </h3>
    </div>
    <div class="grid-col-6 usa-accordion__expandcollapse text-right">
      <a href="#" class="usa-accordion-expandall">Expand All</a>&nbsp;|&nbsp; <a href="#" class="usa-accordion-collapse-all">Collapse All</a>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="true" aria-controls="a1"> First Amendment This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>. </button>
    </h4>
    <div id="a1" class="usa-accordion__content">
      <p> Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="a2"> Second Amendment </button>
    </h4>
    <div id="a2" class="usa-accordion__content">
      <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
      <ul>
        <li>This is a list item</li>
        <li>Another list item</li>
      </ul>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="a3"> Third Amendment </button>
    </h4>
    <div id="a3" class="usa-accordion__content">
      <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="a4"> Fourth Amendment </button>
    </h4>
    <div id="a4" class="usa-accordion__content">
      <p> The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="a5"> Fifth Amendment </button>
    </h4>
    <div id="a5" class="usa-accordion__content">
      <p> No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation. </p>
    </div>
  </div>
</div>
<div class="usa-accordion usa-accordion--bordered">
  <!-- NON-USWDS - SAMHSA CUSTOM EXPAND/COLLAPSE FUNCTION  -->
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Preview - Bordered</p>
      </h3>
    </div>
    <div class="grid-col-6 usa-accordion__expandcollapse text-right">
      <a href="#" class="usa-accordion-expandall">Expand All</a>&nbsp;|&nbsp; <a href="#" class="usa-accordion-collapse-all">Collapse All</a>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="true" aria-controls="b-a1"> First Amendment </button>
    </h4>
    <div id="b-a1" class="usa-accordion__content">
      <p> Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="b-a2"> Second Amendment </button>
    </h4>
    <div id="b-a2" class="usa-accordion__content">
      <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
      <ul>
        <li>This is a list item</li>
        <li>Another list item</li>
      </ul>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="b-a3"> Third Amendment </button>
    </h4>
    <div id="b-a3" class="usa-accordion__content">
      <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="b-a4"> Fourth Amendment </button>
    </h4>
    <div id="b-a4" class="usa-accordion__content">
      <p> The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="b-a5"> Fifth Amendment </button>
    </h4>
    <div id="b-a5" class="usa-accordion__content">
      <p> No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation. </p>
    </div>
  </div>
</div>
<div class="usa-accordion" aria-multiselectable="true">
  <!-- NON-USWDS - SAMHSA CUSTOM EXPAND/COLLAPSE FUNCTION  -->
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Preview - Multiselectable</p>
      </h3>
    </div>
    <div class="grid-col-6 usa-accordion__expandcollapse text-right">
      <a href="#" class="usa-accordion-expandall">Expand All</a>&nbsp;|&nbsp; <a href="#" class="usa-accordion-collapse-all">Collapse All</a>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="true" aria-controls="m-a1"> First Amendment </button>
    </h4>
    <div id="m-a1" class="usa-accordion__content">
      <p> Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2"> Second Amendment </button>
    </h4>
    <div id="m-a2" class="usa-accordion__content">
      <p>A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.</p>
      <ul>
        <li>This is a list item</li>
        <li>Another list item</li>
      </ul>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="m-a3"> Third Amendment </button>
    </h4>
    <div id="m-a3" class="usa-accordion__content">
      <p>No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.</p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="m-a4"> Fourth Amendment </button>
    </h4>
    <div id="m-a4" class="usa-accordion__content">
      <p> The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly describing the place to be searched, and the persons or things to be seized. </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <!-- Use the accurate heading level to maintain the document outline -->
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="m-a5"> Fifth Amendment </button>
    </h4>
    <div id="m-a5" class="usa-accordion__content">
      <p> No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor shall private property be taken for public use, without just compensation. </p>
    </div>
  </div>
</div>

Standards - Alerts

Details and Specs

Requirements USWDS Specs Designs

Description

This is a custom set of Alerts based from USWDS. An alert keeps users informed of important and sometimes time-sensitive changes.

An alert keeps users informed of important and sometimes time-sensitive changes.

Guidance

Usability

Consider next steps. 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. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human-readable language; avoid jargon and computer code.
Be polite. Be polite in error messages — don’t blame the user.
Alerts are an opportunity. Users will read a message that helps them resolve an error even if they generally won’t read documentation; include some educational material in your error message.
Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
Allow a user to dismiss a notification wherever appropriate.
Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Accessibility

Don’t visually hide alert messages 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.
Use the proper ARIA role. The ARIA role attribute can notify assistive technologies of time-sensitive and important messages. To elevate the importance of the alert, choose the appropriate role from the ARIA roles table and add it to the .usa-alert element.

Examples


            font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            font-size: 1.125rem; /* 18px / $base-font-size */ 

            line-height: 1.5; /* 25.44px */ 



            .usa-alert.usa-alert--info 

            ------------------- 

            background: $cerulean-20; /* #DAEAF6 */ 

            border-left-color: $cerulean; /* #5191CD */ 

            mask: "usa-icons/info.svg"; 



            .usa-alert.usa-alert--warning

            ------------------- 

            background: $light-yellow; /* #FAF3D1 */ 

            border-left-color: $dark-yellow; /* #FFBE2E */ 

            mask: "usa-icons/warning.svg"; 



            .usa-alert.usa-alert--error 

            ------------------- 

            background: $crimson-20; /* #E69B9A */ 

            border-left-color: $crimson; /* #CD3835 */ 

            mask: "usa-icons/error.svg"; 



            .usa-alert.usa-alert--success 

            ------------------- 

            background: $light-green; /* #CFEBDE */ 

            border-left-color: $success; /* #0F9D58 */ 

            mask: "usa-icons/check_circle.svg"; 



            .usa-alert.usa-alert--slim 

            ------------------- 

            padding-bottom: 0.5rem; 

            padding-top: 0.5rem; 



            .usa-alert-urgent-contact 

            ------------------- 

            background: $mist; /* #EEEEEE */

            border-left-color: $midnight; /* #1E384B */



            .usa-alert-urgent-contact .usa-alert__heading, .usa-alert-urgent-contact .usa-alert__text 

            ------------------- 

            margin-left: 2rem; 



            .usa-alert-urgent-contact .usa-alert__text + .usa-alert__heading 

            ------------------- 

            margin-top: 20px; 



            .usa-alert-urgent-contact .usa-alert__phone svg, .usa-alert-urgent-contact .usa-alert__mail svg 

            ------------------- 

            color: #1F419A; 



            .usa-alert__mail svg.mailto, .usa-alert__link svg.mailto 

            ------------------- 

            display: none; 



            .usa-alert__link a 

            ------------------- 

            margin-left: 20px;

Standard Alerts

Informative status

Lorem ipsum dolor sit amet, This is an internal link. This is an external link.

Warning status

Lorem ipsum dolor sit amet, This is an internal link. This is an external link.

Error status

Lorem ipsum dolor sit amet, This is an internal link. This is an external link.

Success status

Lorem ipsum dolor sit amet, This is an internal link. This is an external link.

Slim Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. This is an internal link. This is an external link.

Alert with no icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. This is an internal link. This is an external link.

Urgent Contact Us Alerts

The Division of Workplace Programs (DWP)

240-276-2600

DWP@hhs.samhsa.gov

The Drug-Free Workplace Helpline

1-800-WORKPLACE (967-5752)

DWP@samhsa.hhs.gov

Contact SAMHSA

<style>
  .usa-alert-urgent-contact {
    background: $mist;
    border-left-color: $midnight;
  }

  .usa-alert-urgent-contact .usa-alert__heading, .usa-alert-urgent-contact .usa-alert__text {
    margin-left: 2rem;
  }

  .usa-alert-urgent-contact .usa-alert__text + .usa-alert__heading {
    margin-top: 20px;
  }

  .usa-alert-urgent-contact .usa-alert__phone svg, .usa-alert-urgent-contact .usa-alert__mail svg {
    color: #1F419A;
  }

  .usa-alert__mail svg.mailto, .usa-alert__link svg.mailto  {
    display: none;
  }

  .usa-alert__link a {
    margin-left: 20px;
  }
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
        <div class="grid-col-6 usa-accordion-group-header">
            <h3><p>Details and Specs</p></h3>
        </div>
  </div>
<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
  <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
  <button class="usa-accordion__button" aria-expanded="false" aria-controls="details-alerts">Details</button>
</h4>

<div id="details-alerts" class="usa-accordion__content">
  <div style="text-align:center;">
    <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
    <a href="https://designsystem.digital.gov/components/alert/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
    <a href="https://www.figma.com/file/c9uHek73iLKMq26S6Kv1on/Q224---Urgent-Contact-Component?type=design&node-id=0%3A1&mode=design&t=pp0P3AHWggzMCGdR-1" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
  </div>

  <h5>Description</h5>
        <p>This is a custom set of Alerts based from USWDS. An alert keeps users informed of important and sometimes time-sensitive changes.</p>
        <p>An alert keeps users informed of important and sometimes time-sensitive changes.</p>

  <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Consider next steps. 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. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human-readable language; avoid jargon and computer code.</li>
          <li>Be polite. Be polite in error messages — don’t blame the user.</li>
          <li>Alerts are an opportunity. Users will read a message that helps them resolve an error even if they generally won’t read documentation; include some educational material in your error message.</li>
          <li>Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.</li>
          <li>Allow a user to dismiss a notification wherever appropriate.</li>
          <li>Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Don’t visually hide alert messages 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.</li>
          <li>Use the proper ARIA role. The ARIA role attribute can notify assistive technologies of time-sensitive and important messages. To elevate the importance of the alert, choose the appropriate role from the ARIA roles table and add it to the .usa-alert element.</li>
        </ul>

  <h5>Examples</h5>
  <ul>
    <li>
        <a href="/adult-drug-use" target="_blank">/adult-drug-use</a>
    </li>
    <li>
        <a href="/conoce-los-riesgos" target="_blank">/conoce-los-riesgos</a>
    </li>
<li>
            <a href="/find-help/988/faqs" target="_blank">/find-help/988/faqs</a>
          </li>
          <li>
            <a href="/find-help/988/partner-toolkit" target="_blank">/find-help/988/partner-toolkit</a>
          </li>
  </ul>
</div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button" aria-expanded="false" aria-controls="alerts-specs">Specs</button>
        </h4>
        <div id="alerts-specs" class="usa-accordion__content">
          <code>
            font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            font-size: 1.125rem; /* 18px / $base-font-size */ <br />
            line-height: 1.5; /* 25.44px */ <br /><br />

            .usa-alert.usa-alert--info <br/>
            ------------------- <br />
            background: $cerulean-20; /* #DAEAF6 */ <br/>
            border-left-color: $cerulean; /* #5191CD */ <br/>
            mask: "usa-icons/info.svg"; <br/><br/>

            .usa-alert.usa-alert--warning<br/>
            ------------------- <br />
            background: $light-yellow; /* #FAF3D1 */ <br/>
            border-left-color: $dark-yellow; /* #FFBE2E */ <br/>
            mask: "usa-icons/warning.svg"; <br/><br/>

            .usa-alert.usa-alert--error <br/>
            ------------------- <br />
            background: $crimson-20; /* #E69B9A */ <br/>
            border-left-color: $crimson; /* #CD3835 */ <br/>
            mask: "usa-icons/error.svg"; <br/><br/>

            .usa-alert.usa-alert--success <br/>
            ------------------- <br />
            background: $light-green; /* #CFEBDE */ <br/>
            border-left-color: $success; /* #0F9D58 */ <br/>
            mask: "usa-icons/check_circle.svg"; <br/><br/>

            .usa-alert.usa-alert--slim <br/>
            ------------------- <br />
            padding-bottom: 0.5rem; <br/>
            padding-top: 0.5rem; <br/><br/>

            .usa-alert-urgent-contact <br/>
            ------------------- <br />
            background: $mist; /* #EEEEEE */<br />
            border-left-color: $midnight; /* #1E384B */<br /><br/>

            .usa-alert-urgent-contact .usa-alert__heading, .usa-alert-urgent-contact .usa-alert__text <br/>
            ------------------- <br />
            margin-left: 2rem; <br /><br />

            .usa-alert-urgent-contact .usa-alert__text + .usa-alert__heading <br/>
            ------------------- <br />
            margin-top: 20px; <br /><br />

            .usa-alert-urgent-contact .usa-alert__phone svg, .usa-alert-urgent-contact .usa-alert__mail svg <br/>
            ------------------- <br />
            color: #1F419A; <br /><br />

            .usa-alert__mail svg.mailto, .usa-alert__link svg.mailto <br/>
            ------------------- <br />
            display: none; <br /><br />

            .usa-alert__link a <br/>
            ------------------- <br />
            margin-left: 20px; <br /><br />
          </code>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<!-- MARKUP  -->
<h3 class="site-preview-heading">Standard Alerts</h3>

<div class="usa-alert samhsa usa-alert--info">
<div class="usa-alert__body">
    <h4 class="usa-alert__heading">Informative status</h4>
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet,
    This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<div class="usa-alert samhsa usa-alert--warning">
<div class="usa-alert__body">
    <h4 class="usa-alert__heading">Warning status</h4>
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet,
    This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<div class="usa-alert samhsa usa-alert--error" role="alert">
<div class="usa-alert__body">
    <h4 class="usa-alert__heading">Error status</h4>
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet,
    This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<div class="usa-alert samhsa usa-alert--success">
<div class="usa-alert__body">
    <h4 class="usa-alert__heading">Success status</h4>
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet,
    This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<h3 class="site-preview-heading">Slim Alert</h3>

<div class="usa-alert samhsa usa-alert--info usa-alert--slim">
<div class="usa-alert__body">
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<h3 class="site-preview-heading">Alert with no icon</h3>

<div class="usa-alert samhsa usa-alert--info usa-alert--no-icon">
<div class="usa-alert__body">
    <p class="usa-alert__text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
    </p>
</div>
</div>

<h3 class="site-preview-heading">Urgent Contact Us Alerts</h3>
<div class="usa-alert samhsa usa-alert-urgent-contact">
  <div class="usa-alert__body">
      <div class="usa-alert__heading padding-left-2">
        <p>The Division of Workplace Programs (DWP)</p>
      </div>
      <div class="usa-alert__text grid-row padding-left-2">
          <div class="desktop-lg:grid-col-2 usa-alert__phone"><i class="fa-solid fa-phone"></i> <a href="tel:240-276-2600">240-276-2600</a></div>
          <div class="desktop-lg:grid-col-4 usa-alert__mail"><i class="fa-solid fa-envelope"></i> <a href="mailto:DWP@hhs.samhsa.gov">DWP@hhs.samhsa.gov</a></div>
      </div>
      <div class="usa-alert__heading padding-left-2">
        <p>The Drug-Free Workplace Helpline</p>
      </div>
        <div class="usa-alert__text grid-row padding-left-2">
          <div class="desktop-lg:grid-col-4 usa-alert__phone"><i class="fa-solid fa-phone"></i> <a href="tel:1-800-967-5752">1-800-WORKPLACE (967-5752)</a></div>
          <div class="desktop-lg:grid-col-4 usa-alert__mail"><i class="fa-solid fa-envelope"></i> <a href="mailto:DWP@samhsa.hhs.gov">DWP@samhsa.hhs.gov</a></div>
    </div>
   <div class="grid-row padding-left-2 padding-top-05 usa-alert__text usa-alert__link"><a href="mailto:DWP@samhsa.hhs.gov">Contact SAMHSA</a></div>
  </div>
</div>

Standards - Banner Image

Details and Specs

Requirements USWDS Specs Designs

Description

A Banner Image is a visually compelling introduction to content sections, featuring a prominently displayed image. This component utilizes a responsive framework to ensure full-width display and optimal viewing on all devices, with a focus on high-impact visuals and clear messaging. Heroes are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about.

Guidance

Usability

Visual Clarity: The banner should be designed for optimal visual clarity. Text overlaid on the image must be legible and should stand out against the background image to ensure readability at all screen sizes and resolutions.
Design Consistency: Maintain a consistent design language throughout the banner to align with the brand's visual identity. This includes consistent use of color schemes, typography, and imagery that corresponds with the brand's style guide.
Information Hierarchy: Structure the content within the banner to reflect the importance of information. The most critical message should be the most prominent, followed by any subtext or supporting information in a smaller size or less dominant position.

Accessibility

Text Contrast: Ensure high contrast between text and the background to comply with WCAG guidelines, making the content accessible to users with visual impairments.
Alt Text for Imagery: Include descriptive alt text for the banner image to provide context for users who are visually impaired and rely on screen readers to navigate the web.
Non-Interactive Element Indication: Since the banner is non-clickable, it should not present any visual or textual cues that typically indicate interactivity, such as underlined text, buttons, or hover effects that suggest clicking.

Examples


      .view-banners .views-field-field-banner { 

      @include breakpoint($break-widescreen)/1400px { 

       img {

       width: 100%; 

     }

   }

 }


 

The banners will retain their pixel-aspect ratios across all breakpoints.


1400px: 200px in height


1200px: 151px in height


1024px: 126px in height


880px: 122px in height


640px: 112px in height


480px: 86px in height


320px: 62px in height

Banner Image

<!-- CUSTOM STYLES  -->
<style>
.usa-hero>.grid-container {
    position: relative;
    padding-bottom: 2rem;
    padding-top: 15rem;
}
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-banner">Details</button>
    </h4>
    <div id="details-banner" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2263285801/Design+Specifications" class="button primary-button-1" title="Link to Requirements Doc" aria-label="Link to Requirements Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/overview/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://zpl.io/EmDWYWv" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p> A Banner Image is a visually compelling introduction to content sections, featuring a prominently displayed image. This component utilizes a responsive framework to ensure full-width display and optimal viewing on all devices, with a focus on high-impact visuals and clear messaging. Heroes are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. </p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Visual Clarity:</strong> The banner should be designed for optimal visual clarity. Text overlaid on the image must be legible and should stand out against the background image to ensure readability at all screen sizes and resolutions. </li>
          <li><strong>Design Consistency:</strong> Maintain a consistent design language throughout the banner to align with the brand's visual identity. This includes consistent use of color schemes, typography, and imagery that corresponds with the brand's style guide. </li>
          <li><strong>Information Hierarchy:</strong> Structure the content within the banner to reflect the importance of information. The most critical message should be the most prominent, followed by any subtext or supporting information in a smaller size or less dominant position.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Text Contrast:</strong> Ensure high contrast between text and the background to comply with WCAG guidelines, making the content accessible to users with visual impairments. </li>
          <li><strong>Alt Text for Imagery:</strong> Include descriptive alt text for the banner image to provide context for users who are visually impaired and rely on screen readers to navigate the web.</li>
          <li><strong>Non-Interactive Element Indication:</strong> Since the banner is non-clickable, it should not present any visual or textual cues that typically indicate interactivity, such as underlined text, buttons, or hover effects that suggest clicking.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>
            <a href="/certified-community-behavioral-health-clinics" target="_blank">/certified-community-behavioral-health-clinics</a>
          </li>
          <li>
            <a href="/communities-talk" target="_blank">/communities-talk</a>
          </li>
          <li>
            <a href="/sbirt/grantees" target="_blank">/sbirt/grantees</a>
          </li>
          <li>
            <a href="/criminal-juvenile-justice" target="_blank">/criminal-juvenile-justice</a>
          </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-banner">Specs</button>
    </h4>
    <div id="specs-banner" class="usa-accordion__content">
      <code>
      .view-banners .views-field-field-banner { <br>
      @include breakpoint($break-widescreen)/1400px { <br>
       img {<br>
       width: 100%; <br>
     }<br>
   }<br>
 }<br>
<br /> <br>
<strong>The banners will retain their pixel-aspect ratios across all breakpoints.</strong><br>

1400px: 200px in height<br>

1200px: 151px in height<br>

1024px: 126px in height<br>

880px: 122px in height<br>

640px: 112px in height<br>

480px: 86px in height<br>

320px: 62px in height<br>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Banner Image</h3>
  <section class="usa-hero" aria-label="Introduction">
    <div class="grid-container">
    </div>
  </section>

Standards - Base - Colors

Details and Specs

Designs

The Standard Color Palette is set as variables in the following file.

web/themes/custom/samhsa_uswds_base/src/sass/config/variables/_var_colors.scss

Any additions to the Standard Color Palette need to be added to that file.
NOTE TO DEVS - DO NOT HARD CODE COLOR VALUES. ONLY USE THE SASS VARIABLES.

Base Colors

$white: #FFFFFF;
$black: #000000;
$charcoal: #4A4A4A;
$steel: #5F636A;
$fog: #A3A7A9;
$smoke: #CDCDCD;
$silver: #DDDDDD;
$mist: #EEEEEE;
$offwhite: #E6E6E6;

Midnights

$midnight: #1E384B;
$midnight-80: #405666;
$midnight-60: #617381;
$midnight-40: #8E9BA5;
$midnight-20: #BBC3C9;

Primary Reds

$crimson: #CD3835;
$crimson-60: #D45653;
$crimson-40: #DC7371;
$crimson-20: #E69B9A;
$ruby: #A82D2B;

Primary Blues

$teal: #1A6986;
$teal-80: #3C7F98;
$teal-60: #5E96AA;
$teal-40: #8CB4C2;
$teal-20: #BAD2DA;
$royalblue: #005EA2;
$cerulean: #5191CD;
$cerulean-80: #85BCE4;
$cerulean-60: #9DC9E9;
$cerulean-40: #C2DDF1;
$cerulean-20: #DAEAF6;

Accents

$sapphire #1F419A;
$vivid-blue: #2491FF;
$seaweed: #0E769E;
$success: #0F9D58;
$barney: #54278F;
$light-green: #CFEBDE;
$dark-yellow: #FFBE2E;
$light-yellow: #FAF3D1;

Social Media Colors

$fb-color: #3A67B8; // Facebook
$tw-color #00A2F9; // Twitter
$yt-color: #FF0000; // YouTube
$blog-color: #1C7491; // SAMHSA Blog
$lk-color: #0E76A8; // LinkedIn
$rss-color: #F89C40; // RSS
$ig-color: #C13584; // Instagram

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
<div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3>
    </div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
  <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
  <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-colors">Details</button>
</h4>

<div id="details-colors" class="usa-accordion__content">
 <div style="text-align:center;">
    <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=110-0&t=tyEolfVX8BSQ4oQd-0" class="button primary-button-1" title="Link to Figma" aria-label="Link XD Designs" target="_blank">Designs</a>
  </div>
    <p>
      The Standard Color Palette is set as variables in the following file. <br><br>
     web/themes/custom/samhsa_uswds_base/src/sass/config/variables/_var_colors.scss  <br><br>

      Any additions to the Standard Color Palette need to be added to that file. <br>
    NOTE TO DEVS - DO NOT HARD CODE COLOR VALUES. ONLY USE THE SASS VARIABLES.<br>
  </p>
</div>
</div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<div class="grid-row grid-gap">
  <ul class="colorlist grid-col-2">
    <h3>Base Colors</h3>
    <li style="background:#000000; color:#FFFFFF;"> <i class="fa fa-circle"></i> $white: #FFFFFF; </li>
    <li style="color:#000000;"> <i class="fa fa-circle"></i> $black: #000000; </li>
    <li style="color:#4A4A4A;"> <i class="fa fa-circle"></i> $charcoal: #4A4A4A; </li>
    <li style="color:#5F636A;"> <i class="fa fa-circle"></i> $steel: #5F636A; </li>
    <li style="color:#A3A7A9;"> <i class="fa fa-circle"></i> $fog: #A3A7A9; </li>
    <li style="background:#000000; color:#CDCDCD;"> <i class="fa fa-circle"></i> $smoke: #CDCDCD; </li>
    <li style="background:#000000; color:#DDDDDD;"> <i class="fa fa-circle"></i> $silver: #DDDDDD; </li>
    <li style="background:#000000; color:#EEEEEE;"> <i class="fa fa-circle"></i> $mist: #EEEEEE; </li>
    <li style="background:#000000; color:#E6E6E6;"> <i class="fa fa-circle"></i> $offwhite: #E6E6E6; </li>
  </ul>
  <ul class="colorlist grid-col-2">
    <h3>Midnights</h3>
    <li style="color:#1E384B;"> <i class="fa fa-circle"></i> $midnight: #1E384B; </li>
    <li style="color:#405666;"> <i class="fa fa-circle"></i> $midnight-80: #405666; </li>
    <li style="color:#617381;"> <i class="fa fa-circle"></i> $midnight-60: #617381; </li>
    <li style="color:#8E9BA5;"> <i class="fa fa-circle"></i> $midnight-40: #8E9BA5; </li>
    <li style="color:#BBC3C9;"> <i class="fa fa-circle"></i> $midnight-20: #BBC3C9; </li>
  </ul>
  <ul class="colorlist grid-col-2">
    <h3>Primary Reds</h3>
    <li style="color:#CD3835;"> <i class="fa fa-circle"></i> $crimson: #CD3835; </li>
    <li style="color:#D45653;"> <i class="fa fa-circle"></i> $crimson-60: #D45653; </li>
    <li style="color:#DC7371;"> <i class="fa fa-circle"></i> $crimson-40: #DC7371; </li>
    <li style="color:#E69B9A;"> <i class="fa fa-circle"></i> $crimson-20: #E69B9A; </li>
    <li style="color:#A82D2B;"> <i class="fa fa-circle"></i> $ruby: #A82D2B; </li>
  </ul>
  <ul class="colorlist grid-col-2">
    <h3>Primary Blues</h3>
    <li style="color:#1A6986;"> <i class="fa fa-circle"></i> $teal: #1A6986; </li>
    <li style="color:#3C7F98;"> <i class="fa fa-circle"></i> $teal-80: #3C7F98; </li>
    <li style="color:#5E96AA;"> <i class="fa fa-circle"></i> $teal-60: #5E96AA; </li>
    <li style="color:#8CB4C2;"> <i class="fa fa-circle"></i> $teal-40: #8CB4C2; </li>
    <li style="color:#BAD2DA;"> <i class="fa fa-circle"></i> $teal-20: #BAD2DA; </li>
    <li style="color:#005EA2;"> <i class="fa fa-circle"></i> $royalblue: #005EA2; </li>
    <li style="color:#5191CD;"> <i class="fa fa-circle"></i> $cerulean: #5191CD; </li>
    <li style="color:#85BCE4;"> <i class="fa fa-circle"></i> $cerulean-80: #85BCE4; </li>
    <li style="color:#9DC9E9;"> <i class="fa fa-circle"></i> $cerulean-60: #9DC9E9; </li>
    <li style="background:#000000; color:#C2DDF1;"> <i class="fa fa-circle"></i> $cerulean-40: #C2DDF1; </li>
    <li style="background:#000000; color:#DAEAF6;"> <i class="fa fa-circle"></i> $cerulean-20: #DAEAF6; </li>
  </ul>
  <ul class="colorlist grid-col-2">
    <h3>Accents</h3>
    <li style="color:#1F419A;"> <i class="fa fa-circle"></i> $sapphire #1F419A; </li>
    <li style="color:#2491FF;"> <i class="fa fa-circle"></i> $vivid-blue: #2491FF; </li>
    <li style="color:#0E769E;"> <i class="fa fa-circle"></i> $seaweed: #0E769E; </li>
    <li style="color:#0F9D58;"> <i class="fa fa-circle"></i> $success: #0F9D58; </li>
    <li style="color:#54278F;"> <i class="fa fa-circle"></i> $barney: #54278F; </li>
    <li style="background:#000000; color:#CFEBDE;"> <i class="fa fa-circle"></i> $light-green: #CFEBDE; </li>
    <li style="color:#FFBE2E;"> <i class="fa fa-circle"></i> $dark-yellow: #FFBE2E; </li>
    <li style="background:#000000; color:#FAF3D1;"> <i class="fa fa-circle"></i> $light-yellow: #FAF3D1; </li>
  </ul>
  <ul class="colorlist grid-col-2">
    <h3>Social Media Colors</h3>
    <li style="color:#3A67B8;"> <i class="fa fa-circle"></i> $fb-color: #3A67B8; // Facebook </li>
    <li style="color:#00A2F9;"> <i class="fa fa-circle"></i> $tw-color #00A2F9; // Twitter </li>
    <li style="color:#FF0000;"> <i class="fa fa-circle"></i> $yt-color: #FF0000; // YouTube </li>
    <li style="color:#31C7491;"> <i class="fa fa-circle"></i> $blog-color: #1C7491; // SAMHSA Blog </li>
    <li style="color:#0E76A8;"> <i class="fa fa-circle"></i> $lk-color: #0E76A8; // LinkedIn </li>
    <li style="color:#F89C40;"> <i class="fa fa-circle"></i> $rss-color: #F89C40; // RSS </li>
    <li style="color:#C13584;"> <i class="fa fa-circle"></i> $ig-color: #C13584; // Instagram </li>
  </ul>
</div>

Standards - Base - Fonts

Details and Specs

USWDS Specs Designs

Description

This section defines the standards for font sizes, line widths, text paddings and margins.

NOTE: SAMHSA.gov DOES NOT USE HARDCODED PIXELS FOR FONT SIZES.

Font sizes start at the $base-font-size (16.96px) variable and build up in size using rem. Please refer to the specifications detailed in this Styleguide.

SAMHSA.giv also uses several USWDS Utilities to extend the standards as outlined in this Styleguide.

Full Px to REM Table

Pixel	REM
1px	0.0625rem
2px	0.125rem
3px	0.1875rem
4px	0.25rem
5px	0.3125rem
6px	0.4375rem
7px	0.375rem
8px	0.5rem
9px	0.5625rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
15px	0.9375rem
16px (Mobile: $base-font-size)	1rem
16.96px (Desktop: $base-font-size)	1.06rem
17px	1.063rem (.usa-prose)
18px	1.125rem
19px	1.188rem
20px	1.25rem
22px	1.375rem
24px	1.5rem
26px	1.625rem
28px	1.75rem
30px	1.875rem
32px	2rem
34px	2.125rem
36px	2.25rem
38px	2.375rem
40px	2.5rem
42px	2.625rem
44px	2.75rem
46px	2.875rem

Font Family and Font Size

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac.


            font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400;

Link < a>

NOTE: SAMHSA.gov uses js to add an external link icon after non .gov links.

This is an internal link. This is an external link.


      This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.


            a & a:visited 

            ------------------- 

            color: $sapphire; /* #1F419A */ 

            text-decoration: underline; 


            a:hover & a:active 

            ------------------- 

            color: $royalblue; /* #005EA2 */ 

            text-decoration: underline; 


            a:focus 

            ------------------- 

            color: $royalblue; /* #005EA2 */ 

            text-decoration: underline; 

            outline: 0.25rem solid $vivid-blue; /* #2491ff */ 

            outline-offset: 0; 


            a:visited 

            ------------------- 

            color: $barney; /* #54278F */ 

            text-decoration: underline;

Strong < strong>

This is an example of strong text within copy.


      This is an example of <strong>strong text</strong>.


            strong 

            ------------------- 

            font-weight: 600;

Emphasis < em>

This is an example of emphasis placed on text within copy.


      This is an example of <em>emphasis placed on text</em>.


            em 

            ------------------- 

            font-style: italic;

Superscript/Subscript < sup> & < sub>

This is an example of superscript ² text and subscript ₂ text.


      This is an example of superscript <sup>2</sup> text and subscript <sub>2</sub> text.


            sub, sup 

            ------------------- 

            font-size: 75%; 

            line-height: 0; 

            position: relative; 

            vertical-align: baseline; 


            sub 

            ------------------- 

            bottom: -0.25em; 


            sup 

            ------------------- 

            top: -0.5em;

Small < small>

This is an example of small text within copy.


      This is an <small>example of small text</small>.


            small 

            ------------------- 

            font-size: 80%;

Underline < u>

This is an example of underlined text within copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.


      This is an <u>example of underlined text</u>.


            u 

            ------------------- 

            text-decoration: underline;

Delete < del>

This is an ~~example of deleted text~~ within copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.


      This is an <del>example of deleted text</del>.


            del 

            ------------------- 

            text-decoration: line-through;

HR Rule < hr>

Below is an HR tag.

Above is an HR tag.


      Below is an HR tag. </p>
        <hr />
        <p>Above is an HR tag.


            hr 

            ------------------- 

            border-bottom: 1px solid $steel; /* #5F636A */ 

            border-left: 0; 

            border-right: 0; 

            border-top: 0; 

            margin: 1.3rem 0; 

            box-sizing: content-box; 

            height: 0; 

            overflow: visible;

Blockquote < blockquote>

Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel.


      This is a <blockquote>blockquote</blockquote>.


            blockquote 

            ------------------- 

            display: block; 

            margin-block-start: 1em; 

            margin-block-end: 1em; 

            margin-inline-start: 40px; 

            margin-inline-end: 40px; 

            margin: 0 0 1.5em 0.5em; 

            padding: 0 0 0 1em; 

            border-left: 5px solid $charcoal; /* #4A4A4A */ 

            line-height: 1.4; /* 23.74px */ 

            overflow-wrap: break-word;

H1 < h1> Heading

H1 < h1> Heading With
Broken Text


            h1 

            ------------------- 

            DESKTOP: font-size: 2.663rem; 

            MOBILE: font-size: 2.131rem;  

            font-weight: bold; 

            line-height: 1.21;  

            margin: 0 0 5px 0;

H2 < h2> Heading

H2 < h2> Heading With
Broken Text


            h2 

            ------------------- 

            DESKTOP: font-size: 1.991rem; 

            MOBILE: font-size: 1.594rem; 

            font-weight: 600; 

            DESKTOP: line-height: 1.21;  

            MOBILE: line-height: 1.27;  

            margin: 0 0 5px 0;

H3 < h3> Heading

H3 < h3> Heading With
Broken Text


            h3 

            ------------------- 

            DESKTOP: font-size: 1.648rem; 

            MOBILE: font-size: 1.319rem; 

            font-weight: 600; 

            DESKTOP: line-height: 1.27;  

            MOBILE: line-height: 1.25;  

            margin: 0 0 5px 0;

H4 < h4> Heading

H4 < h4> Heading With
Broken Text


            h4 

            ------------------- 

            DESKTOP: font-size: 1.281rem; 

            MOBILE: font-size: 1.156rem; 

            font-weight: 600; 

            DESKTOP: line-height: 1.3;  

            MOBILE: line-height: 1.25;  

            margin: 0 0 5px 0;

H5 < h5> Heading

H5 < h5> Heading With
Broken Text


            h5 

            ------------------- 

            DESKTOP: font-size: 1.06rem; 

            MOBILE: font-size: 1rem; 

            font-weight: 700; 

            line-height: 1.5; 

            margin: 0 0 5px 0;

H6 < h6> Heading

H6 < h6> Heading With
Broken Text


            h6 

            ------------------- 

            DESKTOP: font-size: 1.06rem; 

            MOBILE: font-size: 1rem; 

            font-weight: 700; 

            line-height: 1.5; 

            margin: 0 0 5px 0;

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="fonts-details"> Details </button>
    </h4>
    <div id="fonts-details" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="https://designsystem.digital.gov/design-tokens/typesetting/font/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
       <a href="https://www.figma.com/design/OXbg8PimWsmp0wv12a9JqD/Q324---Typography-Phase-3---Final?node-id=883-784&t=b7ueteqf1hTuTrFF-0" class="button primary-button-1" title="Link to Figma Design" aria-label="Link Figma Design" target="_blank">Designs</a>
      </div>
      <h5>Description</h5>
      <p> This section defines the standards for font sizes, line widths, text paddings and margins. <br>
        <br>
        <strong> NOTE: SAMHSA.gov DOES NOT USE HARDCODED PIXELS FOR FONT SIZES. <br>
        </strong>
        <br> Font sizes start at the $base-font-size (16.96px) variable and build up in size using rem. Please refer to the specifications detailed in this Styleguide. <br>
        <br> SAMHSA.giv also uses several USWDS Utilities to extend the standards as outlined in this Styleguide. <br>
        <br>
      </p>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="fonts-px"> Pixel to REM conversion table </button>
    </h4>
    <div id="fonts-px" class="usa-accordion__content">
      <p style="text-align:center;">
        <a href="https://www.croydon.gov.uk/design-and-content-guidelines/resources/pixel-rem-conversion-table" target="_blank">Full Px to REM Table</a>
      </p>
      <!-- ADD SPECS AS CODE SNIPPETS BY REPLACING THE EXAMPLES BELOW  -->
      <table>
        <thead>
          <tr>
            <th scope="col">Pixel</th>
            <th scope="col">REM</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1px</td>
            <td>0.0625rem</td>
          </tr>
          <tr>
            <td>2px</td>
            <td>0.125rem</td>
          </tr>
          <tr>
            <td>3px</td>
            <td>0.1875rem</td>
          </tr>
          <tr>
            <td>4px</td>
            <td>0.25rem</td>
          </tr>
          <tr>
            <td>5px</td>
            <td>0.3125rem</td>
          </tr>
          <tr>
            <td>6px</td>
            <td>0.4375rem</td>
          </tr>
          <tr>
            <td>7px</td>
            <td>0.375rem</td>
          </tr>
          <tr>
            <td>8px</td>
            <td>0.5rem</td>
          </tr>
          <tr>
            <td>9px</td>
            <td>0.5625rem</td>
          </tr>
          <tr>
            <td>10px</td>
            <td>0.625rem</td>
          </tr>
          <tr>
            <td>12px</td>
            <td>0.75rem</td>
          </tr>
          <tr>
            <td>14px</td>
            <td>0.875rem</td>
          </tr>
          <tr>
            <td>15px</td>
            <td>0.9375rem</td>
          </tr>
          <tr>
            <td>
               <mark>
                 <strong>16px (Mobile: $base-font-size)</strong>
               </mark>
            </td>
            <td>
              <mark>
                <strong>1rem </strong>
              </mark>
            </td>
          </tr>
          <tr>
            <td>
               <mark>
                 <strong>16.96px (Desktop: $base-font-size)</strong>
               </mark>
            </td>
            <td>
              <mark>
                <strong>1.06rem </strong>
              </mark>
            </td>
          </tr>
          <tr>
            <td>17px</td>
            <td>1.063rem (.usa-prose)</td>
          </tr>
          <tr>
            <td>
              <strong>18px</strong>
            </td>
            <td>
              <strong>1.125rem </strong>
            </td>
          </tr>
          <tr>
            <td>19px</td>
            <td>1.188rem</td>
          </tr>
          <tr>
            <td>20px</td>
            <td>1.25rem</td>
          </tr>
          <tr>
            <td>22px</td>
            <td>1.375rem</td>
          </tr>
          <tr>
            <td>24px</td>
            <td> 1.5rem</td>
          </tr>
          <tr>
            <td>26px</td>
            <td>1.625rem</td>
          </tr>
          <tr>
            <td>28px</td>
            <td>1.75rem</td>
          </tr>
          <tr>
            <td>30px</td>
            <td>1.875rem</td>
          </tr>
          <tr>
            <td>32px</td>
            <td>2rem</td>
          </tr>
          <tr>
            <td>34px</td>
            <td>2.125rem</td>
          </tr>
          <tr>
            <td>36px</td>
            <td>2.25rem</td>
          </tr>
          <tr>
            <td>38px</td>
            <td>2.375rem</td>
          </tr>
          <tr>
            <td>40px</td>
            <td>2.5rem</td>
          </tr>
          <tr>
            <td>42px</td>
            <td>2.625rem</td>
          </tr>
          <tr>
            <td>44px</td>
            <td>2.75rem</td>
          </tr>
          <tr>
            <td>46px</td>
            <td>2.875rem</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<div class="simple-styleguide">
  <div>
    <h3>
      Font Family and Font Size <br />
    </h3>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac.

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-base">Specs</button>
        </h4>
        <div id="specs-fonts-base" class="usa-accordion__content">
          <code>
            font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br />
          </code>
        </div>
      </div>
    </div>
    <br>
  </div>
  <hr />

  <div>
    <h3>
      Link < a>
      <br />
    </h3>
    <p>
      NOTE: SAMHSA.gov uses js to add an external link icon after non .gov links.
    </p>
    <p class="measure-6">
      This is an <a class="measure" href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
      <br />
    </p>

    <code>
      <xmp>This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-links">Specs</button>
        </h4>
        <div id="specs-fonts-links" class="usa-accordion__content">
          <code>
            a & a:visited <br />
            ------------------- <br />
            color: $sapphire; /* #1F419A */ <br />
            text-decoration: underline; <br /><br />
            a:hover & a:active <br />
            ------------------- <br />
            color: $royalblue; /* #005EA2 */ <br />
            text-decoration: underline; <br /><br />
            a:focus <br />
            ------------------- <br />
            color: $royalblue; /* #005EA2 */ <br />
            text-decoration: underline; <br />
            outline: 0.25rem solid $vivid-blue; /* #2491ff */ <br />
            outline-offset: 0; <br /><br />
            a:visited <br />
            ------------------- <br />
            color: $barney; /* #54278F */ <br />
            text-decoration: underline;
          </code>
        </div>
      </div>
    </div>
    <br>
  </div>
  <hr />
  <div>
    <h3>
      Strong < strong>
    </h3>

    <p class="measure-6">
      This is an example of <strong class="measure">strong text</strong> within copy.
    </p>

    <code>
      <xmp>This is an example of <strong>strong text</strong>. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-strong">Specs</button>
        </h4>
        <div id="specs-fonts-strong" class="usa-accordion__content">
          <code>
            strong <br />
            ------------------- <br />
            font-weight: 600;<br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Emphasis < em>
    </h3>

    <p class="measure-6">
      This is an example of <em class="measure">emphasis placed on text</em> within copy.
    </p>

    <code>
      <xmp>This is an example of <em>emphasis placed on text</em>. </xmp>
    </code>
    <br/>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-em">Specs</button>
        </h4>
        <div id="specs-fonts-em" class="usa-accordion__content">
          <code>
            em <br />
            ------------------- <br />
            font-style: italic; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Superscript/Subscript < sup> & < sub>
    </h3>

    <p class="measure-6">
      This is an example of superscript <sup class="measure">2</sup> text and subscript <sub>2</sub> text.
    </p>

    <code>
      <xmp>This is an example of superscript <sup>2</sup> text and subscript <sub>2</sub> text. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-subscript">Specs</button>
        </h4>
        <div id="specs-fonts-subscript" class="usa-accordion__content">
          <code>
            sub, sup <br />
            ------------------- <br />
            font-size: 75%; <br />
            line-height: 0; <br />
            position: relative; <br />
            vertical-align: baseline; <br /><br />
            sub <br />
            ------------------- <br />
            bottom: -0.25em; <br /><br />
            sup <br />
            ------------------- <br />
            top: -0.5em; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Small < small>
    </h3>

    <p class="measure-6">
      This is an <small class="measure">example of small text</small> within copy.
    </p>

    <code>
      <xmp>This is an <small>example of small text</small>. </xmp>
    </code>
    <br/>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-small">Specs</button>
        </h4>
        <div id="specs-fonts-small" class="usa-accordion__content">
          <code>
            small <br />
            ------------------- <br />
            font-size: 80%; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Underline < u>
    </h3>

    <p class="measure-6">
      This is an <u class="measure">example of underlined text</u> within copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
    </p>

    <code>
      <xmp>This is an <u>example of underlined text</u>. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-underline">Specs</button>
        </h4>
        <div id="specs-fonts-underline" class="usa-accordion__content">
          <code>
            u <br />
            ------------------- <br />
            text-decoration: underline; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Delete < del>
    </h3>

    <p class="measure-6">
      This is an <del class="measure">example of deleted text</del> within copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi.
    </p>

    <code>
      <xmp>This is an <del>example of deleted text</del>. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-del">Specs</button>
        </h4>
        <div id="specs-fonts-del" class="usa-accordion__content">
          <code>
            del <br />
            ------------------- <br />
            text-decoration: line-through; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      HR Rule < hr>
    </h3>

    <p class="measure">
      Below is an HR tag.
    </p>
    <hr />

    <p>
      Above is an HR tag.
    </p>

    <code>
      <xmp>Below is an HR tag. </p>
        <hr />
        <p>Above is an HR tag.
      </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-hr">Specs</button>
        </h4>
        <div id="specs-fonts-hr" class="usa-accordion__content">
          <code>
            hr <br />
            ------------------- <br />
            border-bottom: 1px solid $steel; /* #5F636A */ <br />
            border-left: 0; <br />
            border-right: 0; <br />
            border-top: 0; <br />
            margin: 1.3rem 0; <br />
            box-sizing: content-box; <br />
            height: 0; <br />
            overflow: visible; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3>
      Blockquote < blockquote>
    </h3>

    <blockquote class="measure">
      Aliquam sed quam eget ligula luctus aliquam sed vitae nulla. Aliquam dui dolor, ullamcorper eget rutrum ut, hendrerit ac lorem. Donec magna est, sollicitudin vel ultrices vel.
    </blockquote>

    <code>
      <xmp>This is a <blockquote>blockquote</blockquote>. </xmp>
    </code>
    <br />

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-blockquote">Specs</button>
        </h4>
        <div id="specs-fonts-blockquote" class="usa-accordion__content">
          <code>
            blockquote <br />
            ------------------- <br />
            display: block; <br />
            margin-block-start: 1em; <br />
            margin-block-end: 1em; <br />
            margin-inline-start: 40px; <br />
            margin-inline-end: 40px; <br />
            margin: 0 0 1.5em 0.5em; <br />
            padding: 0 0 0 1em; <br />
            border-left: 5px solid $charcoal; /* #4A4A4A */ <br />
            line-height: 1.4; /* 23.74px */ <br />
            overflow-wrap: break-word; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h1>
      H1 < h1> Heading
    </h1>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <h1>
      H1 < h1> Heading With <br />Broken Text
    </h1>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h1">Specs</button>
        </h4>
        <div id="specs-fonts-h1" class="usa-accordion__content">
          <code>
            h1 <br />
            ------------------- <br />
            DESKTOP: font-size: 2.663rem; <br />
            MOBILE: font-size: 2.131rem;  <br />
            font-weight: bold; <br />
            line-height: 1.21;  <br />
            margin: 0 0 5px 0; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h2 class="measure">
      H2 < h2> Heading
    </h2>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.

    <h2>
      H2 < h2> Heading With <br />Broken Text
    </h2>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h2">Specs</button>
        </h4>
        <div id="specs-fonts-h2" class="usa-accordion__content">
          <code>
            h2 <br />
            ------------------- <br />
            DESKTOP: font-size: 1.991rem; <br />
            MOBILE: font-size: 1.594rem; <br />
            font-weight: 600; <br />
            DESKTOP: line-height: 1.21;  <br />
            MOBILE: line-height: 1.27;  <br />
            margin: 0 0 5px 0; <br />
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h3 class="measure">
      H3 < h3> Heading
    </h3>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <h3>
      H3 < h3> Heading With <br />Broken Text
    </h3>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h3">Specs</button>
        </h4>
        <div id="specs-fonts-h3" class="usa-accordion__content">
          <code>
            h3 <br />
            ------------------- <br />
            DESKTOP: font-size: 1.648rem; <br />
            MOBILE: font-size: 1.319rem; <br />
            font-weight: 600; <br />
            DESKTOP: line-height: 1.27;  <br />
            MOBILE: line-height: 1.25;  <br />
            margin: 0 0 5px 0;
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h4 class="measure">
      H4 < h4> Heading
    </h4>
    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <h4>
      H4 < h4> Heading With <br />Broken Text
    </h4>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h4">Specs</button>
        </h4>
        <div id="specs-fonts-h4" class="usa-accordion__content">
          <code>
            h4 <br />
            ------------------- <br />
            DESKTOP: font-size: 1.281rem; <br />
            MOBILE: font-size: 1.156rem; <br />
            font-weight: 600; <br />
            DESKTOP: line-height: 1.3;  <br />
            MOBILE: line-height: 1.25;  <br />
            margin: 0 0 5px 0;
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h5 class="measure">
      H5 < h5> Heading
    </h5>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <h5>
      H5 < h5> Heading With <br />Broken Text
    </h5>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h5">Specs</button>
        </h4>
        <div id="specs-fonts-h5" class="usa-accordion__content">
          <code>
            h5 <br />
            ------------------- <br />
            DESKTOP: font-size: 1.06rem; <br />
            MOBILE: font-size: 1rem; <br />
            font-weight: 700; <br />
            line-height: 1.5; <br />
            margin: 0 0 5px 0;
          </code>
        </div>
      </div>
    </div>
  </div>
  <hr />

  <div>
    <h6 class="measure">
      H6 < h6> Heading
    </h6>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <h6>
      H6 < h6> Heading With <br />Broken Text
    </h6>

    <p class="measure-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
    </p>

    <!-- SPECS -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-fonts-h6">Specs</button>
        </h4>
        <div id="specs-fonts-h6" class="usa-accordion__content">
          <code>
            h6 <br />
            ------------------- <br />
            DESKTOP: font-size: 1.06rem; <br />
            MOBILE: font-size: 1rem; <br />
            font-weight: 700; <br />
            line-height: 1.5; <br />
            margin: 0 0 5px 0;
          </code>
        </div>
      </div>
    </div>
  </div>
</div>

Standards - Base - Grid

Details and Specs

USWDS Specs Designs

The USWDS flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.

Basic Grid

.grid-col-1

.grid-col-2

.grid-col-3

.grid-col-4

.grid-col-5

.grid-col-6

.grid-col-7

.grid-col-8

.grid-col-9

.grid-col-10

.grid-col-11

.grid-col-12

Basic Grid Columns

.grid-col-4

Basic Grid Columns w/ Offset

.grid-col-8.grid-offset-4

Basic Grid Columns w/ Grid-Gap

.grid-col-4 (w/ .grid-gap)

Basic Grid Columns w/ Grid-Gap & Offset

.grid-col-8.grid-offset-4

Basic Grid Columns w/ Breakpoints

'mobile-lg': true, // 480px

mobile-lg:grid-col-4

'tablet': true, // 640px

tablet:grid-col-4

'tablet-lg': true, // 880px

tablet-lg:grid-col-4

'desktop': true, // 1024px

desktop:grid-col-4

'desktop-lg': true, // 1200px

desktop-lg:grid-col-4

'widescreen': true, // 1400px

widescreen:grid-col-4

GRID LAYOUTS USED ON SAMHSA MAIN

3 COLUMN LAYOUT

LEFT NAV
grid-col-3

MAIN CONTENT
grid-col-7

RIGHT RAIL
grid-col-2

2 COLUMN LAYOUT - NO RIGHT RAIL

LEFT NAV
grid-col-3

MAIN CONTENT
grid-col-7

2 COLUMN LAYOUT - NO LEFT NAV

MAIN CONTENT
grid-col-7 grid-offset-3

RIGHT RAIL
grid-col-2

1 COLUMN LAYOUT - NO LEFT NAV & RIGHT RAIL

MAIN CONTENT
grid-col-7 grid-offset-3

1 COLUMN LAYOUT - FULL WIDTH

MAIN CONTENT
grid-col-12

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
<div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3>
    </div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
    <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
    <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-grids">Details</button>
</h4>

<div id="details-grids" class="usa-accordion__content">
<p style="text-align:center;">
    <a href="https://designsystem.digital.gov/utilities/layout-grid/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link Button" target="_blank">USWDS Specs</a>
<a href="https://www.figma.com/design/LjetPiAXNZGTeM2ffp3Xju/SAMHSA-Grid-System?node-id=0-1&t=viJiiG7997OvMle5-0" class="button primary-button-1" title="Link to Figma Design" aria-label="Link Figma Design" target="_blank">Designs</a>
</p>
    <p>
        The USWDS flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.
    </p>
</div>
</div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<h3>Basic Grid</h3>
<div class="grid-row">
    <div class="grid-col-1">
        <div class="grid-col-content">.grid-col-1</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-2">
        <div class="grid-col-content">.grid-col-2</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-3">
        <div class="grid-col-content">.grid-col-3</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-5">
        <div class="grid-col-content">.grid-col-5</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-6">
        <div class="grid-col-content">.grid-col-6</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-7">
        <div class="grid-col-content">.grid-col-7</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-8">
        <div class="grid-col-content">.grid-col-8</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-9">
        <div class="grid-col-content">.grid-col-9</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-10">
        <div class="grid-col-content">.grid-col-10</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-11">
        <div class="grid-col-content">.grid-col-11</div>
    </div>
</div>
<div class="grid-row">
    <div class="grid-col-12">
        <div class="grid-col-content">.grid-col-12</div>
    </div>
</div>

<h3>Basic Grid Columns</h3>
<div class="grid-row">
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4</div>
    </div>
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4</div>
    </div>
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4</div>
    </div>
</div>

<h3>Basic Grid Columns w/ Offset</h3>
<div class="grid-row">
    <div class="grid-col-8 grid-offset-4">
        <div class="grid-col-content">.grid-col-8.grid-offset-4</div>
    </div>
</div>

<h3>Basic Grid Columns w/ Grid-Gap</h3>
<div class="grid-row grid-gap">
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4 (w/ .grid-gap)</div>
    </div>
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4 (w/ .grid-gap)</div>
    </div>
    <div class="grid-col-4">
        <div class="grid-col-content">.grid-col-4 (w/ .grid-gap)</div>
    </div>
</div>

<h3>Basic Grid Columns w/ Grid-Gap & Offset</h3>
<div class="grid-row grid-gap">
    <div class="grid-col-8 grid-offset-4">
        <div class="grid-col-content">.grid-col-8.grid-offset-4</div>
    </div>
</div>

<h3>Basic Grid Columns w/ Breakpoints</h3>
<p>'mobile-lg': true, // 480px</p>
<div class="grid-row">
    <div class="mobile-lg:grid-col-4">
        <div class="grid-col-content">mobile-lg:grid-col-4</div>
    </div>
    <div class="mobile-lg:grid-col-4">
        <div class="grid-col-content">mobile-lg:grid-col-4</div>
    </div>
    <div class="mobile-lg:grid-col-4">
        <div class="grid-col-content">mobile-lg:grid-col-4</div>
    </div>
</div>

<p>'tablet': true, // 640px</p>
<div class="grid-row">
    <div class="tablet:grid-col-4">
        <div class="grid-col-content">tablet:grid-col-4</div>
    </div>
    <div class="tablet:grid-col-4">
        <div class="grid-col-content">tablet:grid-col-4</div>
    </div>
    <div class="tablet:grid-col-4">
        <div class="grid-col-content">tablet:grid-col-4</div>
    </div>
</div>

<p>'tablet-lg': true, // 880px</p>
<div class="grid-row">
    <div class="tablet-lg:grid-col-4">
        <div class="grid-col-content">tablet-lg:grid-col-4</div>
    </div>
    <div class="tablet-lg:grid-col-4">
        <div class="grid-col-content">tablet-lg:grid-col-4</div>
    </div>
    <div class="tablet-lg:grid-col-4">
        <div class="grid-col-content">tablet-lg:grid-col-4</div>
    </div>
</div>

<p>'desktop': true, // 1024px</p>
<div class="grid-row">
    <div class="desktop:grid-col-4">
        <div class="grid-col-content">desktop:grid-col-4</div>
    </div>
    <div class="desktop:grid-col-4">
        <div class="grid-col-content">desktop:grid-col-4</div>
    </div>
    <div class="desktop:grid-col-4">
        <div class="grid-col-content">desktop:grid-col-4</div>
    </div>
</div>

<p>'desktop-lg': true, // 1200px</p>
<div class="grid-row">
    <div class="desktop-lg:grid-col-4">
        <div class="grid-col-content">desktop-lg:grid-col-4</div>
    </div>
    <div class="desktop-lg:grid-col-4">
        <div class="grid-col-content">desktop-lg:grid-col-4</div>
    </div>
    <div class="desktop-lg:grid-col-4">
        <div class="grid-col-content">desktop-lg:grid-col-4</div>
    </div>
</div>

<p>'widescreen': true, // 1400px</p>
<div class="grid-row">
    <div class="widescreen:grid-col-4">
        <div class="grid-col-content">widescreen:grid-col-4</div>
    </div>
    <div class="widescreen:grid-col-4">
        <div class="grid-col-content">widescreen:grid-col-4</div>
    </div>
    <div class="widescreen:grid-col-4">
        <div class="grid-col-content">widescreen:grid-col-4</div>
    </div>
</div>

<h3>GRID LAYOUTS USED ON SAMHSA MAIN</h3>
<p>3 COLUMN LAYOUT</p>
<div class="grid-row">
    <div class="desktop:grid-col-3">
        <div class="grid-col-content">
            LEFT NAV<br>
            grid-col-3
        </div>
    </div>
    <div class="desktop:grid-col-7">
        <div class="grid-col-content">
            MAIN CONTENT<br>
            grid-col-7
        </div>
    </div>
    <div class="desktop:grid-col-2">
        <div class="grid-col-content">
            RIGHT RAIL<br>
            grid-col-2
        </div>
    </div>
</div>

<p>2 COLUMN LAYOUT - NO RIGHT RAIL</p>
<div class="grid-row">
    <div class="desktop:grid-col-3">
        <div class="grid-col-content">
            LEFT NAV<br>
            grid-col-3
        </div>
    </div>
    <div class="desktop:grid-col-7">
        <div class="grid-col-content">
            MAIN CONTENT<br>
            grid-col-7
        </div>
    </div>
</div>

<p>2 COLUMN LAYOUT - NO LEFT NAV</p>
<div class="grid-row">
    <div class="desktop:grid-col-7 desktop:grid-offset-3">
        <div class="grid-col-content">
            MAIN CONTENT<br>
            grid-col-7 grid-offset-3
        </div>
    </div>
    <div class="desktop:grid-col-2">
        <div class="grid-col-content">
            RIGHT RAIL<br>
            grid-col-2
        </div>
    </div>
</div>

<p>1 COLUMN LAYOUT - NO LEFT NAV & RIGHT RAIL</p>
<div class="grid-row">
    <div class="desktop:grid-col-7 desktop:grid-offset-3">
        <div class="grid-col-content">
            MAIN CONTENT<br>
            grid-col-7 grid-offset-3
        </div>
    </div>
</div>

<p>1 COLUMN LAYOUT - FULL WIDTH</p>
<div class="grid-row">
    <div class="grid-col-12">
        <div class="grid-col-content">
            MAIN CONTENT<br>
            grid-col-12
        </div>
    </div>
</div>

Standards - Base - Utilities

Details and Specs

USWDS Specs Designs

Utilities are simple HTML classes typically scoped to a single CSS property, like border-style or background-color. Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.

USWDS Utilities

class="usa-prose"


                .usa-prose 

                ------------------- 

                  font-family: "Source Sans Pro",sans-serif; 

                  font-color: $charcoal; /* #4A4A4A */ 

                  DESKTOP: font-size: 1.06rem; /* 16.96px /  

                 MOBILE: font-size: 1rem; /* 16px /  

                line-height: 1.5; /* 25.44px */ 

                font-weight: 400; 
 

                .measure-6 

                ------------------- 

                max-width: 88ex;

class="font-lang-"

The USWDS typescale includes 21 system tokens that SAMHSA has avaliable as either a variable or an independent class.
NOTE: Always use either the variable or the class values. Do not hardcode as a px value.

Variable - $font-lang-micro

Class - .font-lang-micro

Font Size - 0.63rem (10px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-1

Class - .font-lang-1

Font Size - 0.75rem (12px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-2

Class - .font-lang-2

Font Size - 0.81rem (13px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-3

Class - .font-lang-3

Font Size - 0.88rem (14px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-4

Class - .font-lang-4

Font Size - 0.94rem (15px)

"Source Sans Pro",sans-serif;

Variable - $base-font-size

Font Size - 1rem (16px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-6

Class - .font-lang-6

Font Size - 1.06rem (17px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-7

Class - .font-lang-7

Font Size - 1.13rem (18px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-8

Class - .font-lang-8

Font Size - 1.25rem (20px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-9

Class - .font-lang-9

Font Size - 1.38rem (22px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-10

Class - .font-lang-10

Font Size - 1.5rem (24px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-11

Class - .font-lang-11

Font Size - 1.75rem (28px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-12

Class - .font-lang-12

Font Size - 2rem (32px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-13

Class - .font-lang-13

Font Size - 2.25rem (36px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-14

Class - .font-lang-14

Font Size - 2.5rem (40px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-15

Class - .font-lang-15

Font Size - 3rem (48px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-16

Class - .font-lang-16

Font Size - 3.5rem (56px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-17

Class - .font-lang-17

Font Size - 4rem (64px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-18

Class - .font-lang-18

Font Size - 5rem (80px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-19

Class - .font-lang-19

Font Size - 7.5rem (120px)

"Source Sans Pro",sans-serif;

Variable - $font-lang-20

Class - .font-lang-20

Font Size - 8.75rem (140px)

"Source Sans Pro",sans-serif;

class - .lb-content-height

height: fit-content;

class - .lb-accordion-image-left

float: left; , margin: 0 10px 10px 0;

class - .lb-accordion-image-right

float: right; , margin: 0 10px 10px 0;

class - .image-left-text-wrapper

position: relative; ,left: 15px;

class - .lb-pullout-right

float: right; , margin: 0 0 1em 1em;

class - .lb-pullout-left

float: left; , margin: 0 1em 1em 0;

class - .lego-float-right

float: right; , margin: 0 0 1.5em 1.5em; , height: fit-content;

class - .float-image-left

float: left; , padding: 0 10px 10px 0;

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
<div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3>
    </div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
    <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-utilities">Details</button>
</h4>

<div id="details-utilities" class="usa-accordion__content">
<p style="text-align:center;">
    <a href="https://designsystem.digital.gov/utilities/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
<a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=92-0&t=Nw6gEMJyUkar1jOd-1" class="button primary-button-1" title="Link to Figma Design Guide" aria-label="Link XD Designs" target="_blank">Designs</a>
</p>
  <p>
    Utilities are simple HTML classes typically scoped to a single CSS property, like border-style or background-color. Utilities can be used additively to style an object from scratch or to override a style defined in component CSS.

  </p>
</div>
</div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<div class="simple-styleguide">
    <div>
        <h3>USWDS Utilities</h3>

        <strong>class="usa-prose"</strong>
        <p class="measure-6 usa-prose">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum.
        </p>

        <!-- SPECS -->
        <div class="usa-accordion style-admin usa-accordion--bordered">
          <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
            <h4 class="usa-accordion__heading">
              <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
              <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-utilities-prose">Specs</button>
            </h4>
            <div id="specs-utilities-prose" class="usa-accordion__content">
              <code>
                .usa-prose <br />
                ------------------- <br />
                  font-family: "Source Sans Pro",sans-serif; <br />
                  font-color: $charcoal; /* #4A4A4A */ <br />
                  DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
                 MOBILE: font-size: 1rem; /* 16px /  <br />
                line-height: 1.5; /* 25.44px */ <br />
                font-weight: 400; <br /> <br/>
                .measure-6 <br />
                ------------------- <br />
                max-width: 88ex;
              </code>
            </div>
          </div>
        </div>
        <hr/>

        <strong>class="font-lang-"</strong>
        <p>
            The USWDS typescale includes 21 system tokens that SAMHSA has avaliable as either a variable or an independent class.<br />
             NOTE: Always use either the variable or the class values. Do not hardcode as a px value.
        </p>

        <table class="usa-table--borderless site-table-responsive width-full">
            <tbody>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-micro
                    </p>
                    <p>
                      Class - .font-lang-micro
                    </p>
                    <p>
                      Font Size - 0.63rem (10px)
                    </p>
                    <br/>
                    <span class="font-lang-micro">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-1
                    </p>
                    <p>
                      Class - .font-lang-1
                    </p>
                    <p>
                      Font Size - 0.75rem (12px)
                    </p>
                    <br/>
                    <span class="font-lang-1">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-2
                    </p>
                    <p>
                      Class - .font-lang-2
                    </p>
                    <p>
                      Font Size - 0.81rem (13px)
                    </p>
                    <br/>
                    <span class="font-lang-2">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-3
                    </p>
                    <p>
                      Class - .font-lang-3
                    </p>
                    <p>
                      Font Size - 0.88rem (14px)
                    </p>
                    <br/>
                    <span class="font-lang-3">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-4
                    </p>
                    <p>
                      Class - .font-lang-4
                    </p>
                    <p>
                      Font Size - 0.94rem (15px)
                    </p>
                    <br/>
                    <span class="font-lang-4">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $base-font-size
                    </p>
                    <p>
                      Font Size - 1rem (16px)
                    </p>
                    <br/>
                    <span class="font-lang-5">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-6
                    </p>
                    <p>
                      Class - .font-lang-6
                    </p>
                    <p>
                      Font Size - 1.06rem (17px)
                    </p>
                    <br/>
                    <span class="font-lang-6">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-7
                    </p>
                    <p>
                      Class - .font-lang-7
                    </p>
                    <p>
                      Font Size - 1.13rem (18px)
                    </p>
                    <br/>
                    <span class="font-lang-7">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-8
                    </p>
                    <p>
                      Class - .font-lang-8
                    </p>
                    <p>
                      Font Size - 1.25rem (20px)
                    </p>
                    <br/>
                    <span class="font-lang-8">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-9
                    </p>
                    <p>
                      Class - .font-lang-9
                    </p>
                    <p>
                      Font Size - 1.38rem (22px)
                    </p>
                    <br/>
                    <span class="font-lang-9">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-10
                    </p>
                    <p>
                      Class - .font-lang-10
                    </p>
                    <p>
                      Font Size - 1.5rem (24px)
                    </p>
                    <br/>
                    <span class="font-lang-10">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-11
                    </p>
                    <p>
                      Class - .font-lang-11
                    </p>
                    <p>
                      Font Size - 1.75rem (28px)
                    </p>
                    <br/>
                    <span class="font-lang-11">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-12
                    </p>
                    <p>
                      Class - .font-lang-12
                    </p>
                    <p>
                      Font Size - 2rem (32px)
                    </p>
                    <br/>
                    <span class="font-lang-12">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-13
                    </p>
                    <p>
                      Class - .font-lang-13
                    </p>
                    <p>
                      Font Size - 2.25rem (36px)
                    </p>
                    <br/>
                    <span class="font-lang-13">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-14
                    </p>
                    <p>
                      Class - .font-lang-14
                    </p>
                    <p>
                      Font Size - 2.5rem (40px)
                    </p>
                    <br/>
                    <span class="font-lang-14">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-15
                    </p>
                    <p>
                      Class - .font-lang-15
                    </p>
                    <p>
                      Font Size - 3rem (48px)
                    </p>
                    <br/>
                    <span class="font-lang-15">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-16
                    </p>
                    <p>
                      Class - .font-lang-16
                    </p>
                    <p>
                      Font Size - 3.5rem (56px)
                    </p>
                    <br/>
                    <span class="font-lang-16">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-17
                    </p>
                    <p>
                      Class - .font-lang-17
                    </p>
                    <p>
                      Font Size - 4rem (64px)
                    </p>
                    <br/>
                    <span class="font-lang-17">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-18
                    </p>
                    <p>
                      Class - .font-lang-18
                    </p>
                    <p>
                      Font Size - 5rem (80px)
                    </p>
                    <br/>
                    <span class="font-lang-18">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-19
                    </p>
                    <p>
                      Class - .font-lang-19
                    </p>
                    <p>
                      Font Size - 7.5rem (120px)
                    </p>
                    <br/>
                    <span class="font-lang-19">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
                <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      Variable - $font-lang-20
                    </p>
                    <p>
                      Class - .font-lang-20
                    </p>
                    <p>
                      Font Size - 8.75rem (140px)
                    </p>
                    <br/>
                    <span class="font-lang-1">
                      "Source Sans Pro",sans-serif;
                    </span>
                  </td>
                </tr>
        <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lb-content-height
                    </p>
                    <br/>
                    <span class="font-lang-1">
                      height: fit-content;
                    </span>
                  </td>
                </tr>

     <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lb-accordion-image-left
                    </p>
                    <br/>
                    <span class="font-lang-1">
                       float: left; , margin: 0 10px 10px 0;
                    </span>
                  </td>
                </tr>
     <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lb-accordion-image-right
                    </p>
                    <br/>
                    <span class="font-lang-1">
                       float: right; , margin: 0 10px 10px 0;
                    </span>
                  </td>
                </tr>
     <tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .image-left-text-wrapper
                    </p>
                    <br/>
                    <span class="font-lang-1">
                      position: relative; ,left: 15px;
                    </span>
                  </td>
                </tr>
<tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lb-pullout-right
                    </p>
                    <br/>
                    <span class="font-lang-1">
                       float: right; , margin: 0 0 1em 1em;
                    </span>
                  </td>
                </tr>

<tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lb-pullout-left
                    </p>
                    <br/>
                    <span class="font-lang-1">
                       float: left; , margin: 0 1em 1em 0;
                    </span>
                  </td>
                </tr>
<tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .lego-float-right
                    </p>
                    <br/>
                    <span class="font-lang-1">
                      float: right; , margin: 0 0 1.5em 1.5em; , height: fit-content;
                    </span>
                  </td>
                </tr>
<tr>
                  <td data-title="Example" class="line-height-sans-1 overflow-hidden">
                    <p>
                      class - .float-image-left
                    </p>
                    <br/>
                    <span class="font-lang-1">
                     float: left; , padding: 0 10px 10px 0;
                    </span>
                  </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Standards - Breadcrumbs

Details and Specs

Requirements USWDS Specs Designs

A breadcrumb is a type of secondary navigation scheme that reveals the user's location in a website.

Examples


          font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 
 


        .breadcrumb 

        ------------------- 

        padding-bottom: 0.5em; 



        .breadcrumb ol 

        ------------------- 

        margin: 0; 

        padding: 0; 



        .breadcrumb li 

        ------------------- 

        display: inline; 

        margin: 0; 

        padding: 0; 

        list-style-type: none; 



        a 

        ------------------- 

        color: $sapphire; /* #1F419A */ 

        text-decoration: underline; 



        a:hover & a:active 

        ------------------- 

        color: $royalblue; /* #005EA2 */ 

        text-decoration: underline; 



        a:focus 

        ------------------- 

        color: $royalblue; /* #005EA2 */ 

        text-decoration: none; 

        outline: 0.25rem solid $vivid-blue; /* #2491ff */

        outline-offset: 0; 



        a:visited 

        ------------------- 

        color: $barney; /* #54278F */ 

        text-decoration: underline;

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3>
    </div>
  </div>

  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="summarybox-details">
        Details
      </button>
    </h4>
    <div id="summarybox-details" class="usa-accordion__content">
      <p style="text-align: center;">
<a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
<a href="https://designsystem.digital.gov/components/breadcrumb/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
<a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/613a6666ffb606b94068a43f" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a></p>

      <p>A breadcrumb is a type of secondary navigation scheme that reveals the user's location in a website. </p>

      <h5>Examples</h5>
      <ul>
          <li>
            <a href="/find-treatment" target="_blank">/find-treatment</a>
          </li>
          <li>
            <a href="/find-help/988" target="_blank">/find-help/988</a>
          </li>
          <li>
            <a href="/find-help/988/lifeline-timeline" target="_blank">/find-help/988/lifeline-timeline</a>
          </li>
      </ul>
    </div>
  </div>

  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="summarybox-specs">
        Specs
      </button>
    </h4>
    <div id="summarybox-specs" class="usa-accordion__content">
      <code>
          font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /> <br />

        .breadcrumb <br/>
        ------------------- <br />
        padding-bottom: 0.5em; <br /><br/>

        .breadcrumb ol <br/>
        ------------------- <br />
        margin: 0; <br />
        padding: 0; <br /><br />

        .breadcrumb li <br />
        ------------------- <br />
        display: inline; <br />
        margin: 0; <br />
        padding: 0; <br />
        list-style-type: none; <br /><br />

        a <br />
        ------------------- <br />
        color: $sapphire; /* #1F419A */ <br />
        text-decoration: underline; <br /><br />

        a:hover & a:active <br />
        ------------------- <br />
        color: $royalblue; /* #005EA2 */ <br />
        text-decoration: underline; <br /><br />

        a:focus <br />
        ------------------- <br />
        color: $royalblue; /* #005EA2 */ <br />
        text-decoration: none; <br />
        outline: 0.25rem solid $vivid-blue; /* #2491ff */<br />
        outline-offset: 0; <br /><br />

        a:visited <br />
        ------------------- <br />
        color: $barney; /* #54278F */ <br />
        text-decoration: underline; <br /><br />
      </code>
    </div>
  </div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<div class="simple-styleguide">
  <div style="margin-top:10px;">
    <nav class="breadcrumb measure" role="navigation" aria-labelledby="system-breadcrumb">
        <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
        <ol>
            <li>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/">Next Page</a>
            </li>
            <li>
                <a href="/">Next Page</a>
            </li>
            <li>
                Current Page
            </li>
        </ol>
    </nav>
  </div>
</div>

Standards - Buttons

Details and Specs

Requirements USWDS Specs Designs

Description

A button draws attention to important actions with a large selectable surface.

Important actions.
Use buttons for the most important actions you want users to take on your site, such as Download, Sign up or Log out.

Usability

Use standard buttons for actions that go a next step.
Use outline buttons for actions that happen on the current page.

Give an important action a distinctive style.
Style the button most users should select in a way that distinguishes it from other buttons on the page. Try using the usa-button--big variant or the most visually distinct color variant.

Make sure buttons look selectable.
Use color variations to distinguish static, hover, and active states.
Avoid using too many buttons on a page.
Use sentence-case capitalization for button labels.

Keep button text short.
Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View, or Sign up).

Lead with a verb.
Make the first word of the button’s text a verb. For example, instead of Complaint filing, label the button File a complaint.

Icons can be helpful.
Consider adding an icon to signal specific actions (Download, Open in a new window, etc).

Accessibility

Buttons should display a visible focus state when users tab to them.

Use standard markup.
Avoid using DIV or IMG tags to create buttons. Screen readers don’t automatically know either is a usable button.

Screen readers handle buttons and links differently.
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.

Examples


              font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 
 


            input[type="submit"],input[type="reset"], .button, button:not(.toolbar-icon 

            ------------------- 

             appearance: none;

             background-color: $teal; /* #1A6986 */ 

             border: $teal; /* #1A6986 */ 

             border-radius: 0.25rem; 

             color: $white; /* #FFFFFF */ 

             cursor: pointer; 

             display: inline-block; 

             line-height: 1.2; /* 20.32 */ 

             max-width: 100%; 

             padding: 0.75rem 1.25rem; 

             text-align: center; 

             text-decoration: none; 

             user-select: none; 

             vertical-align: middle; 

             font-weight: normal; 

             white-space: normal; 



            .button:focus, .button:hover 

            ------------------- 

             background-color: $steel; /* #5F636A */ 

             box-shadow: 0 0 5px rgb(81 145 205 / 70%); 



            .button:disabled, .button:disabled:hover 

            ------------------- 

             background-color: $smoke; /* #d0d0d0 */ 

             color: $charcoal; /* #4A4A4A */ 


            .button:first-child, .image-button:first-child 

            ------------------- 

             margin-right: 0; 

             margin-left: 0; 



            a.button.button-fullwidth 

            ------------------- 

             width: 100% !important;

Link Button - Full Width <a href="https://www.google.com/" class="button button-fullwidth primary-button-1" title="Link Button Full Width1" aria-label="Link Button - Full Width" >Link Button - Full Width</a>

Link Button <a href="https://www.google.com/" class="button primary-button-1" title="Link Button" aria-label="Link Button" >Link Button</a>

<button>Button</button>

<input type="button" value="Button Input" class="button" />

<input type="reset" value="Form Reset" class="button" />

<input type="submit" value="Form Submit" class="button" />

<input type="submit" value="Disabled" class="button" />

<input type="outline" value="Button Input" class="button" />

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
   <div class="grid-row margin-bottom-2">
      <div class="grid-col-6 usa-accordion-group-header">
         <h3>
            <p style="line-height: 1.5";>Details and Specs</p>
         </h3>
      </div>
   </div>
   <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
      <h4 class="usa-accordion__heading">
         <button class="usa-accordion__button" aria-expanded="false" aria-controls="template-details">
         Details
         </button>
      </h4>
      <div id="template-details" class="usa-accordion__content">
         <p style="text-align: center;">
  <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
  <a href="https://designsystem.digital.gov/components/button/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
  <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=1-3&node-type=canvas&t=YD3nayHv6zGZuysn-0" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
</p>
         <h5>Description</h5>
         <p>
            A button draws attention to important actions with a large selectable surface.<br/><br/>
            Important actions.<br/>
            Use buttons for the most important actions you want users to take on your site, such as Download, Sign up or Log out.
         </p>
         <h5>Usability</h5>
         <p>
            Use standard buttons for actions that go a next step.<br/>
            Use outline buttons for actions that happen on the current page.<br/><br/>
            Give an important action a distinctive style.<br/>
            Style the button most users should select in a way that distinguishes it from other buttons on the page. Try using the usa-button--big variant or the most visually distinct color variant.<br/><br/>
            Make sure buttons look selectable.<br/>
            Use color variations to distinguish static, hover, and active states.<br/>
            Avoid using too many buttons on a page.<br/>
            Use sentence-case capitalization for button labels.<br/><br/>
            Keep button text short.<br/>
            Button text should be as short as possible with action words that clearly explain what will happen when the button is selected (for example, Download, View, or Sign up).<br/><br/>
            Lead with a verb. <br/>
            Make the first word of the button’s text a verb. For example, instead of Complaint filing, label the button File a complaint.<br/><br/>
            Icons can be helpful.<br/>
            Consider adding an icon to signal specific actions (Download, Open in a new window, etc).
         </p>
         <h5>Accessibility</h5>
         <p>
            Buttons should display a visible focus state when users tab to them.<br/><br/>
            Use standard markup.<br/>
            Avoid using DIV or IMG tags to create buttons. Screen readers don’t automatically know either is a usable button.<br/><br/>
            Screen readers handle buttons and links differently.<br/>
            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.
         </p>
         <h5>Examples</h5>
         <ul>
            <li>
               <a href="https://www.samhsa.gov/about-us/advisory-councils/meetings" target="_blank">https://www.samhsa.gov/about-us/advisory-councils/meetings</a>
            </li>
            <li>
               <a href="https://www.samhsa.gov/esmi-treatment-locator" target="_blank">https://www.samhsa.gov/esmi-treatment-locator</a>
            </li>
            <li>
               <a href="https://www.samhsa.gov/gains-center/mental-health-treatment-court-locator/adults" target="_blank">https://www.samhsa.gov/gains-center/mental-health-treatment-court-locator/adults</a>
            </li>
            <li>
               <a href="https://www.samhsa.gov/grants/grant-announcements-2022" target="_blank">https://www.samhsa.gov/grants/grant-announcements-2022s</a>
            </li>
            <li>
               <a href="https://www.samhsa.gov/find-help/disaster-distress-helpline/asl-faq" target="_blank">https://www.samhsa.gov/find-help/disaster-distress-helpline/asl-faq</a>
            </li>
         </ul>
      </div>
   </div>
   <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
      <h4 class="usa-accordion__heading">
         <button class="usa-accordion__button" aria-expanded="false" aria-controls="template-specs">
         Specs
         </button>
      </h4>
      <div id="template-specs" class="usa-accordion__content">
         <code>
              font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /> <br />

            input[type="submit"],input[type="reset"], .button, button:not(.toolbar-icon <br/>
            ------------------- <br />
             appearance: none;<br/>
             background-color: $teal; /* #1A6986 */ <br/>
             border: $teal; /* #1A6986 */ <br/>
             border-radius: 0.25rem; <br/>
             color: $white; /* #FFFFFF */ <br/>
             cursor: pointer; <br/>
             display: inline-block; <br/>
             line-height: 1.2; /* 20.32 */ <br/>
             max-width: 100%; <br/>
             padding: 0.75rem 1.25rem; <br/>
             text-align: center; <br/>
             text-decoration: none; <br/>
             user-select: none; <br/>
             vertical-align: middle; <br/>
             font-weight: normal; <br/>
             white-space: normal; <br/><br/>

            .button:focus, .button:hover <br/>
            ------------------- <br />
             background-color: $steel; /* #5F636A */ <br/>
             box-shadow: 0 0 5px rgb(81 145 205 / 70%); <br/><br/>

            .button:disabled, .button:disabled:hover <br/>
            ------------------- <br />
             background-color: $smoke; /* #d0d0d0 */ <br/>
             color: $charcoal; /* #4A4A4A */ <br/>

            .button:first-child, .image-button:first-child <br/>
            ------------------- <br />
             margin-right: 0; <br/>
             margin-left: 0; <br/><br/>

            a.button.button-fullwidth <br/>
            ------------------- <br />
             width: 100% !important; <br/>
         </code>
      </div>
   </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<p>
   <a href="https://www.google.com/" class="button button-fullwidth primary-button-1" title="Link Button - Full Width" aria-label="Link Button - Full Width">Link Button - Full Width</a>
   <code>
   &lt;a href=&quot;https://www.google.com/&quot; class=&quot;button button-fullwidth primary-button-1&quot; title=&quot;Link Button Full Width1&quot; aria-label=&quot;Link Button - Full Width&quot; &gt;Link Button - Full Width&lt;/a&gt;
   </code>
</p>
<p>
   <a href="https://www.google.com/" class="button primary-button-1" title="Link Button" aria-label="Link Button">Link Button</a>
   <code>
   &lt;a href=&quot;https://www.google.com/&quot; class=&quot;button primary-button-1&quot; title=&quot;Link Button&quot; aria-label=&quot;Link Button&quot; &gt;Link Button&lt;/a&gt;
   </code>
</p>
<p>
   <button>Button</button>
   <code>
   &lt;button&gt;Button&lt;/button&gt;
   </code>
</p>
<p>
   <input type="button" value="Button Input" class="button" />
   <code>
   &lt;input type=&quot;button&quot; value=&quot;Button Input&quot; class=&quot;button&quot; /&gt;
   </code>
</p>
<p>
   <input type="reset" value="Reset Input" class="button" />
   <code>
   &lt;input type=&quot;reset&quot; value=&quot;Form Reset&quot; class=&quot;button&quot; /&gt;
   </code>
</p>
<p>
   <input type="submit" value="Form Submit" class="button" />
   <code>
   &lt;input type=&quot;submit&quot; value=&quot;Form Submit&quot; class=&quot;button&quot; /&gt;
   </code>
</p>
 <p>
    <input type="submit" value="Disabled" class="button"  disabled="disabled"/>
    <code>
    &lt;input type=&quot;submit&quot; value=&quot;Disabled&quot; class=&quot;button&quot; /&gt;
    </code>
 </p>
<p>
   <input type="submit" value="Outline" class="button--outline" />
   <code>
   &lt;input type=&quot;outline&quot; value=&quot;Button Input&quot; class=&quot;button&quot; /&gt;
   </code>
</p>

Standards - Cards

Details and Specs

Requirements USWDS Specs Designs

Description

Cards contain content and actions about a single subject.

A card is often a subset or summary of a larger idea. It acts as an entry point to more detailed information. This summary can contain a variety of content types, such as text, images and multimedia, or buttons and links.

An individual card is typically a member of a collection of similar cards, not a single card in isolation. A card is distinguished from others in its collection by its content, and cards are distinguished from the broader page context in form — usually with a border or a shadow.

Finally, a card is modular, which means you can vary the order of cards in a collection without destroying any individual card’s meaning.

Guidance

Usability

Make cards actionable. Since cards are used as a summary of more detailed information, any individual card should link out to that information.
Don’t use the card component only for decoration. Use the card component for cards, not for any type of content that’s designed to have a border around it.
Include non-redundant content. Don’t repeat images or content common to all or most cards in a collection. Repeated information (like using the same image for each card in a collection) makes it more difficult to distinguish cards from one another.
Make sure images are properly sized. Cards often change size depending on the device. Make sure you use an image that works well on any device at any size.
Use simple styling. Avoid distracting skeumorphism. Don’t include any card styling that calls too much attention to the metaphor of a paper card, like folds, bent edges, or paper texture.

Accessibility

Use unordered lists and list items. Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group and allows shortcuts between list items.
Use the appropriate heading level for your page. Update heading level based on the content of your page to make sure card headings are in the correct, logical outline order.
Use CSS to order the media element. Logically, the media element should follow the header element. Don’t re-organize the markup to reverse their order.

Examples


           font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 
 


          .usa-card-group 

          ------------------- 

          list-style: none !important; 

          margin: 0 !important; 



          .usa-card

          ------------------- 

          margin-bottom: 0.5rem; 

          max-width: none; 



          .usa-card__container 

          ------------------- 

          color: $charcoal; /* #4A4A4A */ 

          background-color: $white; /* #FFFFFF */ 

          border-width: 0px; 

          border-color: $mist; /* #EEEEEE */ 

          border-style: solid; 

          display: -webkit-box; 

          display: -ms-flexbox; 

          display: flex; 

          height: 100%; 

          -webkit-box-orient: vertical; 

          -webkit-box-direction: normal; 

          -ms-flex-direction: column; 

          flex-direction: column; 

          margin-left: 0.5rem; 

          margin-right: 0.5rem; 

          position: relative; 

          border-radius: 0.5rem; 



          .usa-card.yes_border .usa-card__container 

          ------------------- 

          border-width: 2px; 



          .usa-card__header 

          ------------------- 

          padding-bottom: 0.5rem; 

          padding-top: 1.5rem; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem; 



          .usa-card__header>:only-child, .usa-card__body>:only-child 

          ------------------- 

          margin-bottom: 0; 

          margin-top: 0; 

          padding-bottom: 0; 

          padding-top: 0; 



          .usa-card--header-first .usa-card__media 

          ------------------- 

          -webkit-box-ordinal-group: 1; 

          -ms-flex-order: 0; 

          order: 0; 



          .usa-card.usa-card--header-first .usa-card__media 

          ------------------- 

          -webkit-box-ordinal-group: 1; 

          -ms-flex-order: 0; 

          order: 0; 



          .usa-card__img 

          ------------------- 

          border-top-left-radius: calc( 0.5rem - 2px); 

          border-top-right-radius: calc( 0.5rem - 2px); 

          background-color: #f0f0f0; 

          position: relative; 

          overflow: hidden; 



          .usa-card__img img 

          ------------------- 

          display: block; 

          height: 100%; 

          width: 100%; 

          -o-object-fit: cover; 

          object-fit: cover; 



          .usa-card__body 

          ------------------- 

          -webkit-box-flex: 0; 

          -ms-flex: 1 1 0; 

          flex: 0; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem; 

          padding-bottom: 0.5rem; 

          padding-top: 0.5rem; 

          -ms-flex-preferred-size: auto; 

          flex-basis: auto; 



          .usa-card__footer 

          ------------------- 

          padding-bottom: 1.5rem; 

          padding-top: 0.5rem; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem; 



          .usa-card__footer .usa-button:only-of-type 

          ------------------- 

          margin-right: 0; 



          .usa-card.usa-card--flag .usa-card__header, .usa-card.usa-card--flag .usa-card__body, .usa-card.usa-card--flag .usa-card__footer 

          ------------------- 

          padding: 1rem; 

          margin-left: 10rem; 



          .usa-card.usa-card--flag .usa-card__media 

          ------------------- 

          display: -webkit-box; 

          display: -ms-flexbox; 

          display: flex; 

          overflow: hidden; 

          position: absolute; 

          bottom: 0; 

          top: 0; 

          left: 0; 

          width: 10rem; 



          .usa-card--flag .usa-card__img 

          ------------------- 

          border-radius: 0; 

          border-top-left-radius: calc( 0.5rem - 2px); 

          border-bottom-left-radius: calc( 0.5rem - 2px); 



          .usa-card.usa-card--flag.usa-card--media-right .usa-card__header, .usa-card.usa-card--flag.usa-card--media-right .usa-card__body, .usa-card.usa-card--flag.usa-card--media-right .usa-card__footer 

          ------------------- 

          margin-left: 0; 

          margin-right: 10rem; 



          .usa-card.usa-card--flag.usa-card--media-right .usa-card__media 

          ------------------- 

          left: auto; 

          right: 0; 



          .usa-card--flag.usa-card--media-right .usa-card__img 

          ------------------- 

          border-radius: 0; 

          border-top-right-radius: calc( 0.5rem - 2px); 

          border-bottom-right-radius: calc( 0.5rem - 2px);

Cards - No Border and Border

Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam. This is an internal link. This is an external link.
Card with media

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam. This is an internal link. This is an external link.
Media and header first

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui. This is an internal link. This is an external link.

Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam. This is an internal link. This is an external link.
Card with media

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis dolores molestias! Quas quisquam. This is an internal link. This is an external link.
Media and header first

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui. This is an internal link. This is an external link.

Flags - No Border and Border

Guidelines

CONTENT GUIDELINE - Only one Flag per row (grid-col-12).
CONTENT GUIDELINE - At 880px breakpoint:
No more than 5 rows of text without button.
No more than 3 rows of text with button.
(div.usa-card__container height 260px or less).
DEV GUIDELINE (REMOVE THIS ITEM FROM THIS LIST ONCE THIS IS CODED:
Up to 880px, remove .usa-card--flag class and display as normal card.
Above 880px, add .usa-card--flag class and display as flag.

.usa-card--flag ..usa-card__container {
max-height: 265px;
overflow: hidden;
}

.usa-card--flag .usa-card__container .usa-card__footer {
text-align: left;
}
DESIGN/CONTENT GUIDELINE - Image dimension specs:
ADD IMAGE GUIDELINE SPECS HERE.

Flag Left - No Border

Lorem ipsum dolor sit amet. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an internal link. This is an external link.
Flag Right - No Border

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an internal link. This is an external link.

Flag Left - Border

Lorem ipsum dolor sit amet. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an internal link. This is an external link.
Flag Right - Border

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an internal link. This is an external link.

<!-- CUSTOM STYLES  -->
<style>
.usa-card--flag .usa-card__container {
    max-height: 265px;
    overflow: hidden;
}
.usa-card--flag .usa-card__container .usa-card__footer {
    text-align: left;
}
</style>

<script>
$(document).ready(function($) {
$(window).resize(function(){
if ($(window).innerWidth() <= 879) {
  $("li.usa-card.usa-card--flag").addClass("usa-card--flag-off")
  $("li.usa-card.usa-card--flag").removeClass("usa-card--flag")
} else if ($(window).innerWidth() >= 879) {
  $("li.usa-card.usa-card--flag-off").addClass("usa-card--flag")
  $("li.usa-card.usa-card--flag-off").addClass("usa-card--flag-off")
}  });
});
</script>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-cards">Details</button>
    </h4>
    <div id="details-cards" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link Button" aria-label="Link Button" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/card/" class="button primary-button-1" title="Link Button" aria-label="Link Button" target="_blank">USWDS Specs</a>
        <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=16020-12&t=4c8OSFPbByABv0VQ-0" class="button primary-button-1" title="Link Button" aria-label="Link Button" target="_blank">Designs</a>
      </div>

      <h5>Description</h5>
        <p>Cards contain content and actions about a single subject.</p>

        <p>A card is often a subset or summary of a larger idea. It acts as an entry point to more detailed information. This summary can contain a variety of content types, such as text, images and multimedia, or buttons and links.</p>

        <p>An individual card is typically a member of a collection of similar cards, not a single card in isolation. A card is distinguished from others in its collection by its content, and cards are distinguished from the broader page context in form — usually with a border or a shadow.</p>

        <p>Finally, a card is modular, which means you can vary the order of cards in a collection without destroying any individual card’s meaning.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Make cards actionable. Since cards are used as a summary of more detailed information, any individual card should link out to that information.</li>
          <li>Don’t use the card component only for decoration. Use the card component for cards, not for any type of content that’s designed to have a border around it.</li>
          <li>Include non-redundant content. Don’t repeat images or content common to all or most cards in a collection. Repeated information (like using the same image for each card in a collection) makes it more difficult to distinguish cards from one another.</li>
          <li>Make sure images are properly sized. Cards often change size depending on the device. Make sure you use an image that works well on any device at any size.</li>
          <li>Use simple styling. Avoid distracting skeumorphism. Don’t include any card styling that calls too much attention to the metaphor of a paper card, like folds, bent edges, or paper texture.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Use unordered lists and list items. Use a ul for a card group and an li for each card. This formatting allows screen readers to enumerate the items in the card group and allows shortcuts between list items.</li>
          <li>Use the appropriate heading level for your page. Update heading level based on the content of your page to make sure card headings are in the correct, logical outline order.</li>
          <li>Use CSS to order the media element. Logically, the media element should follow the header element. Don’t re-organize the markup to reverse their order.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>
              <a href="/about-us/frequently-asked-questions" target="_blank">/about-us/frequently-asked-questions</a>
          </li>
          <li>
              <a href="/medication-assisted-treatment/training-resources" target="_blank">/medication-assisted-treatment/training-resources</a>
          </li>
          <li>
              <a href="/marijuana/marijuana-pregnancy" target="_blank">/marijuana/marijuana-pregnancy</a>
          </li>
          <li>
              <a href="/mental-health-treatment-works" target="_blank">/mental-health-treatment-works</a>
          </li>
          <li>
              <a href="/school-campus-health/project-aware" target="_blank">/school-campus-health/project-aware</a>
          </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-cards">Specs</button>
    </h4>
    <div id="specs-cards" class="usa-accordion__content">
      <code>
           font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /> <br />

          .usa-card-group <br/>
          ------------------- <br />
          list-style: none !important; <br/>
          margin: 0 !important; <br/><br/>

          .usa-card<br/>
          ------------------- <br />
          margin-bottom: 0.5rem; <br/>
          max-width: none; <br/><br/>

          .usa-card__container <br/>
          ------------------- <br />
          color: $charcoal; /* #4A4A4A */ <br />
          background-color: $white; /* #FFFFFF */ <br />
          border-width: 0px; <br />
          border-color: $mist; /* #EEEEEE */ <br />
          border-style: solid; <br />
          display: -webkit-box; <br />
          display: -ms-flexbox; <br />
          display: flex; <br />
          height: 100%; <br />
          -webkit-box-orient: vertical; <br />
          -webkit-box-direction: normal; <br />
          -ms-flex-direction: column; <br />
          flex-direction: column; <br />
          margin-left: 0.5rem; <br />
          margin-right: 0.5rem; <br />
          position: relative; <br />
          border-radius: 0.5rem; <br /><br />

          .usa-card.yes_border .usa-card__container <br/>
          ------------------- <br />
          border-width: 2px; <br /><br />

          .usa-card__header <br/>
          ------------------- <br />
          padding-bottom: 0.5rem; <br />
          padding-top: 1.5rem; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br /><br />

          .usa-card__header>:only-child, .usa-card__body>:only-child <br/>
          ------------------- <br />
          margin-bottom: 0; <br />
          margin-top: 0; <br />
          padding-bottom: 0; <br />
          padding-top: 0; <br /><br />

          .usa-card--header-first .usa-card__media <br/>
          ------------------- <br />
          -webkit-box-ordinal-group: 1; <br />
          -ms-flex-order: 0; <br />
          order: 0; <br /><br />

          .usa-card.usa-card--header-first .usa-card__media <br/>
          ------------------- <br />
          -webkit-box-ordinal-group: 1; <br />
          -ms-flex-order: 0; <br />
          order: 0; <br /><br />

          .usa-card__img <br/>
          ------------------- <br />
          border-top-left-radius: calc( 0.5rem - 2px); <br />
          border-top-right-radius: calc( 0.5rem - 2px); <br />
          background-color: #f0f0f0; <br />
          position: relative; <br />
          overflow: hidden; <br /><br />

          .usa-card__img img <br/>
          ------------------- <br />
          display: block; <br />
          height: 100%; <br />
          width: 100%; <br />
          -o-object-fit: cover; <br />
          object-fit: cover; <br /><br />

          .usa-card__body <br />
          ------------------- <br />
          -webkit-box-flex: 0; <br />
          -ms-flex: 1 1 0; <br />
          flex: 0; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br />
          padding-bottom: 0.5rem; <br />
          padding-top: 0.5rem; <br />
          -ms-flex-preferred-size: auto; <br />
          flex-basis: auto; <br /><br />

          .usa-card__footer <br/>
          ------------------- <br />
          padding-bottom: 1.5rem; <br />
          padding-top: 0.5rem; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br /><br />

          .usa-card__footer .usa-button:only-of-type <br/>
          ------------------- <br />
          margin-right: 0; <br /><br />

          .usa-card.usa-card--flag .usa-card__header, .usa-card.usa-card--flag .usa-card__body, .usa-card.usa-card--flag .usa-card__footer <br/>
          ------------------- <br />
          padding: 1rem; <br />
          margin-left: 10rem; <br /><br />

          .usa-card.usa-card--flag .usa-card__media <br/>
          ------------------- <br />
          display: -webkit-box; <br />
          display: -ms-flexbox; <br />
          display: flex; <br />
          overflow: hidden; <br />
          position: absolute; <br />
          bottom: 0; <br />
          top: 0; <br />
          left: 0; <br />
          width: 10rem; <br /><br />

          .usa-card--flag .usa-card__img <br/>
          ------------------- <br />
          border-radius: 0; <br />
          border-top-left-radius: calc( 0.5rem - 2px); <br />
          border-bottom-left-radius: calc( 0.5rem - 2px); <br /><br />

          .usa-card.usa-card--flag.usa-card--media-right .usa-card__header, .usa-card.usa-card--flag.usa-card--media-right .usa-card__body, .usa-card.usa-card--flag.usa-card--media-right .usa-card__footer <br/>
          ------------------- <br />
          margin-left: 0; <br />
          margin-right: 10rem; <br /><br />

          .usa-card.usa-card--flag.usa-card--media-right .usa-card__media <br/>
          ------------------- <br />
          left: auto; <br />
          right: 0; <br /><br />

          .usa-card--flag.usa-card--media-right .usa-card__img <br/>
          ------------------- <br />
          border-radius: 0; <br />
          border-top-right-radius: calc( 0.5rem - 2px); <br />
          border-bottom-right-radius: calc( 0.5rem - 2px); <br /><br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3 class="site-preview-heading">Cards - No Border and Border</h3>
<ul class="usa-card-group">
  <li class="tablet:grid-col-4 usa-card">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Card</h2>
      </header>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis
          dolores molestias! Quas quisquam. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-4 usa-card">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Card with media</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis
          dolores molestias! Quas quisquam. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-4 usa-card usa-card--header-first">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Media and header first</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
</ul>

<ul class="usa-card-group">
  <li class="tablet:grid-col-4 usa-card yes_border">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Card</h2>
      </header>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis
          dolores molestias! Quas quisquam. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-4 usa-card yes_border">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Card with media</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae. Excepturi nobis
          dolores molestias! Quas quisquam. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-4 usa-card yes_border usa-card--header-first">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Media and header first</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>
      <div class="usa-card__body">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
</ul>

<h3 class="site-preview-heading">Flags - No Border and Border</h3>

<div class="usa-summary-box styleguide-background" role="region" aria-labelledby="summary-box-key-information">
  <div class="usa-summary-box__body">
    <h3 class="usa-summary-box__heading" id="summary-box-key-information">
      Guidelines
    </h3>
    <div class="usa-summary-box__text">
      <ul class="usa-list">
        <li>
          CONTENT GUIDELINE - Only one Flag per row (grid-col-12).
        </li>
        <li>
           CONTENT GUIDELINE - At 880px breakpoint:<br>
           No more than 5 rows of text without button. <br>
           No more than 3 rows of text with button.<br>
           (div.usa-card__container height 260px or less).
        </li>
        <li>
          DEV GUIDELINE (REMOVE THIS ITEM FROM THIS LIST ONCE THIS IS CODED:<br>
          Up to 880px, remove .usa-card--flag class and display as normal card.<br>
          Above 880px, add .usa-card--flag class and display as flag.<br><br>
          .usa-card--flag ..usa-card__container {<br>
             max-height: 265px;<br>
             overflow: hidden;<br>
           }<br><br>
          .usa-card--flag .usa-card__container .usa-card__footer {<br>
              text-align: left;<br>
           }
        </li>
        <li>
          DESIGN/CONTENT GUIDELINE - Image dimension specs:<br>
          ADD IMAGE GUIDELINE SPECS HERE.
        </li>
      </ul>
    </div>
  </div>
</div>

<ul class="usa-card-group">
  <li class="tablet:grid-col-12 usa-card usa-card--flag">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag Left - No Border</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>

      <div class="usa-card__body">
        <p>Lorem ipsum dolor sit amet. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.</p>
      </div>
      <div class="usa-card__footer">
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-12 usa-card usa-card--flag usa-card--media-right">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag Right - No Border</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>

      <div class="usa-card__body">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.</p>
      </div>
      <div class="usa-card__footer">
          <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
</ul>

<ul class="usa-card-group">
  <li class="tablet:grid-col-12 usa-card  yes_border usa-card--flag">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag Left - Border</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>

      <div class="usa-card__body">
        <p>Lorem ipsum dolor sit amet. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.</p>
      </div>
      <div class="usa-card__footer">
      </div>
    </div>
  </li>
  <li class="tablet:grid-col-12 usa-card  yes_border usa-card--flag usa-card--media-right">
    <div class="usa-card__container">
      <header class="usa-card__header">
        <h2 class="usa-card__heading">Flag Right - Border</h2>
      </header>
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img
            src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg"
            alt="A placeholder image"
          />
        </div>
      </div>

      <div class="usa-card__body">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.</p>
      </div>
      <div class="usa-card__footer">
        <button class="usa-button">Lorem Ipsum Dolor</button>
      </div>
    </div>
  </li>
</ul>

Standards - Checkboxes

Details and Specs

Designs

Description

Standard Drupal forms will use these default checkbox styles.

Forms that do not adhere to Drupal's standard form markup may require that you include this style in that forms SCSS by including the _forms.scss file with something like this:


      @use "../../base/_forms" as * ;

and then putting the following within your input:checkbox selector:


        .my-checkbox-selector {
          @extend .form-type-checkbox;
        }

When to use the checkbox component

To display multiple answers. When a user can select any number of choices from a list

To allow users to toggle answers. When a user needs to acknowledge acceptance of something (like terms of service) or switch between two opposite states, such as unchecked = “no” and checked = “yes.”

Guidance

Usability

Make the label selectable. Users should be able to select either the text label or the checkbox to select or deselect an option.

List options vertically. Horizontal listings can make it difficult to tell which label pertains to which checkbox.

Use positive statements. Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive a promotional email.”

Use logical labels. Make sure that the label makes both states — checked and unchecked — clear to the user. If that’s not possible, consider using a radio button with two individual options instead. Then both states can have their own clearly marked label.

Use adequate touch targets. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.

Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.

Use a logical order. Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

Use a fieldset and legend for a checkbox group. Surround a related set of checkboxes with a fieldset. The legend provides context for the grouping. Don’t use fieldset and legend for a single check.

These custom checkboxes are accessible. The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.

Use semantic tags. Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.

Examples


            font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



           .form-checkbox[type=checkbox] 

           ------------------- 

           -webkit-appearance: none; 

           -moz-appearance: none; 

           appearance: none; 

           display: inline; 

           width: 18px; 

           height: 18px; 

           border: 1px solid #a3a7a9; 

           margin: 4px; 

           border-radius: 4px; 

           cursor: pointer; 

           vertical-align: middle; 


           label 

           ------------------- 

           cursor: pointer; 

           vertical-align: middle; 

           display: block; 

           font-weight: bold; 

           display: inline; 

           margin-bottom: .375em; 

           margin: 0 8px;

Preview

Standard Checkbox Styles

Option 1

Option 2

Option 3

Option 4

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-check">Details
      </button>
    </h4>
    <div id="details-check" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=91-4"
           class="button primary-button-1" title="Link to Figma Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>

      <p>Standard Drupal forms will use these default checkbox styles.&nbsp;</p>

      <p>Forms that do not adhere to Drupal's standard form markup may require that you include this style in that forms
        SCSS by including the _forms.scss file with something like this:</p>

      <code>
      @use "../../base/_forms" as * ;
      </code>

      <p>and then putting the following within your input:checkbox selector:</p>

      <code>
        .my-checkbox-selector {
          @extend .form-type-checkbox;
        }
      </code>
           <br/ >
      <p>When to use the checkbox component</p>
      <p><strong>To display multiple answers. </strong> When a user can select any number of choices from a list</p>
      <p><strong>To allow users to toggle answers.</strong> When a user needs to acknowledge acceptance of something (like terms of service) or switch between two opposite states, such as unchecked = “no” and checked = “yes.” </p>
      <h5>Guidance</h5>
        <h6>Usability</h6>
          <p><strong>Make the label selectable. </strong>Users should be able to select either the text label or the checkbox to select or deselect an option.</p>
          <p><strong>List options vertically.</strong> Horizontal listings can make it difficult to tell which label pertains to which checkbox.</p>
          <p><strong>Use positive statements. </strong>Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive a promotional email.”</p>
          <p><strong>Use logical labels. </strong>Make sure that the label makes both states — checked and unchecked — clear to the user. If that’s not possible, consider using a radio button with two individual options instead. Then both states can have 
            their own clearly marked label.</p>
          <p><strong>Use adequate touch targets.</strong> Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.</p>
          <p><strong>Don’t mix default and tile variants. </strong>Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.</p>
          <p><strong>Use a logical order.</strong> Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.</p>
        <h6>Accessibility</h6>
         <p><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.</p>
         <p><strong>Use a fieldset and legend for a checkbox group.</strong> Surround a related set of checkboxes with a fieldset. The legend provides context for the grouping. Don’t use fieldset and legend for a single check.</p>
         <p><strong>These custom checkboxes are accessible. </strong>The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.</p>
         <p><strong> Use semantic tags.</strong> Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.</p>

      <h5>Examples</h5>
      <ul>
        <li><a href="/grants/grants-dashboard">Grants Dashboard</a></li>
        <li><a href="/resource-search/ebp">Resources Page</a></li>
      </ul>
    </div>
  </div>


 <!-- SPECS -->
<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
  <h4 class="usa-accordion__heading">
    <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
    <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-check">Specs</button>
  </h4>
  <div id="specs-check" class="usa-accordion__content">
    <code>
            font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

           .form-checkbox[type=checkbox] <br />
           ------------------- <br />
           -webkit-appearance: none; <br />
           -moz-appearance: none; <br />
           appearance: none; <br />
           display: inline; <br />
           width: 18px; <br />
           height: 18px; <br />
           border: 1px solid #a3a7a9; <br />
           margin: 4px; <br />
           border-radius: 4px; <br />
           cursor: pointer; <br />
           vertical-align: middle; <br />

           label <br />
           ------------------- <br />
           cursor: pointer; <br />
           vertical-align: middle; <br />
           display: block; <br />
           font-weight: bold; <br />
           display: inline; <br />
           margin-bottom: .375em; <br />
           margin: 0 8px; <br />
          <br />
      </code>
  </div>
</div>
</div>

<br>

<hr>
<!-- MARKUP  -->
<h3>Preview</h3>

<h2>Standard Checkbox Styles</h2>

<div class="form-type-checkbox"><input class="form-checkbox" id="myCheckbox1" type="checkbox"/>
  <label for="myCheckbox1">Option 1</label>
</div>

<div class="form-type-checkbox"><input class="form-checkbox" id="myCheckbox2" type="checkbox"/>
  <label for="myCheckbox2">Option 2</label>
</div>

<div class="form-type-checkbox"><input class="form-checkbox" id="myCheckbox3" type="checkbox"/>
  <label for="myCheckbox3">Option 3</label>
</div>

<div class="form-type-checkbox"><input class="form-checkbox" id="myCheckbox4" type="checkbox"/>
  <label for="myCheckbox4">Option 4</label>
</div>

Standards - Check Box

Details and Specs

Requirements USWDS Specs Designs

Description

Checkboxes allow users to select one or more options from a list.

When to use the checkbox component

To display multiple answers. When a user can select any number of choices from a list

Guidance

Usability

Make the label selectable. Users should be able to select either the text label or the checkbox to select or deselect an option.

List options vertically. Horizontal listings can make it difficult to tell which label pertains to which checkbox.

Use adequate touch targets. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.

Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

These custom checkboxes are accessible. The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.

Use semantic tags. Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.


            font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



     .usa-legend

  ------------------- 

    font-size: 1.125rem; 

 


.usa-checkbox__label 

  ------------------- 


    cursor: pointer;

    display: inherit;

    font-weight: normal;

    margin-top: 0.75rem; /*  0.75rem = 12px  */ 

    padding-left: 2rem; /*  2rem = 32px  */

    position: relative;

 

.usa-checkbox__input:checked+[class*=__label]::before, .usa-checkbox__input:checked:disabled+[class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before

------------------- 

    background-position: center center;

    background-size: 0.75rem auto; /*  0.75rem = 12px  */

    background-image: url(../img/correct8.svg),linear-gradient(transparent, transparent);

    background-repeat: no-repeat;




.usa-checkbox__input:checked+[class*=__label]::before  

------------------- 

    background-color: #005ea2;

    box-shadow: 0 0 0 2px #005ea2;



.usa-checkbox__label::before

------------------- 

    height: 1.25rem;/*  1.125rem = 18px  */

    width: 1.25rem; /*  1.125rem = 18px  */

    border-radius: 2px;




.usa-checkbox__label::before 

------------------- 

    content: " ";

    display: block;

    left: 0;

    margin-left: 2px;

    margin-top: 0.064rem;

    position: absolute;



.usa-checkbox__label 

------------------- 

    cursor: pointer;

    display: inherit;

    font-weight: normal;

    margin-top: 0.75rem;/*  0.75rem = 12px  */

    padding-left: 2rem; /*  2rem = 32px  */

    position: relative;



.usa-checkbox__label 

------------------- 

    color: #1b1b1b;



.usa-checkbox__input:disabled+[class*=__label], .usa-checkbox__input[aria-disabled=true]+[class*=__label] 

------------------- 


    cursor: not-allowed;

color: rgba(27,27,27,.3);




.usa-checkbox__input--tile:checked+[class*=__label] 

------------------- 

    background-color: rgba(0,94,162,.1);

    border-color: #005ea2;

}
.usa-checkbox__input--tile+[class*=__label] 

------------------- 

    border-radius: 0.25rem; /*  0.25rem = 4px  */

    margin-top: 0.5rem; /*  0.5rem = 8px  */

    padding: 0.75rem 1rem 0.75rem 2.5rem; /*  0.75rem = 12px  , 2.5rem = 40px */ 




.usa-checkbox__input--tile+[class*=__label] 

------------------- 

    border: 2px solid rgba(27,27,27,.3);

    color: #1b1b1b;




.usa-checkbox__label-description 

------------------- 

    display: block;

    font-size: .93rem; /*  0.93rem = 14.88px  */ 

    margin-top: 0.5rem; /*  0.5rem = 8px  */

Preview

Default

Select any historical figure

Sojourner Truth

Frederick Douglass

Booker T. Washington

George Washington Carver

Tile

<!-- CUSTOM STYLES  -->
<style>

</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--checkbox">Details</button>
    </h4>
    <div id="templates-detail--checkbox" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7969" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/checkbox/" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank" class="button primary-button-1">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>Checkboxes allow users to select one or more options from a list.</p>

          <p>When to use the checkbox component</p>

             <p><strong>To display multiple answers. </strong> When a user can select any number of choices from a list</p>
           <p><strong>To allow users to toggle answers.</strong> When a user needs to acknowledge acceptance of something (like terms of service) or switch between two opposite states, such as unchecked = “no” and checked = “yes.” </p>


      <h5>Guidance</h5>
        <h6>Usability</h6>
      <p><strong>Make the label selectable. </strong>Users should be able to select either the text label or the checkbox to select or deselect an option.</p>
       <p><strong>List options vertically.</strong> Horizontal listings can make it difficult to tell which label pertains to which checkbox.</p>
      <p><strong>Use positive statements. </strong>Negative language in labels can be counterintuitive. For example, use “I want to receive a promotional email” instead of “I don’t want to receive a promotional email.”</p>
<p><strong>Use logical labels. </strong>Make sure that the label makes both states — checked and unchecked — clear to the user. If that’s not possible, consider using a radio button with two individual options instead. Then both states can have their own clearly marked label.</p>
<p><strong>Use adequate touch targets.</strong> Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.</p>
<p><strong>Don’t mix default and tile variants. </strong>Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.</p>
<p><strong>Use a logical order.</strong> Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.</p>

        <h6>Accessibility</h6>
   <p><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.</p>
<p><strong>Use a fieldset and legend for a checkbox group.</strong> Surround a related set of checkboxes with a fieldset. The legend provides context for the grouping. Don’t use fieldset and legend for a single check.</p>
<p><strong>These custom checkboxes are accessible. </strong>The custom checkboxes here are accessible to screen readers because the default checkboxes are moved off-screen with position: absolute; left: -999em.</p>
<p><strong> Use semantic tags.</strong> Each input should have a semantic tag for the id attribute, and its corresponding label should have the same value in its for attribute.</p>

    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--checkbox">Specs</button>
    </h4>
    <div id="templates-specs--checkbox" class="usa-accordion__content">
      <code>
            font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

     .usa-legend<br />
  ------------------- <br />
    font-size: 1.125rem; <br />
 <br />

.usa-checkbox__label <br />
  ------------------- <br />

    cursor: pointer;<br />
    display: inherit;<br />
    font-weight: normal;<br />
    margin-top: 0.75rem; /*  0.75rem = 12px  */ <br />
    padding-left: 2rem; /*  2rem = 32px  */<br />
    position: relative;<br />
 <br />
.usa-checkbox__input:checked+[class*=__label]::before, .usa-checkbox__input:checked:disabled+[class*=__label]::before, .usa-checkbox__input:checked[aria-disabled=true]+[class*=__label]::before<br />
------------------- <br />
    background-position: center center;<br />
    background-size: 0.75rem auto; /*  0.75rem = 12px  */<br />
    background-image: url(../img/correct8.svg),linear-gradient(transparent, transparent);<br />
    background-repeat: no-repeat;<br />
<br />

.usa-checkbox__input:checked+[class*=__label]::before  <br />
------------------- <br />
    background-color: #005ea2;<br />
    box-shadow: 0 0 0 2px #005ea2;<br />
<br />
.usa-checkbox__label::before<br />
------------------- <br />
    height: 1.25rem;/*  1.125rem = 18px  */<br />
    width: 1.25rem; /*  1.125rem = 18px  */<br />
    border-radius: 2px;<br />
<br />

.usa-checkbox__label::before <br />
------------------- <br />
    content: " ";<br />
    display: block;<br />
    left: 0;<br />
    margin-left: 2px;<br />
    margin-top: 0.064rem;<br />
    position: absolute;<br />
<br />
.usa-checkbox__label <br />
------------------- <br />
    cursor: pointer;<br />
    display: inherit;<br />
    font-weight: normal;<br />
    margin-top: 0.75rem;/*  0.75rem = 12px  */<br />
    padding-left: 2rem; /*  2rem = 32px  */<br />
    position: relative;<br />
<br />
.usa-checkbox__label <br />
------------------- <br />
    color: #1b1b1b;<br />
<br />
.usa-checkbox__input:disabled+[class*=__label], .usa-checkbox__input[aria-disabled=true]+[class*=__label] <br />
------------------- <br />

    cursor: not-allowed;<br />
color: rgba(27,27,27,.3);<br />
<br />

.usa-checkbox__input--tile:checked+[class*=__label] <br />
------------------- <br />
    background-color: rgba(0,94,162,.1);<br />
    border-color: #005ea2;<br />
}
.usa-checkbox__input--tile+[class*=__label] <br />
------------------- <br />
    border-radius: 0.25rem; /*  0.25rem = 4px  */<br />
    margin-top: 0.5rem; /*  0.5rem = 8px  */<br />
    padding: 0.75rem 1rem 0.75rem 2.5rem; /*  0.75rem = 12px  , 2.5rem = 40px */ <br />
<br />

.usa-checkbox__input--tile+[class*=__label] <br />
------------------- <br />
    border: 2px solid rgba(27,27,27,.3);<br />
    color: #1b1b1b;<br />
<br />

.usa-checkbox__label-description <br />
------------------- <br />
    display: block;<br />
    font-size: .93rem; /*  0.93rem = 14.88px  */ <br />
    margin-top: 0.5rem; /*  0.5rem = 8px  */<br />
<br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<h3 class="site-preview-heading">Default</h3>
<fieldset class="usa-fieldset">
  <legend class="usa-legend">Select any historical figure</legend>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-truth"
      type="checkbox"
      name="historical-figures"
      value="sojourner-truth"
      checked="checked"
    />
    <label class="usa-checkbox__label" for="check-historical-truth"
      >Sojourner Truth</label
    >
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-douglass"
      type="checkbox"
      name="historical-figures"
      value="frederick-douglass"
    />
    <label class="usa-checkbox__label" for="check-historical-douglass"
      >Frederick Douglass</label
    >
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-washington"
      type="checkbox"
      name="historical-figures"
      value="booker-t-washington"
    />
    <label class="usa-checkbox__label" for="check-historical-washington"
      >Booker T. Washington</label
    >
  </div>
  <div class="usa-checkbox">
    <input
      class="usa-checkbox__input"
      id="check-historical-carver"
      type="checkbox"
      name="historical-figures"
      value="george-washington-carver"
      disabled="disabled"
    />
    <label class="usa-checkbox__label" for="check-historical-carver"
      >George Washington Carver</label
    >
  </div>
</fieldset>

<h3 class="site-preview-heading">Tile</h3>
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Select any historical figure</legend>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-truth-2"
        type="checkbox"
        name="historical-figures-2"
        value="sojourner-truth"
        checked="checked"
      />
      <label class="usa-checkbox__label" for="check-historical-truth-2"
        >Sojourner Truth
        <span class="usa-checkbox__label-description"
          >This is optional text that can be used to describe the label in more
          detail.</span
        ></label
      >
    </div>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-douglass-2"
        type="checkbox"
        name="historical-figures-2"
        value="frederick-douglass"
      />
      <label class="usa-checkbox__label" for="check-historical-douglass-2"
        >Frederick Douglass</label
      >
    </div>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-washington-2"
        type="checkbox"
        name="historical-figures-2"
        value="booker-t-washington"
      />
      <label class="usa-checkbox__label" for="check-historical-washington-2"
        >Booker T. Washington</label
      >
    </div>
    <div class="usa-checkbox">
      <input
        class="usa-checkbox__input usa-checkbox__input--tile"
        id="check-historical-carver-2"
        type="checkbox"
        name="historical-figures-2"
        value="george-washington-carver"
        disabled="disabled"
      />
      <label class="usa-checkbox__label" for="check-historical-carver-2"
        >George Washington Carver</label
      >
    </div>
  </fieldset>
</form>
<!-- Markup Ends  -->

Standards - Clickable Card

Details and Specs

Requirements Designs

Description

This card can be used to summarize linked sites/resources and should only be used in pairs (ex: 2, 4, 6).

Guidance

Usability

Interactivity: Cards are interactive containers that respond to clicks, taking the user to a linked page, revealing more information, or initiating an action like a download.
Content: They feature a mix of elements such as imagery or icons, titles, descriptive text, and a call-to-action (CTA) button, laid out in a digestible format.
Design: A card’s design is clean, using visuals and text hierarchy to convey its message effectively and prompting user interaction through a CTA.
Responsive Behavior: The card’s layout adapts seamlessly across devices, ensuring legibility and functionality are maintained from desktop to mobile.
Accessibility: Cards conform to accessibility standards, ensuring content is navigable and consumable for all users, including those using assistive technologies.

Accessibility

List Structure: Use an unordered list (ul) to group clickable cards and list items (li) for individual cards. This structure helps screen readers identify and navigate through the set of cards, providing users with a coherent understanding of grouped content.
Semantic Headings: Assign appropriate heading levels (h1, h2, h3, etc.) within each clickable card. The heading level should reflect the card’s hierarchy on the page, ensuring that users with screen readers can comprehend the content's structure.
Content Flow in CSS: Arrange media elements like images or icons to logically follow the card's header in the code. Avoid using CSS to visually position the media before the header if it doesn't make sense in the content flow. Screen readers read the content in the order it appears in the HTML, so the visual order should match the HTML structure to maintain clarity for screen reader users.

Examples


          font-family: "Source Sans Pro",sans-serif; 

          font-color: $charcoal; /* #4A4A4A */ 

          DESKTOP: font-size: 1.06rem; /* 16.96px /  

          MOBILE: font-size: 1rem; /* 16px /  

          line-height: 1.5; /* 25.44px */ 

          font-weight: 400; 



          .usa-card-group 

          ------------------- 

          list-style: none !important; 

          margin: 0 !important; 



          .usa-card

          ------------------- 

          margin-bottom: 0.5rem; 

          max-width: none; 



          .usa-card__container 

          ------------------- 

          color: $charcoal; /* #4A4A4A */ 

          background-color: $white; /* #FFFFFF */ 

          border-width: 0px; 

          border-color: $mist; /* #EEEEEE */ 

          border-style: solid; 

          display: -webkit-box; 

          display: -ms-flexbox; 

          display: flex; 

          height: 100%; 

          -webkit-box-orient: vertical; 

          -webkit-box-direction: normal; 

          -ms-flex-direction: column; 

          flex-direction: column; 

          margin-left: 0.5rem; 

          margin-right: 0.5rem; 

          position: relative; 

          border-radius: 0.5rem; 



          .usa-card.yes_border .usa-card__container 

          ------------------- 

          border-width: 2px; 



          .usa-card__header 

          ------------------- 

          padding-bottom: 0.5rem; 

          padding-top: 1.5rem; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem; 



          .usa-card__header>:only-child, .usa-card__body>:only-child 

          ------------------- 

          margin-bottom: 0; 

          margin-top: 0; 

          padding-bottom: 0; 

          padding-top: 0; 



          .usa-card__body 

          ------------------- 

          -webkit-box-flex: 0; 

          -ms-flex: 1 1 0; 

          flex: 0; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem; 

          padding-bottom: 0.5rem; 

          padding-top: 0.5rem; 

          -ms-flex-preferred-size: auto; 

          flex-basis: auto; 



          .usa-card__footer 

          ------------------- 

          padding-bottom: 1.5rem; 

          padding-top: 0.5rem; 

          padding-left: 1.5rem; 

          padding-right: 1.5rem;

Guidelines

CONTENT GUIDELINE - Character count max (body): 219
Character count max without icon (title): 41
Character count max with icon (title): 17

Clickable Card

Sed id interdum elit. Quisque sagittis erat eu dolor ornare, blandit sagittis augue suscipit. Fusce tempor a massa sit amet suscipit.

<!-- CUSTOM STYLES  -->
<style>


</style>

<!-- CUSTOM SCRIPTS  -->
<script>
</script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="detailsCards">Details</button>
    </h4>
    <div id="detailsCards" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2900492289/Guardrails+for+Component+Layouts+-+07+06+2023" title="Link Button" aria-label="Link Button" target="_blank">Requirements</a>
        <a href="https://www.figma.com/file/AI3HICbqf1AHIiWLxLW9kW?node-id=0%3A1&mode=dev" class="button primary-button-1" title="Link Button" aria-label="Link Button" target="_blank">Designs</a>
      </div>
      <h5>Description</h5>
        <p>This card can be used to summarize linked sites/resources and should only be used in pairs (ex: 2, 4, 6).<p>
      <h5>Guidance</h5>
        <h6>Usability</h6>
      <ul>
        <li>Interactivity: Cards are interactive containers that respond to clicks, taking the user to a linked page, revealing more information, or initiating an action like a download.</li>
        <li>Content: They feature a mix of elements such as imagery or icons, titles, descriptive text, and a call-to-action (CTA) button, laid out in a digestible format.</li>
        <li>Design: A card’s design is clean, using visuals and text hierarchy to convey its message effectively and prompting user interaction through a CTA.</li>
        <li>Responsive Behavior: The card’s layout adapts seamlessly across devices, ensuring legibility and functionality are maintained from desktop to mobile.</li>
        <li>Accessibility: Cards conform to accessibility standards, ensuring content is navigable and consumable for all users, including those using assistive technologies.</li>
      </ul>
      <h6>Accessibility</h6>
      <ul>
       <li>List Structure: Use an unordered list (ul) to group clickable cards and list items (li) for individual cards. This structure helps screen readers identify and navigate through the set of cards, providing users with a coherent understanding of grouped
             content.
       </li>
       <li>Semantic Headings: Assign appropriate heading levels (h1, h2, h3, etc.) within each clickable card. The heading level should reflect the card’s hierarchy on the page, ensuring that users with screen readers can comprehend the content's structure.</li>
       <li>Content Flow in CSS: Arrange media elements like images or icons to logically follow the card's header in the code. Avoid using CSS to visually position the media before the header if it doesn't make sense in the content flow. Screen readers read the
              content in the order it appears in the HTML, so the visual order should match the HTML structure to maintain clarity for screen reader users.</li>
      </ul>

      <h5>Examples</h5>
        <ul>
          <li>N/A
          </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specsCards">Specs</button>
    </h4>
    <div id="specsCards" class="usa-accordion__content">
      <code>
          font-family: "Source Sans Pro",sans-serif; <br>
          font-color: $charcoal; /* #4A4A4A */ <br>
          DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
          MOBILE: font-size: 1rem; /* 16px /  <br>
          line-height: 1.5; /* 25.44px */ <br>
          font-weight: 400; <br><br>

          .usa-card-group <br/>
          ------------------- <br />
          list-style: none !important; <br/>
          margin: 0 !important; <br/><br/>

          .usa-card<br/>
          ------------------- <br />
          margin-bottom: 0.5rem; <br/>
          max-width: none; <br/><br/>

          .usa-card__container <br/>
          ------------------- <br />
          color: $charcoal; /* #4A4A4A */ <br />
          background-color: $white; /* #FFFFFF */ <br />
          border-width: 0px; <br />
          border-color: $mist; /* #EEEEEE */ <br />
          border-style: solid; <br />
          display: -webkit-box; <br />
          display: -ms-flexbox; <br />
          display: flex; <br />
          height: 100%; <br />
          -webkit-box-orient: vertical; <br />
          -webkit-box-direction: normal; <br />
          -ms-flex-direction: column; <br />
          flex-direction: column; <br />
          margin-left: 0.5rem; <br />
          margin-right: 0.5rem; <br />
          position: relative; <br />
          border-radius: 0.5rem; <br /><br />

          .usa-card.yes_border .usa-card__container <br/>
          ------------------- <br />
          border-width: 2px; <br /><br />

          .usa-card__header <br/>
          ------------------- <br />
          padding-bottom: 0.5rem; <br />
          padding-top: 1.5rem; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br /><br />

          .usa-card__header>:only-child, .usa-card__body>:only-child <br/>
          ------------------- <br />
          margin-bottom: 0; <br />
          margin-top: 0; <br />
          padding-bottom: 0; <br />
          padding-top: 0; <br /><br />

          .usa-card__body <br />
          ------------------- <br />
          -webkit-box-flex: 0; <br />
          -ms-flex: 1 1 0; <br />
          flex: 0; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br />
          padding-bottom: 0.5rem; <br />
          padding-top: 0.5rem; <br />
          -ms-flex-preferred-size: auto; <br />
          flex-basis: auto; <br /><br />

          .usa-card__footer <br/>
          ------------------- <br />
          padding-bottom: 1.5rem; <br />
          padding-top: 0.5rem; <br />
          padding-left: 1.5rem; <br />
          padding-right: 1.5rem; <br /><br />
      </code>
    </div>
  </div>
</div>
<br>
<div class="usa-summary-box styleguide-background" role="region" aria-labelledby="summary-box-key-information">
  <div class="usa-summary-box__body">
    <h3 class="usa-summary-box__heading" id="summary-box-key-information">
      Guidelines
    </h3>
    <div class="usa-summary-box__text">
      <ul class="usa-list">
        <li>
           CONTENT GUIDELINE - Character count max (body): 219 <br>
           Character count max without icon (title): 41<br>
           Character count max with icon (title): 17 <br>
        </li>
      </ul>
    </div>
  </div>
</div>
<hr>
<br>
<!-- MARKUP  -->
<h3 class="site-preview-heading">Clickable Card</h3>
<div class="grid-row grid-gap">
  <div class="tablet:grid-col-6 mobile-lg:grid-col-12" style="padding-bottom: 50px;">
    <a href="/simple-styleguide#Standards-ClickableCard" class="usa-card clickable-card-links" tabindex="0" aria-label="More about Donc consectetur quiche interduo elit er">
      <div class="usa-card__container clickable-card">
        <header class="usa-card__header">
          <h2 class="usa-card__heading">Donc consectetur quiche interduo elit er</h2>
        </header>
        <div class="usa-card__body">
          <p>Sed id interdum elit. Quisque sagittis erat eu dolor ornare, blandit sagittis augue suscipit. Fusce tempor a massa sit amet suscipit.</p>
        </div>
        <div class="usa-card__footer" style="text-align: right;">
          <i class="fas fa-arrow-right" aria-hidden="true" style="color: #4a4a4a; width: 21px;"></i>
        </div>
      </div>
    </a>
  </div>

  <div class="tablet:grid-col-6 mobile-lg:grid-col-12" style="padding-bottom: 50px;">
    <a href="/simple-styleguide#Standards-ClickableCard" class="usa-card clickable-card-links" tabindex="0" aria-label="More about Donc consectetur quiche interduo elit er">
      <div class="usa-card__container clickable-card">
        <header class="usa-card__header">
          <h2 class="usa-card__heading"><i class="fa-regular fa-file" style="color: #1A6986; padding-right: 10px;"></i>Donc consectetur quiche interduo</h2>
        </header>
        <div class="usa-card__body">
          <p>Sed id interdum elit. Quisque sagittis erat eu dolor ornare, blandit sagittis augue suscipit. Fusce tempor a massa sit amet suscipit.</p>
        </div>
        <div class="usa-card__footer" style="text-align: right;">
          <i class="fas fa-arrow-right" aria-hidden="true" style="color: #4a4a4a; width: 21px;"></i>
        </div>
      </div>
    </a>
  </div>
</div>
</li>
</ul>

Standards - Collections

Details and Specs

USWDS Specs Designs

Description

A collection displays a compact list of multiple related items like articles or events. The list links each item to its original source.

Examples

https://www.samhsa.gov/newsroom/observances/international-overdose-awareness-week


                  font-family: "Source Sans Pro",sans-serif; 

                  font-color: $charcoal; /* #4A4A4A */ 

                  DESKTOP: font-size: 1.06rem; /* 16.96px /  

                  MOBILE: font-size: 1rem; /* 16px /  

                 line-height: 1.5; /* 25.44px */ 

                  font-weight: 400; 
 


                 .samhsa-collection ul.usa-collection 

                ----------------------------------- 

                margin-left: 0 !important; 

                list-style: none !important; 



                .samhsa-collection ul.usa-collection li.usa-collection__item 

                -------------------------------------------------------- 

                display: grid !important; 

                max-width: 100% !important; 

                border-top: 2px solid $mist; /* #EEEEEE */ 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__img 

                -------------------------------------------------------- 

                grid-column: 1 / 3; 

                grid-row: 1; 

                width: 7.5rem; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date 

                -------------------------------------------------------- 

                width: 5rem; 

                grid-column: 1 / 3; 

                grid-row: 1; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading 

                -------------------------------------------------------- 

                grid-column: 1 / 5; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading a 

                -------------------------------------------------------- 

                overflow-wrap: anywhere; 

                text-decoration: none; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading a:hover 

                -------------------------------------------------------- 

                color: $royalblue; /* #005EA2 */ 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__body 

                -------------------------------------------------------- 

                grid-column: 1 / 4; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__body .usa-collection__description 

                -------------------------------------------------------- 

                font-size: 1.125rem; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date-month 

                -------------------------------------------------------- 

                background-color: $teal; /* #1A6986 */ 

                width: 5rem; 



                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date-date 

                -------------------------------------------------------- 

                width: 5rem; 

                border-bottom-left-radius: 2px; 

                border-bottom-right-radius: 2px; 

                border: 1px solid $teal; /* #1A6986 */ 

                color: $teal; /* #1A6986 */ 

                padding: 0.5rem; 

                font-size: 1.13rem; 

                display: block; 

                font-weight: 700; 

                text-align: center;

Default

Gears of Government President’s Award winners Gears of Government President’s Aw...

Today, the Administration announces the winners of the Gears of Government President’s Award. This program recognizes the contributions of individuals and teams across the federal workforce who make a profound difference in the lives of the American people.

By Sondra Ainsworth
December 8, 2023

Women-owned small business dashboard

In honor of National Women’s Small Business Month, we’ve partnered with SBA’s Office of Government Contracting and Business Development and Office of Program Performance, Analysis, and Evaluation to highlight the Women-Owned Small Businesses (WOSBs) data dashboard!

By Constance Lu
December 8, 2023

September 2020 updates show progress on cross-agency and agency priority goals

Today, we published progress updates for both Cross-Agency Priority (CAP) Goals and Agency Priority Goals (APGs) for the third quarter of FY2020. These updates highlight recent milestones and accomplishments as well as related initiatives that support progress towards a more modern and effective government.

By Eric L. Miller
December 8, 2023

Media thumbnail

Gears of Government President’s Award winners

By Sondra Ainsworth
December 8, 2023

Woman Owned Small Business Federal Contracts

Women-owned small business dashboard Women-owned small business dashboard Women-...

By Constance Lu
December 8, 2023

September 2020 updates show progress on cross-agency and agency priority goals

By Eric L. Miller
December 8, 2023

Calendar display

DEC 8 2023

Gears of Government President’s Award winners Gears of Government President’s Aw...

DEC 8 2023

Women-owned small business dashboard

DEC 8 2023

September 2020 updates show progress on cross-agency and agency priority goals

Headings only

The eight principles of mobile-friendliness

By Digital.gov

The USWDS maturity model

By U.S. Web Design System

The key role of product owners in federated data projects

By 18F

Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs) L...

By Performance.gov

Default

Gears of Government President’s Award winners Gears of Government President’s Aw...

By Sondra Ainsworth
December 8, 2023

Women-owned small business dashboard

By Constance Lu
December 8, 2023

September 2020 updates show progress on cross-agency and agency priority goals

By Eric L. Miller
December 8, 2023

Media thumbnail

Gears of Government President’s Award winners

By Sondra Ainsworth
December 8, 2023

Women-owned small business dashboard Women-owned small business dashboard Women-...

By Constance Lu
December 8, 2023

September 2020 updates show progress on cross-agency and agency priority goals

By Eric L. Miller
December 8, 2023

Calendar display

DEC 8 2023

Gears of Government President’s Award winners Gears of Government President’s Aw...

DEC 8 2023

Women-owned small business dashboard

DEC 8 2023

September 2020 updates show progress on cross-agency and agency priority goals

Mixed Media

DEC 8 2023

Gears of Government President’s Award winners Gears of Government President’s Aw...

Gears of Government President’s Award winners

By Sondra Ainsworth
December 8, 2023

DEC 8 2023

September 2020 updates show progress on cross-agency and agency priority goals

Women-owned small business dashboard Women-owned small business dashboard Women-...

By Constance Lu
December 8, 2023

Headings only

The eight principles of mobile-friendliness

By Digital.gov

The USWDS maturity model

By U.S. Web Design System

The key role of product owners in federated data projects

By 18F

Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs) L...

By Performance.gov

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
    <div class="grid-row margin-bottom-2">
        <div class="grid-col-6 usa-accordion-group-header">
            <h3>
                <p>Details and Specs</p>
            </h3>
        </div>
    </div>

    <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button" aria-expanded="false" aria-controls="templates-details--collections">
                Details
            </button>
        </h4>
        <div id="templates-details--collections" class="usa-accordion__content">
            <p style="text-align: center;">
                <a href="https://designsystem.digital.gov/components/collection/" class="button primary-button-1"
                    title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
                <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=1589-1180&t=OfZFGvaMjYwMvNIX-0"
                    class="button primary-button-1" title="Link to figma" aria-label="Link XD Designs"
                    target="_blank">Designs</a>
            </p>
            <h5>Description</h5>
            A collection displays a compact list of multiple related items like articles or events.
            The list links each item to its original source.
            </p>

            <h5>Examples</h5>
            <ul>
                <li>
                    <a
                        href="https://www.samhsa.gov/newsroom/observances/international-overdose-awareness-week">https://www.samhsa.gov/newsroom/observances/international-overdose-awareness-week</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button" aria-expanded="false" aria-controls="templates-specs--collections">
                Specs
            </button>
        </h4>
        <div id="templates-specs--collections" class="usa-accordion__content">
            <code>
                  font-family: "Source Sans Pro",sans-serif; <br />
                  font-color: $charcoal; /* #4A4A4A */ <br />
                  DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
                  MOBILE: font-size: 1rem; /* 16px /  <br />
                 line-height: 1.5; /* 25.44px */ <br />
                  font-weight: 400; <br /> <br />

                 .samhsa-collection ul.usa-collection <br />
                ----------------------------------- <br />
                margin-left: 0 !important; <br />
                list-style: none !important; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item <br />
                -------------------------------------------------------- <br />
                display: grid !important; <br />
                max-width: 100% !important; <br />
                border-top: 2px solid $mist; /* #EEEEEE */ <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__img <br />
                -------------------------------------------------------- <br />
                grid-column: 1 / 3; <br />
                grid-row: 1; <br />
                width: 7.5rem; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date <br />
                -------------------------------------------------------- <br />
                width: 5rem; <br />
                grid-column: 1 / 3; <br />
                grid-row: 1; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading <br />
                -------------------------------------------------------- <br />
                grid-column: 1 / 5; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading a <br />
                -------------------------------------------------------- <br />
                overflow-wrap: anywhere; <br />
                text-decoration: none; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__heading a:hover <br />
                -------------------------------------------------------- <br />
                color: $royalblue; /* #005EA2 */ <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__body <br />
                -------------------------------------------------------- <br />
                grid-column: 1 / 4; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__body .usa-collection__description <br />
                -------------------------------------------------------- <br />
                font-size: 1.125rem; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date-month <br />
                -------------------------------------------------------- <br />
                background-color: $teal; /* #1A6986 */ <br />
                width: 5rem; <br /><br />

                .samhsa-collection ul.usa-collection li.usa-collection__item .usa-collection__calendar-date-date <br />
                -------------------------------------------------------- <br />
                width: 5rem; <br />
                border-bottom-left-radius: 2px; <br />
                border-bottom-right-radius: 2px; <br />
                border: 1px solid $teal; /* #1A6986 */ <br />
                color: $teal; /* #1A6986 */ <br />
                padding: 0.5rem; <br />
                font-size: 1.13rem; <br />
                display: block; <br />
                font-weight: 700; <br />
                text-align: center; <br /><br />

            </code>
        </div>
    </div>
</div>
<br />

<div class="grid-container">
    <div class="grid-row grid-gap">
        <div class="tablet:grid-col-6">
            <h3 class="site-preview-heading margin-top-0">Default</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link"
                                            title="Gears of Government President’s Award winners Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners Gears of Government President’s
                                            Aw...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Sondra Ainsworth
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link" title="Women-owned small business dashboard">
                                            Women-owned small business dashboard
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Constance Lu
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Eric L. Miller
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="tablet:grid-col-6">
            <h3 class="site-preview-heading tablet:margin-top-0">Media thumbnail</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://trumpadministration.archives.performance.gov/img/GoG/GoG-logo.png"
                                        alt="Gears of Government Awards - President's Award">

                                </div>

                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link" title="Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Sondra Ainsworth
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://www.performance.gov/img/blog/wosb1.jpg"
                                        alt="Woman Owned Small Business Federal Contracts">

                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link"
                                            title="Women-owned small business dashboard Women-owned small business dashboard Women-owned small business dashboard">
                                            Women-owned small business dashboard Women-owned small business dashboard
                                            Women-...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Constance Lu
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img class="usa-collection__img"
                                        src="https://www.performance.gov/img/blog/sept-2020.png"
                                        alt="September 2020 Updates">

                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Eric L. Miller
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
            <br />
        </div>
        <div class="tablet:grid-col-6">
            <h3 class="site-preview-heading">Calendar display</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link"
                                            title="Gears of Government President’s Award winners Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners Gears of Government President’s
                                            Aw...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link" title="Women-owned small business dashboard">
                                            Women-owned small business dashboard
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="tablet:grid-col-6">
            <h3 class="site-preview-heading">Headings only</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://digital.gov/guides/mobile-principles/?dg" class="usa-link"
                                            title="The eight principles of mobile-friendliness">
                                            The eight principles of mobile-friendliness
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Digital.gov
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://designsystem.digital.gov/maturity-model/" class="usa-link"
                                            title="The USWDS maturity model">
                                            The USWDS maturity model
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By U.S. Web Design System
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://18f.gsa.gov/2020/11/24/the-key-role-of-product-owners-in-federated-data-projects/"
                                            class="usa-link"
                                            title="The key role of product owners in federated data projects">
                                            The key role of product owners in federated data projects
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By 18F
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs) Lorem Ipsum Lorem Ipsum Lorem Ipsum">
                                            Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs)
                                            L...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Performance.gov
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="grid-col-12">
            <h3 class="site-preview-heading margin-top-0">Default</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link"
                                            title="Gears of Government President’s Award winners Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners Gears of Government President’s
                                            Aw...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Sondra Ainsworth
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link" title="Women-owned small business dashboard">
                                            Women-owned small business dashboard
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Constance Lu
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Eric L. Miller
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="grid-col-12">
            <h3 class="site-preview-heading tablet:margin-top-0">Media thumbnail</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://trumpadministration.archives.performance.gov/img/GoG/GoG-logo.png"
                                        alt="Gears of Government Awards - President's Award">

                                </div>

                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link" title="Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Sondra Ainsworth
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://www.performance.gov/img/blog/wosb1.jpg"
                                        alt="Woman Owned Small Business Federal Contracts">

                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link"
                                            title="Women-owned small business dashboard Women-owned small business dashboard Women-owned small business dashboard">
                                            Women-owned small business dashboard Women-owned small business dashboard
                                            Women-...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Constance Lu
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img class="usa-collection__img"
                                        src="https://www.performance.gov/img/blog/sept-2020.png"
                                        alt="September 2020 Updates">

                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Eric L. Miller
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
            <br />
        </div>
        <div class="grid-col-12">
            <h3 class="site-preview-heading">Calendar display</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link"
                                            title="Gears of Government President’s Award winners Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners Gears of Government President’s
                                            Aw...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link" title="Women-owned small business dashboard">
                                            Women-owned small business dashboard
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="grid-col-12">
            <h3 class="site-preview-heading">Mixed Media</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link"
                                            title="Gears of Government President’s Award winners Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners Gears of Government President’s
                                            Aw...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://trumpadministration.archives.performance.gov/img/GoG/GoG-logo.png"
                                        alt="Gears of Government Awards - President's Award">

                                </div>

                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/presidents-winners-press-release/"
                                            class="usa-link" title="Gears of Government President’s Award winners">
                                            Gears of Government President’s Award winners
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, the Administration announces the winners of the Gears of Government
                                                President’s Award. This program recognizes the contributions of individuals
                                                and teams across the federal workforce who make a profound difference in the
                                                lives of the American people.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Sondra Ainsworth
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__calendar-date">
                                    <span class="usa-collection__calendar-date-month">DEC 8</span>
                                    <span class="usa-collection__calendar-date-date">2023</span>
                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="September 2020 updates show progress on cross-agency and agency priority goals">
                                            September 2020 updates show progress on cross-agency and agency priority goals
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>Today, we published progress updates for both Cross-Agency Priority (CAP)
                                                Goals and Agency Priority Goals (APGs) for the third quarter of FY2020.
                                                These updates highlight recent milestones and accomplishments as well as
                                                related initiatives that support progress towards a more modern and
                                                effective government.</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">

                                <div
                                    class="field field--name-field-cpnt-collection-image field--type-image field--label-hidden usa-collection__img field__item">
                                    <img src="https://www.performance.gov/img/blog/wosb1.jpg"
                                        alt="Woman Owned Small Business Federal Contracts">

                                </div>
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/sba-wosb-dashboard/"
                                            class="usa-link"
                                            title="Women-owned small business dashboard Women-owned small business dashboard Women-owned small business dashboard">
                                            Women-owned small business dashboard Women-owned small business dashboard
                                            Women-...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <div class="usa-collection__description">
                                            <p>In honor of National Women’s Small Business Month, we’ve partnered with SBA’s
                                                Office of Government Contracting and Business Development and Office of
                                                Program Performance, Analysis, and Evaluation to highlight the Women-Owned
                                                Small Businesses (WOSBs) data dashboard!</p>

                                        </div>
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Constance Lu
                                            </li>
                                            <li class="usa-collection__meta-item">
                                                <time datetime="2023-12-08T12:00:00Z" class="datetime">December 8,
                                                    2023</time>

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
        <div class="grid-col-12">
            <h3 class="site-preview-heading">Headings only</h3>
            <div class="samhsa-collection margin-right-3">
                <ul class="usa-collection">

                    <div
                        class="field field--name-field-cpnt-collection-ref-rev field--type-entity-reference-revisions field--label-hidden field__items">
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://digital.gov/guides/mobile-principles/?dg" class="usa-link"
                                            title="The eight principles of mobile-friendliness">
                                            The eight principles of mobile-friendliness
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Digital.gov
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://designsystem.digital.gov/maturity-model/" class="usa-link"
                                            title="The USWDS maturity model">
                                            The USWDS maturity model
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By U.S. Web Design System
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://18f.gsa.gov/2020/11/24/the-key-role-of-product-owners-in-federated-data-projects/"
                                            class="usa-link"
                                            title="The key role of product owners in federated data projects">
                                            The key role of product owners in federated data projects
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By 18F
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                        <div class="field__item">
                            <li class="usa-collection__item">
                                <div class="usa-collection__text">
                                    <h3 class="usa-collection__heading">
                                        <a href="https://trumpadministration.archives.performance.gov/September-2020-Updates-Show-Progress/"
                                            class="usa-link"
                                            title="Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs) Lorem Ipsum Lorem Ipsum Lorem Ipsum">
                                            Progress on Cross-Agency Priority (CAP) goals and Agency Priority Goals (APGs)
                                            L...
                                        </a>
                                    </h3>
                                    <div class="usa-collection__body">
                                        <ul class="usa-collection__meta" aria-label="More information">
                                            <li class="usa-collection__meta-item">
                                                By Performance.gov
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>

                        </div>
                    </div>

                </ul>
            </div>
        </div>
    </div>


</div>

Standards - Contact Us Integrated Card

Details and Specs

Requirements Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .sampleclass 

        ------------------- 

        samplestyle: samplestyle; 



  .contact-us-card__container

        ------------------- 

       border-radius: 4px; 

        border:  2px solid $mist; /* #EEEEEE */ 

        background-color: $white;  /* #FFFFFF */ 

        padding: 23px 18px 23px 21px; 


  .contact-us-card__heading

        ------------------- 

        font-size: 1.38rem; /* 22px; */ 

        font-weight: 600;

        margin-bottom: 0.5rem;

        color: $teal; /*#1A6986 */ 

        line-height: 1.41;


  .contact-us-card__body

        ------------------- 

        font-style: normal;

        color: $charcoal; /*#4A4A4A */ 


  .contact-us-card__body h3

        ------------------- 

            font-size: 1.125rem; /* 18px ;*/ 

            color: $charcoal; /*#4A4A4A */ 

            line-height: 1.17; 


.contact-us-card__body ul li 

        ------------------- 

                list-style: disc;

Preview

Markup Goes Here

Default view: Contact us card

Card with Media

Buprenorphine Waiver Contacts

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

Buprenorphine Waiver Contacts

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.

Tablet view : Contact us card

Card with Media
- Visit W3Schools.com!
- W3Schools.com!

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-infographic">Details</button>
    </h4>
    <div id="details-infographic" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://app.zeplin.io/project/646f7711b998e222068c9fd9?seid=64dfe1c1a66a290fd30290a5" class="button primary-button-1" title="Link to zeplin Designs" aria-label="Link Zeplin Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-infographic">Specs</button>
    </h4>
    <div id="specs-infographic" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .sampleclass <br />
        ------------------- <br />
        samplestyle: samplestyle; <br /><br />

  .contact-us-card__container<br />
        ------------------- <br />
       border-radius: 4px; </br />
        border:  2px solid $mist; /* #EEEEEE */ </br />
        background-color: $white;  /* #FFFFFF */ </br />
        padding: 23px 18px 23px 21px; </br />

  .contact-us-card__heading<br />
        ------------------- <br />
        font-size: 1.38rem; /* 22px; */ </br />
        font-weight: 600;</br />
        margin-bottom: 0.5rem;</br />
        color: $teal; /*#1A6986 */ </br />
        line-height: 1.41;</br />

  .contact-us-card__body<br />
        ------------------- <br />
        font-style: normal;</br />
        color: $charcoal; /*#4A4A4A */ </br />

  .contact-us-card__body h3<br />
        ------------------- <br />
            font-size: 1.125rem; /* 18px ;*/ <br />
            color: $charcoal; /*#4A4A4A */ <br />
            line-height: 1.17; <br />

.contact-us-card__body ul li <br />
        ------------------- <br />
                list-style: disc; <br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here

<h3 class="site-preview-heading">Default view: Contact us card </h3>
<ul class="usa-card-group">
  <li class="contact-us-card mobile:grid-col-4">
    <div class="contact-us-card__container">
      <div class="contact-us-card__header">
        <h2 class="contact-us-card__heading">Card with Media</h2>
      </div>
      <div class=" contact-us-card__body">
       <h3>Buprenorphine Waiver Contacts</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae.
        </p>
         <h3>Buprenorphine Waiver Contacts</h3>
      <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum
          tenetur quo cupiditate, eaque qui officia recusandae.
        </p>
      </div>
    </div>
  </li>
</ul>
<h3 class="site-preview-heading">Tablet view : Contact us card  </h3>
<ul class="usa-card-group">
  <li class="contact-us-card tablet:grid-col-8">
    <div class=" contact-us-card__container">
      <div class="contact-us-card__header">
        <h2 class="contact-us-card__heading">Card with Media</h2>
      </div>
      <div class="contact-us-card__body">
        <ul>
  <li><a href="https://www.w3schools.com">Visit W3Schools.com!</a>
 </li>
  <li><a href="https://www.w3schools.com"> W3Schools.com!</a>
</li>
</ul>
      </div>
    </div>
  </li>
</ul>
</div>

Standards - Date Picker

Details and Specs

Requirements USWDS Specs Designs

Description

A date picker helps users select a single date.

Guidance

Usability

Describe the date format. Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-form 

        ------------------- 

        max-width: 20rem;  /* 320px  */ 


       .usa-label  

        ------------------- 

        font-size: $base-font-size;  /*  1.125rem = 18px   */ 


       .usa-hint  

        ------------------- 

        color: #71767a; 


         .usa-input, .usa-textarea 

        ------------------- 

         border-width: 1px; 

        border-color: #565c65; 

       border-style: solid; 

       appearance: none;
       border-radius: 0; 

      color: #1b1b1b;  /*   */ 

      display: block;

      margin-top: 0.5rem; 

      padding: 0.5rem; 

      width: 100%; 


      .usa-input 

        ------------------- 

        height: 2.5rem;/*  40px */ 


       .usa-textarea 

        ------------------- 

       height: 10rem; /*  160px */

Preview

Appointment date

mm/dd/yyyy

<!-- CUSTOM STYLES  -->
<style>
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-details-date-picker">Details</button>
    </h4>
    <div id="template-details-date-picker" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7971" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/date-picker/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A date picker helps users select a single date.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Describe the date format. Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker. </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-specs-date-picker">Specs</button>
    </h4>
    <div id="template-specs-date-picker" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

        .usa-form <br />
        ------------------- <br />
        max-width: 20rem;  /* 320px  */ <br />

       .usa-label  <br />
        ------------------- <br />
        font-size: $base-font-size;  /*  1.125rem = 18px   */ <br />

       .usa-hint  <br />
        ------------------- <br />
        color: #71767a; <br />

         .usa-input, .usa-textarea <br />
        ------------------- <br />
         border-width: 1px; <br />
        border-color: #565c65; <br />
       border-style: solid; <br />
       appearance: none;
       border-radius: 0; <br />
      color: #1b1b1b;  /*   */ <br />
      display: block;<br />
      margin-top: 0.5rem; <br />
      padding: 0.5rem; <br />
      width: 100%; <br />

      .usa-input <br />
        ------------------- <br />
        height: 2.5rem;/*  40px */ <br />

       .usa-textarea <br />
        ------------------- <br />
       height: 10rem; /*  160px */ <br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>

<!-- MARKUP Begins  -->
<div class="usa-form-group">
  <label class="usa-label" id="appointment-date-label" for="appointment-date"
    >Appointment date</label
  >
  <div class="usa-hint" id="appointment-date-hint">mm/dd/yyyy</div>
  <div class="usa-date-picker">
    <input
      class="usa-input"
      id="appointment-date"
      name="appointment-date"
      aria-labelledby="appointment-date-label"
      aria-describedby="appointment-date-hint"
    />
  </div>
</div>

<!-- MARKUP Ends  -->

Standards - Hyperlink

Details and Specs

Requirements USWDS Specs Designs

Description

Hyperlinks are navigational elements that direct visitorsto a different page or site. They can be inline or separate from the text flow.

Guidance

Usability

Clearly identify external links. The external link icon () is a good way to communicate that a link is external.
Notify users about non-federal links. Review this resource on Digital.gov for guidance on non-federal link requirements.
Use unique, meaningful link text. Link text should explain the link’s purpose and help the user understand the link’s destination. Vague and repetitive text like “click here” or “read more” is unhelpful to those using screen-reading software. Screen-reading software collects all page links into a single list, and users typically start with that list. When they do so, they will not be able to tell the difference between links with similar wording.
Simplify link placement in body text. A link requires mental effort, which affects readability. Reduce the number of links in a single sentence to simplify its message. Consider placing links at the beginning or end of sentences to improve readability.
Link directly to the most relevant page. Avoid links to pages that require further user action to locate the intended information.
Indicate nonpublic links that require authentication. Use text or an indicator like a lock icon to signal any link that is not available publicly. This includes links behind a login or other authentication like a paywall.
If you use an external link indicator, use it consistently for all external text links. If your project uses an external link indicator (like an icon), use that indicator for all text links across your site. If users learn to associate an external link with the indicator, they will also appropriately expect that text links without an indicator are not external links. Icon- or image-only links like social share buttons or logos do not need the same treatment as text links.
Use rel="noreferrer" property on external links. Setting noreferrer on links prevents the browser from leaking information about the original web address.
Provide text context for external links. Following a link is a user decision. Users need enough information to make that decision - short links without context often don’t provide that. Plain, straightforward text can be the best way to communicate to users that a link will take them away from your site, which can be useful whether the external link is to either a government or a non-government site. When possible, use the content of the link text itself to indicate where it goes. By itself, an external link indicator (like an icon) can be ambiguous. Adding plain text can help make any link destination more clear.
Add a non-endorsement statement to your site. Your “Policy and Notices” page should explain to users that your agency does not endorse the information on any linked non-federal site. See, for example, USA.gov’s linking policy. In addition to this site-level notice, consider adding additional non-endorsement statements on individual pages with non-federal links.
Indicate file type and size for links to non-HTML content. Whenever possible, create HTML pages instead of linking to files like PDFs. If you do link to a file, tell users ahead of time if the link may trigger a file download, and show the size and format of that file.
We recommend including this information at the end of the link, in the format [FILE_TYPE, SIZE]. We recommend using the file type rather than a product name. Use uppercase for the file type and a comma for the separator. For file size, use the number of pages in the document or the size in MB or KB if the document is not paginated.
Identify jump links in body text. Jump links (or in-page links) send the user to another part of the same page. This behavior can be unexpected in body text links. In these cases, use the link text like "jump to", "above" or "below" to tell users that the destination is elsewhere on the same page.
Write out email and phone links. For mailto: and tel: links, write out email addresses and phone numbers so users can read or copy this information without selecting the link.
Encode email and phone links. Some browsers don’t automatically display a clickable link for email addresses or phone numbers, so encode email and phone links with mailto: and tel:. Be sure to include the country code in phone numbers to support international users.
Check with your IT security department regarding email link best practices. While displaying email addresses and phone numbers provides a better experience for users, it can also increase spam for the email recipient. One approach is to use a group email address to protect individuals. Another benefit of that approach is the email will remain the same even as staff and organizational structures change. You can also consider using a contact form instead of showing email addresses.
Don't rely on only color to distinguish links. Site visitors should be able to distinguish text links from surrounding text. In most cases, include an underline or bottom border on text links, in addition to a consistent link color. Text links not distinguished with an underline need a contrast level of at least 3:1 with their surrounding text (the same as AA Large, or a USWDS magic number of 40) and should show an underline on hover.
Don't block external links with disruptive notifications. Allow users to follow external links without taking a separate action to acknowledge leaving your site. Roadblock notices, such as modals and dialog boxes, result in a poor user experience. Instead, communicate about a link's destination through descriptive link text and external link indicators. Use your site's policy and notices page to provide important information about non-government sites without disrupting the user experience.
Don't use generic link text. Vague text like "click here" and "read more" is confusing and repetitive, especially to people using screen readers. Link text should describe the destination and explain where users will go if they follow the link.
Don't use the same link text for different URLs on the same page. Differentiate between links by using unique text for each

Accessibility

Allow keyboard navigation of links. Users should be able to navigate between links by using the "Tab" key. They should be able to activate a link by pressing the "Enter" key.
Link hover state should be visible on focus. Users should be able to activate hover and focus states with both a mouse and a keyboard.

Examples

/blog


      font-family: "Source Sans Pro",sans-serif; 

      DESKTOP: font-size: 1.06rem; /* 16.96px / 

      MOBILE: font-size: 1rem; /* 16px / 

      line-height: 1.5; /* 25.44px */ 

      font-weight: 400; 



      a 

      ------------------- 

      color: $sapphire; /* #1F419A */ 

      text-decoration: underline; 



      a:hover, a:focus 

      ------------------- 

      color: $royalblue; /* #005EA2 */ 

      text-decoration: underline; 



      a:visited 

      ------------------- 

      color: $barney; /* #54278F */ 

      text-decoration: underline; 



      .dark-background a 

      ------------------- 

      color: $white; /* #FFFFFF */ 

      text-decoration: underline; 



      .dark-background a:hover, .dark-background a:focus 

      ------------------- 

      color: $offwhite; /* #E6E6E6 */ 

      text-decoration: underline; 



      .dark-background a:visited 

      ------------------- 

      color: $white; /* #FFFFFF */ 

      text-decoration: underline;

White Background Hyperlinks

Community
Criminal Justice
HIV/AIDS
Mental Health

Dark Background Hyperlinks

Community
Criminal Justice
HIV/AIDS
Mental Health

<!-- CUSTOM STYLES  -->
<style>
  a {
      color: #1F419A;
      text-decoration: underline;
  }

  a:hover, a:focus {
    color: #005EA2;
    text-decoration: underline;
  }

  a:visited {
    color: #54278F;
    text-decoration: underline;
  }

  .dark-background {
    background-color: #1A6986;
    padding: 10px;
  }

  .dark-background a, .dark-background a:visited {
    color: #FFFFFF;
    text-decoration: underline;
  }

  .dark-background a:hover, .dark-background a:focus {
    color: #E6E6E6;
    text-decoration: underline;
  }
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-hyperlink">Details</button>
    </h4>
    <div id="details-hyperlink" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="#" class="button primary-button-1" title="Link to Requirements Doc" aria-label="Link to Requirements Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/link/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://www.figma.com/file/67d7ja2kTrva8johcDdlcL/Hyperlink-Styling?type=design&node-id=0-1&mode=design&t=jYUiFNmfZwbF5QRY-0" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Hyperlinks are navigational elements that direct visitorsto a different page or site. They can be inline or separate from the text flow.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Clearly identify external links.</strong> The external link icon (<svg class="svg-inline--fa fa-external-link-alt" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="external-link-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" alt="SAMHSA Exit Disclaimer"><path fill="currentColor" d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"></path></svg>) is a good way to communicate that a link is external.</li>
          <li><strong>Notify users about non-federal links.</strong> Review <a href="https://digital.gov/resources/required-web-content-and-links?_gl=1*yeayv4*_ga*NzI0NDgzMjEzLjE3MjA2MjYyODY.*_ga_HBYXWFP794*MTcyMDYzMDkyNy4yLjEuMTcyMDYzMTEyNy4wLjAuMA.." target="_blank">this resource on Digital.gov</a> for guidance on non-federal link requirements.</li>
          <li><strong>Use unique, meaningful link text.</strong> Link text should explain the link’s purpose and help the user understand the link’s destination. Vague and repetitive text like “click here” or “read more” is unhelpful to those using screen-reading software. Screen-reading software collects all page links into a single list, and users typically start with that list. When they do so, they will not be able to tell the difference between links with similar wording.</li>
          <li><strong>Simplify link placement in body text.</strong> A link requires mental effort, which affects readability. Reduce the number of links in a single sentence to simplify its message. Consider placing links at the beginning or end of sentences to improve readability.</li>
          <li><strong>Link directly to the most relevant page.</strong> Avoid links to pages that require further user action to locate the intended information.</li>
          <li><strong>Indicate nonpublic links that require authentication.</strong> Use text or an indicator like a lock icon to signal any link that is not available publicly. This includes links behind a login or other authentication like a paywall.</li>
          <li><strong>If you use an external link indicator, use it consistently for all external text links.</strong> If your project uses an external link indicator (like an icon), use that indicator for all text links across your site. If users learn to associate an external link with the indicator, they will also appropriately expect that text links without an indicator are not external links. Icon- or image-only links like social share buttons or logos do not need the same treatment as text links.</li>
          <li><strong>Use rel="noreferrer" property on external links.</strong> Setting noreferrer on links prevents the browser from leaking information about the original web address.</li>
          <li><strong>Provide text context for external links. Following a link is a user decision.</strong> Users need enough information to make that decision - short links without context often don’t provide that. Plain, straightforward text can be the best way to communicate to users that a link will take them away from your site, which can be useful whether the external link is to either a government or a non-government site. When possible, use the content of the link text itself to indicate where it goes. By itself, an external link indicator (like an icon) can be ambiguous. Adding plain text can help make any link destination more clear.</li>
          <li><strong>Add a non-endorsement statement to your site.</strong> Your “Policy and Notices” page should explain to users that your agency does not endorse the information on any linked non-federal site. See, for example, <a href="https://www.usa.gov/linking-policy" target="_blank">USA.gov’s linking policy</a>. In addition to this site-level notice, consider adding additional non-endorsement statements on individual pages with non-federal links.</li>
          <li><strong>Indicate file type and size for links to non-HTML content.</strong> Whenever possible, create HTML pages instead of linking to files like PDFs. If you do link to a file, tell users ahead of time if the link may trigger a file download, and show the size and format of that file.<br/>
          We recommend including this information at the end of the link, in the format [FILE_TYPE, SIZE]. We recommend using the file type rather than a product name. Use uppercase for the file type and a comma for the separator. For file size, use the number of pages in the document or the size in MB or KB if the document is not paginated.</li>
          <li><strong>Identify jump links in body text.</strong> Jump links (or in-page links) send the user to another part of the same page. This behavior can be unexpected in body text links. In these cases, use the link text like "jump to", "above" or "below" to tell users that the destination is elsewhere on the same page.</li>
          <li><strong>Write out email and phone links.</strong> For mailto: and tel: links, write out email addresses and phone numbers so users can read or copy this information without selecting the link.</li>
          <li><strong>Encode email and phone links.</strong> Some browsers don’t automatically display a clickable link for email addresses or phone numbers, so encode email and phone links with mailto: and tel:. Be sure to include the country code in phone numbers to support international users.</li>
          <li><strong>Check with your IT security department regarding email link best practices.</strong> While displaying email addresses and phone numbers provides a better experience for users, it can also increase spam for the email recipient. One approach is to use a group email address to protect individuals. Another benefit of that approach is the email will remain the same even as staff and organizational structures change. You can also consider using a contact form instead of showing email addresses.</li>
          <li><strong>Don't rely on only color to distinguish links.</strong> Site visitors should be able to distinguish text links from surrounding text. In most cases, include an underline or bottom border on text links, in addition to a consistent link color. Text links not distinguished with an underline need a contrast level of at least 3:1 with their surrounding text (the same as AA Large, or a USWDS magic number of 40) and should show an underline on hover.</li>
          <li>Don't block external links with disruptive notifications. Allow users to follow external links without taking a separate action to acknowledge leaving your site. Roadblock notices, such as modals and dialog boxes, result in a poor user experience. Instead, communicate about a link's destination through descriptive link text and external link indicators. Use your site's policy and notices page to provide important information about non-government sites without disrupting the user experience.</li>
          <li><strong>Don't use generic link text.</strong> Vague text like "click here" and "read more" is confusing and repetitive, especially to people using screen readers. Link text should describe the destination and explain where users will go if they follow the link.</li>
          <li><strong>Don't use the same link text for different URLs on the same page.</strong> Differentiate between links by using unique text for each</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Allow keyboard navigation of links.</strong> Users should be able to navigate between links by using the "Tab" key. They should be able to activate a link by pressing the "Enter" key.</li>
          <li><strong>Link hover state should be visible on focus.</strong> Users should be able to activate hover and focus states with both a mouse and a keyboard.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>
            <a href="/blog" target="_blank">/blog</a>
          </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-hyperlink">Specs</button>
    </h4>
    <div id="specs-hyperlink" class="usa-accordion__content">
      <code>
      font-family: "Source Sans Pro",sans-serif; <br/>
      DESKTOP: font-size: 1.06rem; /* 16.96px / <br/>
      MOBILE: font-size: 1rem; /* 16px / <br/>
      line-height: 1.5; /* 25.44px */ <br/>
      font-weight: 400; <br/><br/>

      a <br/>
      ------------------- <br/>
      color: $sapphire; /* #1F419A */ <br/>
      text-decoration: underline; <br/><br/>

      a:hover, a:focus <br/>
      ------------------- <br/>
      color: $royalblue; /* #005EA2 */ <br/>
      text-decoration: underline; <br/><br/>

      a:visited <br/>
      ------------------- <br/>
      color: $barney; /* #54278F */ <br/>
      text-decoration: underline; <br/><br/>

      .dark-background a <br/>
      ------------------- <br/>
      color: $white; /* #FFFFFF */ <br/>
      text-decoration: underline; <br/><br/>

      .dark-background a:hover, .dark-background a:focus <br/>
      ------------------- <br/>
      color: $offwhite; /* #E6E6E6 */ <br/>
      text-decoration: underline; <br/><br/>

      .dark-background a:visited <br/>
      ------------------- <br/>
      color: $white; /* #FFFFFF */ <br/>
      text-decoration: underline; <br/><br/>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>White Background Hyperlinks</h3>
  <p>
    <a href="#">Community</a><br/>
    <a href="#">Criminal Justice</a><br/>
    <a href="#">HIV/AIDS</a><br/>
    <a href="#">Mental Health</a>
  </p>

<h3>Dark Background Hyperlinks</h3>
  <p class="dark-background">
    <a href="#">Community</a><br/>
    <a href="#">Criminal Justice</a><br/>
    <a href="#">HIV/AIDS</a><br/>
    <a href="#">Mental Health</a>
  </p>

Standards - Icon Block

Details and Specs

Requirements USWDS Specs Designs

Description

Icons help communicate meaning, actions, status, or feedback.

Guidance

Accessibility

Provide descriptive text when an icon is meaningful or has an action associated with it. Do not provide additional text when the icon is decorative.


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .icons-block 

        ------------------- 

        background-color: $white; /* #FFFFFF */ 

        padding: 0 0 20px 0; 

        display: flex; 

        justify-content: center; 

        flex-wrap: wrap;



        .icons-block  a 

        ------------------- 

        text-decoration: none; 



        .icons-block a:hover 

        ------------------- 

        text-decoration: underline; 



        .icons-block a:hover .icon .outer-circle 

        ------------------- 

        box-shadow: 0px 3px 6px #00000029; 



        .icons-block a:hover .icon .outer-circle .inner-circle 

        ------------------- 

        border: solid 8px #9DC3D1; 



        .icon 

        ------------------- 

        margin: 21px 0; 



        .icon .outer-circle 

        ------------------- 

        padding: 14px; 

        border: solid 2px #d8d8d8; 

        background-color: $white; /* #FFFFFF */ 

        border-radius: 50%; 

        margin: auto; 



        .icon .outer-circle .inner-circle 

        ------------------- 

        width: 100%; 

        height: 100%; 

        padding: 25%; 

        border: solid 8px #daeaf6; 

        background-color: $white; /* #FFFFFF */ 

        border-radius: 50%; 



        .icon .outer-circle .inner-circle svg 

        ------------------- 

        color: $teal; /* #1A6986 */ 

        background-color: $white; /* #FFFFFF */ 



        .textbox 

        ------------------- 

        font-size: 20px; 

        font-weight: bold; 

        font-style: normal; 

        line-height: 1.15; 

        letter-spacing: normal; 

        text-align: center; 

        color: $midnight; /* #1E384B */ 

        margin: 20px auto 0 auto; 

        text-decoration: none; 
 


        .icons-block--big .icons-block a .icon 

        ------------------- 

        padding: 0 28px; 



        .icons-block--big .icons-block a .icon .outer-circle 

        ------------------- 

        width: 132px; 

        height: 132px; 



        .icons-block--big .icons-block a .icon .outer-circle .inner-circle svg 

        ------------------- 

        width: 112%; 

        height: 112%; 



        .icons-block--big .icons-block a .textbox 

        ------------------- 

        width: 132px; 



        .icons-block--standard .icons-block a .icon 

        ------------------- 

        padding: 0 28px; 



        .icons-block--standard .icons-block a .icon .outer-circle 

        ------------------- 

        width: 113px; 

        height: 113px; 



        .icons-block--standard .icons-block a .icon .outer-circle .inner-circle svg 

        ------------------- 

        width: 100%; 

        height: 100%; 



        .icons-block--standard .icons-block a .textbox 

        ------------------- 

        width: 113px;

Default Size

natus error sit voluptatem

accusantium doloremque laudantium

Yahoo

Google

Sed ut perspiciatis unde omnis

Ut enim ad minima veniam

Big Size

natus error sit voluptatem

accusantium doloremque laudantium

Yahoo

Google

Sed ut perspiciatis unde omnis

Ut enim ad minima veniam

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3> </div>
  </div>

  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="icons-block-details">
        Details
      </button>
    </h4>
    <div id="icons-block-details" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="#" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="#" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </div>
      <h5>Description</h5>
      <p>Icons help communicate meaning, actions, status, or feedback.</p>
      <h5>Guidance</h5>
      <h6>Accessibility</h6>
      <p>Provide descriptive text when an icon is meaningful or has an action associated with it. Do not provide additional text when the icon is decorative.</p>
    </div>
  </div>
  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-icons-block">Specs</button>
    </h4>
    <div id="specs-icons-block" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br>

        .icons-block <br>
        ------------------- <br>
        background-color: $white; /* #FFFFFF */ <br>
        padding: 0 0 20px 0; <br>
        display: flex; <br>
        justify-content: center; <br>
        flex-wrap: wrap;<br><br>

        .icons-block  a <br>
        ------------------- <br>
        text-decoration: none; <br><br>

        .icons-block a:hover <br>
        ------------------- <br>
        text-decoration: underline; <br><br>

        .icons-block a:hover .icon .outer-circle <br>
        ------------------- <br>
        box-shadow: 0px 3px 6px #00000029; <br><br>

        .icons-block a:hover .icon .outer-circle .inner-circle <br>
        ------------------- <br>
        border: solid 8px #9DC3D1; <br><br>

        .icon <br>
        ------------------- <br>
        margin: 21px 0; <br><br>

        .icon .outer-circle <br>
        ------------------- <br>
        padding: 14px; <br>
        border: solid 2px #d8d8d8; <br>
        background-color: $white; /* #FFFFFF */ <br>
        border-radius: 50%; <br>
        margin: auto; <br><br>

        .icon .outer-circle .inner-circle <br>
        ------------------- <br>
        width: 100%; <br>
        height: 100%; <br>
        padding: 25%; <br>
        border: solid 8px #daeaf6; <br>
        background-color: $white; /* #FFFFFF */ <br>
        border-radius: 50%; <br><br>

        .icon .outer-circle .inner-circle svg <br>
        ------------------- <br>
        color: $teal; /* #1A6986 */ <br>
        background-color: $white; /* #FFFFFF */ <br><br>

        .textbox <br>
        ------------------- <br>
        font-size: 20px; <br>
        font-weight: bold; <br>
        font-style: normal; <br>
        line-height: 1.15; <br>
        letter-spacing: normal; <br>
        text-align: center; <br>
        color: $midnight; /* #1E384B */ <br>
        margin: 20px auto 0 auto; <br>
        text-decoration: none; <br> <br>

        .icons-block--big .icons-block a .icon <br>
        ------------------- <br>
        padding: 0 28px; <br><br>

        .icons-block--big .icons-block a .icon .outer-circle <br>
        ------------------- <br>
        width: 132px; <br>
        height: 132px; <br><br>

        .icons-block--big .icons-block a .icon .outer-circle .inner-circle svg <br>
        ------------------- <br>
        width: 112%; <br>
        height: 112%; <br><br>

        .icons-block--big .icons-block a .textbox <br>
        ------------------- <br>
        width: 132px; <br><br>

        .icons-block--standard .icons-block a .icon <br>
        ------------------- <br>
        padding: 0 28px; <br><br>

        .icons-block--standard .icons-block a .icon .outer-circle <br>
        ------------------- <br>
        width: 113px; <br>
        height: 113px; <br><br>

        .icons-block--standard .icons-block a .icon .outer-circle .inner-circle svg <br>
        ------------------- <br>
        width: 100%; <br>
        height: 100%; <br><br>

        .icons-block--standard .icons-block a .textbox <br>
        ------------------- <br>
        width: 113px; <br><br>

      </code>
    </div>
  </div>
</div>
<br />
<hr />
<br />

<!-- MARKUP  -->
<div class="grid-col-12 block block-layout-builder block-inline-blockicon-block-lego-">
  <h2>Default Size</h2>
  <div class="icons-block--standard">
    <div class="icons-block">
      <a href="http://www.samhsa.gov" title="wnatus error sit voluptatem" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-hurricane"></i>
            </div>
          </div>
          <div class="textbox">natus error sit voluptatem</div>
         </div>
      </a>
      <a href="http://www.hhs.gov" title="accusantium doloremque laudantium" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-tornado"></i>
            </div>
          </div>
          <div class="textbox">accusantium doloremque laudantium</div>
         </div>
      </a>
      <a href="http://www.yahoo.com" title="Yahoo" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-fire-flame-curved"></i>
            </div>
          </div>
          <div class="textbox">Yahoo</div>
         </div>
      </a>
      <a href="http://www.google.com" title="Google" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-dragon"></i>
            </div>
          </div>
          <div class="textbox">Google</div>
         </div>
      </a>
      <a href="https://store.samhsa.gov/" title="Sed ut perspiciatis unde omnis" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-gear"></i>
            </div>
          </div>
          <div class="textbox">Sed ut perspiciatis unde omnis</div>
         </div>
      </a>
      <a href="https://www.usa.gov/" title="Ut enim ad minima veniam" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-water"></i>
            </div>
          </div>
          <div class="textbox">Ut enim ad minima veniam</div>
         </div>
      </a>
    </div>
  </div>
</div>

<div class="grid-col-12 block block-layout-builder block-inline-blockicon-block-lego-">
  <h2>Big Size</h2>
  <div class="icons-block--big">
    <div class="icons-block">
      <a href="http://www.samhsa.gov" title="natus error sit voluptatem" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-hurricane"></i>
            </div>
          </div>
          <div class="textbox">natus error sit voluptatem</div>
         </div>
      </a>
      <a href="http://www.hhs.gov" title="accusantium doloremque laudantium" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-tornado"></i>
            </div>
          </div>
          <div class="textbox">accusantium doloremque laudantium</div>
         </div>
      </a>
      <a href="http://www.yahoo.com" title="Yahoo" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-fire-flame-curved"></i>
            </div>
          </div>
          <div class="textbox">Yahoo</div>
         </div>
      </a>
      <a href="http://www.google.com" title="Google" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-dragon"></i>
            </div>
          </div>
          <div class="textbox">Google</div>
         </div>
      </a>
      <a href="https://store.samhsa.gov/" title="Sed ut perspiciatis unde omnis" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-gear"></i>
            </div>
          </div>
          <div class="textbox">Sed ut perspiciatis unde omnis</div>
         </div>
      </a>
      <a href="https://www.usa.gov/" title="Ut enim ad minima veniam" tabindex="0">
        <div class="icon">
          <div class="outer-circle">
            <div class="inner-circle">
              <i class="fa-regular fa-water"></i>
            </div>
          </div>
          <div class="textbox">Ut enim ad minima veniam</div>
         </div>
      </a>
    </div>
  </div>
</div>

Standards - Lists

Details and Specs

Requirements USWDS Specs Designs

Description

A list organizes information into discrete sequential sections.

Guidance

Usability

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

Examples

Unordered list: https://www.samhsa.gov/find-help/988

 font-family: "Source Sans Pro",sans-serif; 

                   font-color: $charcoal; /* #4A4A4A */ 

                  DESKTOP: font-size: 1.06rem; /* 16.96px /  

                  MOBILE: font-size: 1rem; /* 16px /  

                  line-height: 1.5; /* 25.44px */ 

                  font-weight: 400; 

                   margin-left: 40px;

                   margin-bottom: 9px;

                   list-style: disc (for unordered lists)

                   list-style: decimal (for ordered lists)

                   list-style: circle (for nested unordered lists)

                   margin-top: 10px; ( for nested lists)

Unordered List:

Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.

lacinia
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.
lobortis
lobortis
erat

Ordered List:

erat
eros
iaculis
in
sed

Nested Lists:

Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.

Item One
Item Two
Item Three
- Nested Item One
- Nested Item Two
- Nested Item Three
Item Four
Item Five
Item Six
Item Seven
- Nested Item One
- Nested Item Two
  - Double Nested Item One
  - Double Nested Item Two
  - Double Nested Item Three
- Nested Item Three
Item Eight
Item Nine
Item Ten

Item One
Item Two
Item Three
- Nested Item One
- Nested Item Two
- Nested Item Three
Item Four
Item Five
Item Six
Item Seven
- Nested Item One
- Nested Item Two
  - Double Nested Item One
  - Double Nested Item Two
  - Double Nested Item Three
- Nested Item Three
Item Eight
Item Nine
Item Ten

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-lists">Details</button>
    </h4>
    <div id="details-lists" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
<a href="https://designsystem.digital.gov/components/list/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
<a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/64590dadab736925ae38ba08" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </div>

      <h5>Description</h5>
        <p>A list organizes information into discrete sequential sections.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Use sentence case and begin lists with a capital letter.</li>
          <li>Use punctuation appropriate to the text. Do not leave sentences without periods.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Unordered list: <a href="https://www.samhsa.gov/find-help/988" target="_blank">https://www.samhsa.gov/find-help/988</a></li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-lists">Specs</button>
    </h4>
    <div id="specs-lists" class="usa-accordion__content">
      <code> font-family: "Source Sans Pro",sans-serif; <br />
                   font-color: $charcoal; /* #4A4A4A */ <br />
                  DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
                  MOBILE: font-size: 1rem; /* 16px /  <br />
                  line-height: 1.5; /* 25.44px */ <br />
                  font-weight: 400; <br />
                   margin-left: 40px;<br/>
                   margin-bottom: 9px;<br/>
                   list-style: disc (for unordered lists)<br/>
                   list-style: decimal (for ordered lists)<br/>
                   list-style: circle (for nested unordered lists)<br/>
                   margin-top: 10px; ( for nested lists)</code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<div class="simple-styleguide">
    <div>
        <p><strong>Unordered List:</strong></p>
        <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <ul>
            <li class="first">lacinia</li>
            <li>Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</li>
            <li>lobortis</li>
            <li>lobortis</li>
            <li class="last">erat</li>
        </ul>
        <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div>
        <p><strong>Ordered List:</strong></p>
        <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <ol>
            <li class="first">erat</li>
            <li>eros</li>
            <li>iaculis</li>
            <li>in</li>
            <li class="last">sed</li>
        </ol>
        <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    </div>

    <div>
    <p><strong>Nested Lists:</strong></p>
        <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
        <ul>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three
                <ul>
                    <li>Nested Item One</li>
                    <li>Nested Item Two</li>
                    <li>Nested Item Three</li>
                </ul>
            </li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven
                <ul>
                    <li>Nested Item One</li>
                    <li>Nested Item Two
                        <ul>
                            <li>Double Nested Item One</li>
                            <li>Double Nested Item Two</li>
                            <li>Double Nested Item Three</li>
                        </ul>
                    </li>
                    <li>Nested Item Three</li>
                </ul>
            </li>
            <li>Item Eight</li>
            <li>Item Nine</li>
            <li>Item Ten</li>
        </ul>
        <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
        <ol>
            <li>Item One</li>
            <li>Item Two</li>
            <li>Item Three
                <ul>
                    <li>Nested Item One</li>
                    <li>Nested Item Two</li>
                    <li>Nested Item Three</li>
                </ul>
            </li>
            <li>Item Four</li>
            <li>Item Five</li>
            <li>Item Six</li>
            <li>Item Seven
                <ul>
                    <li>Nested Item One</li>
                    <li>Nested Item Two
                        <ul>
                            <li>Double Nested Item One</li>
                            <li>Double Nested Item Two</li>
                            <li>Double Nested Item Three</li>
                        </ul>
                    </li>
                    <li>Nested Item Three</li>
                </ul>
            </li>
            <li>Item Eight</li>
            <li>Item Nine</li>
            <li>Item Ten</li>
        </ol>
        <p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi, laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis. Praesent nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan eros nec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et, porttitor et, varius a, leo.</p>
    </div>
</div>

Standards - Mobile Menu

Details and Specs


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            font-size: 1rem; /* 16px /  

            line-height: 1.25;  

            font-weight: 400;

Preview

Mobile Menu
This mobile menu style is designed for viewport widths of 1023 pixels or smaller. Please minimize your viewport to the recommended size to experience the mobile menu style designed for viewport widths of 1023 pixels or smaller.

<!-- CUSTOM STYLES  -->
<style>
  .sg-menu-header {
    height: 72px;
    position: relative;
    background: #1e384b;
  }

  #mobile-menu-sg {
    display: block;
    top: 18px;
    float: right;
  }
</style>

<!-- CUSTOM SCRIPTS  -->
<script>
</script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-mobile-menu">Details</button>
    </h4>
    <div id="details-mobile-menu" class="usa-accordion__content" hidden="">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://xd.adobe.com/view/ea0d8a91-3ee6-4424-9813-dea56a9e591d-bf5e/screen/adf0e1c8-2879-4f2b-9c4c-927e690d0649/" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>The mobile menu is created using an <a href="https://mmenujs.com/docs/">Mmenu </a> (short for mobile menu) JavaScript plugin. It turns a basic HTML menu structure into a fully functional off-canvas menu with sliding submenus. For further information please visit the Mmenu plugin link above.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>The mobile menu is designed for viewport widths of 1023 pixels or smaller.</li>
          <li>Show the current page. Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.</li>
          <li>The menu generates an Off-canvas menu which is hidden from sight until the user pushes the menu button: then the page content slides out of view to reveal the navigation.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Users should be able to tab/Enter to open and close the mobile menu.</li>
          <li>Users should be able to tab through the menu items.</li>
          <li>All menu items should pass color contrast.</li>
          <li>Users should be able to see a visible focus outline as each element receives focus.</li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-mobile-menu">Specs</button>
    </h4>
    <div id="specs-mobile-menu" class="usa-accordion__content" hidden="">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            font-size: 1rem; /* 16px /  <br>
            line-height: 1.25;  <br>
            font-weight: 400; <br><br>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>

<div class="page">
  <div class="responsive-menu-block-wrapper">
      <div class="sg-menu-header">
        <a href="#mmenu" id="mobile-menu-sg" class="mobile-btn"></a>
      </div>
  </div>
  <nav aria-label="mobile menu" aria-labelledby="styleguide mobile menu" id="mmenu" class="styleguide-menu">

    <ul id="panel-menu">

                  <li><a href="#/find-help"><span>Find Help</span></a>
                    <ul>
                        <li><a href="#/find-support">Find Support</a></li>
                        <li><a href="#/mental-health"><span>What is Mental Health?</span></a>
                            <ul>
                                <li><a href="#/mental-health/how-to-talk">How to Talk About Mental Health</a></li>
                                <li><a href="#/mental-health/myths-and-facts">Mental Health Myths and Facts</a></li>
                                <li><a href="#/mental-health/antisocial-personality-disorder">Antisocial Personality Disorder</a></li>
                            </ul>
                        </li>
                    </ul>
                  </li>
                  <li><a href="#/practitioner-training">Practitioner Training</a></li>
                  <li><a href="#/public-messages">Public Messages</a></li>
                  <li><a href="#/grants">Grants</a></li>
                  <li><a href="#/data">Data</a></li>
                  <li><a href="#/programs">Programs</a></li>
                  <li><a href="#/newsroom">Newsroom</a></li>
                  <li><a href="#/about-us">About US</a>
                    <ul>
                        <li><a href="#/about-us/who-we-are">Who We Are</a></li>
                        <li><a href="#/about-us/data-strategy">Data Strategy</a></li>
                        <li><a href="#/about-us/advisory-councils">Advisory Councils</a></li>
                    </ul>
                  </li>
                  <li><a href="#/publications">Publications</a></li>
        </ul>
    </nav>
   <div class="content">
    <p><strong>Mobile Menu </strong><br>
      This mobile menu style is designed for viewport widths of 1023 pixels or smaller. Please minimize your viewport to the recommended size to experience the mobile menu style designed for viewport widths of 1023 pixels or smaller.</p>
  </div>
</div>

Standards - New Feature Process

Delivery Stage:
- Delivery Team (with input from other teams as needed) - Gather Requirements in emplate on Requirements Confluence Page
- Delivery, Design, Development, QA Teams (as needed) - Consult on Requirements
Design Stage:
- Design Team - If STATIC DESIGN, create Mockups in XD
- Design Team - If STATIC DESIGN, Get XD design approved by 508
- Design Team - If STATIC DESIGN, Get XD design approved by client
- Design Team - If STATIC DESIGN, Export approved XD Mockups to Client Approved Zeplin design page and share with Dev Lead for assignment
- Design Team - If ANIMATED DESIGN, create mockups in Codpen
- Design Team - If ANIMATED DESIGN, Get Codepen design approved by 508
- Design Team - If ANIMATED DESIGN, Get Codepen design approved by client
- Design Team - If ANIMATED DESIGN, Share Client Approved Codepen design page with Dev Lead for assignment
Development Stage:
- Dev Team (or Design Team can do as part of Step #2 if they are comfortable building it in Drupal) - Build Style Guide pattern page for new component with css, js, markup following Sandbox Page Template
- Dev Team - BED - Turn markup from Step #3 into Lego fields and templates
- Dev Team - FED - Turn CSS and JS from Step #3 into SASS and JS files. Also Edit as needed for Browser and 508. Remove CSS and JS from Styleguide Pattern
- Dev Team - BED - Pull #4 and #5 together if need for testing Tugboat and assign for Design Review.
- Dev Team - Identify Guidelines as a result of code restrictions and consult with Design.
QA Stage:
- Design Team - Specs review. Work with Dev if changes need.
- Dev Team - Peer review. Pass back to Dev BED if changes need or to Testers if ready to move forward
- Testing Team - Review on Tugboat for QA and 508 and pass back to BED is changes needed or on to Rama for merge to Dev
- Dev Team - Do last pass on Styleguide to remove css, js, and update Details and Specs as needed
Maintenance Stage:
- NOTE: Dev - Update Details, Specs and Guidelines anytime there is a change

<style>
  .styleguide-background {
     background-color: #F5A9A4;
     border: 1px solid #de9995;
  }

  ul.checkmark {
    list-style: none;
  }

  ul.checkmark li:before {
    content: "✓";
  }

  button.simple-styleguide--view-sourecode {
    background-color: #cdcdcd;
    color: #000000;
  }

  ul.colorlist {
    margin-left: 0;
  }

  ul.colorlist li {
    list-style-type: none;
    padding: 2px 5px;
  }

  .grid-col-content {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>


<!-- START TIMELINE -->
<div class="timeline-list-wrapper">
  <ul class="timeline-list item-list alternate marker-center">
    <li class="item01 timeline-item clearfix odd tabindex" tabindex="0">
      <div class="timeline-item-wrapper animate__animated animate__slower animate__fadeIn">
        <span class="timeline-marker"></span>
        <div class="timeline-date-wrapper">
          <div class="timeline-date-box">Delivery Stage:</div>
        </div>
        <div class="timeline-img-wrapper"></div>
        <div class="timeline-body-wrapper views-field views-field-timeline-list">
          <div class="field-content">
            <ul>
              <li>
                <strong>Delivery Team (with input from other teams as needed)</strong> - Gather Requirements in emplate on <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" target="_blank">Requirements Confluence Page</a>
              </li>
              <li>
                <strong>Delivery, Design, Development, QA Teams (as needed)</strong> - Consult on Requirements
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-icon-wrapper animate__animated animate__slower animate__fadeIn"></div>
    </li>

    <li class="item02 timeline-item clearfix even" tabindex="0">
      <div class="timeline-item-wrapper">
        <span class="timeline-marker"></span>
        <div class="timeline-date-wrapper">
          <div class="timeline-date-box">Design Stage:</div>
        </div>
        <div class="timeline-img-wrapper"></div>
        <div class="timeline-body-wrapper views-field views-field-timeline-list">
          <div class="field-content">
            <ul>
              <li>
                <strong>Design Team</strong> - If STATIC DESIGN, create Mockups in XD
              </li>
              <li>
                <strong>Design Team</strong> - If STATIC DESIGN, Get XD design approved by 508
              </li>
              <li>
                <strong>Design Team</strong> - If STATIC DESIGN, Get XD design approved by client
              </li>
              <li>
                <strong>Design Team</strong> - If STATIC DESIGN, Export approved XD Mockups to <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878" target="_blank">Client Approved Zeplin design page</a> and share with Dev Lead for assignment
              </li>
              <li>
                <strong>Design Team</strong> - If ANIMATED DESIGN, create mockups in Codpen
              </li>
              <li>
                <strong>Design Team</strong> - If ANIMATED DESIGN, Get Codepen design approved by 508
              </li>
              <li>
                <strong>Design Team</strong> - If ANIMATED DESIGN, Get Codepen design approved by client
              </li>
              <li>
                <strong>Design Team</strong> - If ANIMATED DESIGN, Share <a href="https://codepen.io/Sekon-design/pen/abjxZWP" target="_blank">Client Approved Codepen design page</a> with Dev Lead for assignment
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-icon-wrapper-empty"></div>
    </li>

    <li class="item03 timeline-item clearfix odd" tabindex="0">
      <div class="timeline-item-wrapper">
        <span class="timeline-marker"></span>
        <div class="timeline-date-wrapper ">
          <div class="timeline-date-box">Development Stage:</div>
        </div>
        <div class="timeline-img-wrapper"></div>
        <div class="timeline-body-wrapper views-field views-field-timeline-list">
          <div class="field-content">
            <ul>
              <li>
                <strong>Dev Team (or Design Team can do as part of Step #2 if they are comfortable building it in Drupal)</strong> - Build <a href="http://samhsa.lndo.site/simple-styleguide" target="_blank">Style Guide pattern page</a> for new component with css, js, markup following Sandbox Page Template
              </li>
              <li>
                <strong>Dev Team - BED</strong> - Turn markup from Step #3 into Lego fields and templates
              </li>
              <li>
                <strong>Dev Team - FED</strong> - Turn CSS and JS from Step #3 into SASS and JS files. Also Edit as needed for Browser and 508. Remove CSS and JS from Styleguide Pattern
              </li>
              <li>
                <strong>Dev Team - BED</strong> - Pull #4 and #5 together if need for testing Tugboat and assign for Design Review.
              </li>
              <li>
                <strong>Dev Team</strong> - Identify Guidelines as a result of code restrictions and consult with Design.
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-icon-wrapper"></div>
    </li>

    <li class="item04 timeline-item clearfix even" tabindex="0">
      <div class="timeline-icon-wrapper"></div>
      <div class="timeline-item-wrapper">
        <span class="timeline-marker"></span>
        <div class="timeline-date-wrapper">
          <div class="timeline-date-box">QA Stage:</div>
        </div>
        <div class="timeline-img-wrapper"></div>
        <div class="timeline-body-wrapper views-field views-field-timeline-list">
          <div class="field-content">
            <ul>
              <li>
                <strong>Design Team</strong> - Specs review. Work with Dev if changes need.
              </li>
              <li>
                <strong>Dev Team</strong> - Peer review. Pass back to Dev BED if changes need or to Testers if ready to move forward
              </li>
              <li>
                <strong>Testing Team</strong> - Review on Tugboat for QA and 508 and pass back to BED is changes needed or on to Rama for merge to Dev
              </li>
              <li>
                <strong>Dev Team</strong> - Do last pass on Styleguide to remove css, js, and update Details and Specs as needed
              </li>
            </ul>
          </div>
        </div>
      </div>
    </li>

    <li class="item05 timeline-item clearfix odd" tabindex="0">
      <div class="timeline-item-wrapper">
        <span class="timeline-marker"></span>
        <div class="timeline-date-wrapper ">
          <div class="timeline-date-box">Maintenance Stage:</div>
        </div>
        <div class="timeline-img-wrapper"></div>
        <div class="timeline-body-wrapper views-field views-field-timeline-list">
          <div class="field-content">
            <ul>
              <li>
                <strong>NOTE: Dev</strong> - Update Details, Specs and Guidelines anytime there is a change
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="timeline-icon-wrapper-empty"></div>
    </li>
  </ul>
  <div class="timeline-scroll-arrow">
    <i class="fas fa-arrow-circle-down" aria-hidden="true" title="Scroll down to present next timeline card."></i>
  </div>
</div>
<!-- END TIMELINE -->

Find Support - Button Group

Details and Specs

Requirements USWDS Specs Designs

Description

The button group purpose is to group together a collection of buttons.

Examples

How to pay for treatment


           font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



          a.button 

          ------------------- 

          color: $white; /* #FFFFFF */ 

          text-decoration: none; 

          background-color: $teal; /* #1A6986 */ 



          a.button:hover 

          ------------------- 

          color: $white; /* #FFFFFF */ 

          background-color: $steel; /* #5F636A */ 



          a.button.ext span.exitDisclaimer svg.fa-external-link-alt 

          ------------------- 

          color: $white; /* #FFFFFF */ 



          a.button.button-fullwidth 

          ------------------- 

          width: 100% !important; 



          .lego-button-group 

          ------------------- 

          display: flex; 

          flex-direction: column; 



          .lego-button-group .lego-button-group-button 

          ------------------- 

          margin-bottom: 16px; 



          .lego-button-group .lego-button-group-button a.button 

          ------------------- 

          max-width: 100%;

Preview - Button Group

Find a health care professional or program

Find a supprt group or local program

How to set up an appointment

<style>
 a.button {
  color: #ffffff;
  text-decoration: none;
 }
 a.button:hover {
  color: #ffffff;
}
 a.button.ext span.exitDisclaimer svg.fa-external-link-alt {
   color: #ffffff;
}
a.button.button-fullwidth {
  width: 100% !important;
}

  .lego-button-group {
    display: flex;
    flex-direction: column;
  }
  .lego-button-group .lego-button-group-button {
    margin-bottom: 16px;
  }
  .lego-button-group .lego-button-group-button a.button {
    max-width: 100%;
  }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  function buttonGroupResize() {
    var $maxWidth = 0;

    $('.lego-button-group .lego-button-group-button a.button').each(function(){
      var $itemWidth = $(this).outerWidth(true);
          $maxWidth = Math.max($maxWidth, $itemWidth)
    });

    $(".lego-button-group .lego-button-group-button a.button").width($maxWidth);
  }

  $(document).ready(function(){
    var appHook = $('body');
    var $maxWidth = 0;

    $(".lego-button-group .lego-button-group-button a.button").each(function(index) {
      var element = $(this).clone();
      element.css({ visibility: 'hidden' });
      appHook.append(element);

      $c_width = element.outerWidth();
      if ($c_width > $maxWidth) {
          $maxWidth = $c_width;
      }
      console.log($c_width);
      $(".lego-button-group .lego-button-group-button a.button").width($maxWidth);

      element.remove();
    });
  });
</script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
   <div class="grid-row margin-bottom-2">
      <div class="grid-col-6 usa-accordion-group-header">
         <h3>
            <p>Details and Specs</p>
         </h3>
      </div>
   </div>
   <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
      <h4 class="usa-accordion__heading">
         <button class="usa-accordion__button" aria-expanded="false" aria-controls="buttonGroup-details">
         Details
         </button>
      </h4>
      <div id="buttonGroup-details" class="usa-accordion__content">
         <p style="text-align: center;">
  <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
  <a href="https://designsystem.digital.gov/components/button/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
  <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=1-3&t=wfdqLbn0DGlN3oBu-0" class="button primary-button-1" title="Link to figma Designs" aria-label="Link to figma designs" target="_blank">Designs</a>
</p>
         <h5>Description</h5>
         <p>
          The button group purpose is to group together a collection of buttons.
         </p>
         <h5>Examples</h5>
         <ul>
            <li>
               <a href="/find-support/how-to-pay-for-treatment" target="_blank">How to pay for treatment</a>
            </li>
         </ul>
      </div>
   </div>
   <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
      <h4 class="usa-accordion__heading">
         <button class="usa-accordion__button" aria-expanded="false" aria-controls="buttonGroup-specs">
         Specs
         </button>
      </h4>
      <div id="buttonGroup-specs" class="usa-accordion__content">
         <code>
           font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

          a.button </br>
          ------------------- <br />
          color: $white; /* #FFFFFF */ </br>
          text-decoration: none; </br>
          background-color: $teal; /* #1A6986 */ </br></br>

          a.button:hover </br>
          ------------------- <br />
          color: $white; /* #FFFFFF */ </br>
          background-color: $steel; /* #5F636A */ </br></br>

          a.button.ext span.exitDisclaimer svg.fa-external-link-alt </br>
          ------------------- <br />
          color: $white; /* #FFFFFF */ </br></br>

          a.button.button-fullwidth </br>
          ------------------- <br />
          width: 100% !important; </br></br>

          .lego-button-group </br>
          ------------------- <br />
          display: flex; </br>
          flex-direction: column; </br></br>

          .lego-button-group .lego-button-group-button </br>
          ------------------- <br />
          margin-bottom: 16px; </br></br>

          .lego-button-group .lego-button-group-button a.button </br>
          ------------------- <br />
          max-width: 100%; </br>
         </code>
      </div>
   </div>
</div>
<br>
<hr>
<br>

<!-- MARKUP  -->
<h3>Preview - Button Group</h3>

<div class="lego-button-group">
  <div class="lego-button-group-button">
    <a href="https://designsystem.digital.gov/components/alert/" class="button" target="_blank">
      Find a health care professional or program
    </a>
  </div>
  <div class="lego-button-group-button">
    <a href="https://designsystem.digital.gov/components/alert/" class="button" target="_blank">
      Find a supprt group or local program
    </a>
  </div>
  <div class="lego-button-group-button">
    <a href="https://designsystem.digital.gov/components/alert/" class="button" target="_blank">
      How to set up an appointment
    </a>
  </div>
</div>

Standards - Page Chooser

Details and Specs

Requirements Designs

Description

The page chooser component generates a form of radio buttons. Select a radio button and submit the form and you’ll be redirected to the page designated in the radio button’s value.

Guidance

Usability

Use the label as a target.
Users should be able to select either the text label or the radio button to select or deselect an option.
List items vertically.
Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.
Use adequate spacing.
Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.
Set default values with caution.
Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.
Don’t mix default and tile variants.
Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.
Use a logical order.
Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.

Accessibility

Customize form controls accessibly.
If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Use fieldset and legend.
Group related radio buttons together with fieldset and describe the group with legend. Use proper labels and attributes.
Each radio button should have a label tag Associate the two by matching the label for attribute to the input’s id attribute.

Examples

/find-support/health-care-or-support/professional-or-program


          font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 
 


        .usa-radio__label 

        ------------------- 

        cursor: pointer;

        display: inherit;

        font-weight: normal;

        margin-top: 0.75rem;

        padding-left: 2rem;

        position: relative;

        text-indent: -2rem; 



        input[type="submit"] 

        ------------------- 

        -webkit-appearance: none; 

        -moz-appearance: none;

        appearance: none;

        background-color: $teal /* #1A6986; */

        border: $teal /* #1A6986; */

        color: $white /* #fff; */

        cursor: pointer;

        display: inline-block;

        font-family: "Source Sans Pro",sans-serif;

        font-weight: normal;

        text-align: center;

        text-decoration: none;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        vertical-align: middle;

        white-space: normal;

        border-radius: 0.25rem;

        line-height: .9;

        padding: 0.75rem 1.25rem;

Styleguide Page Chooser

For advice on the best way to search for a health care professional or program, select the type of health insurance you have:

Private Insurance through my employer or union
Choose this if your health insurance is a benefit from your job–including if you’re on COBRA coverage (coverage you continue after you leave your job).

Private Insurance I buy directly
Choose this if you buy insurance through Healthcare.gov or other state marketplaces such as "Kynect" in Kentucky. Don’t choose this if you get insurance through your employer.

Medicare
Choose this if you’re on Medicare, which is a health insurance program for people who are 65 or older, certain younger people with disabilities, and people with End-Stage Renal Disease.

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-page-chooser">Details</button>
    </h4>
    <div id="details-page-chooser" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2900492289/Guardrails+for+Component+Layouts+-+07+06+2023" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://www.figma.com/file/m8Lisr10lMVoPwA5aiA1hZ/Page-Chooser?type=design&node-id=0-1&mode=design&t=U1QygeyP1XIF3DWn-0" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>The page chooser component generates a form of radio buttons. Select a radio button and submit the form and you’ll be redirected to the page designated in the radio button’s value.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Use the label as a target.</strong>  <br>Users should be able to select either the text label or the radio button to select or deselect an option.</br>
            <strong>List items vertically.</strong> <br>Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.</br>
            <strong>Use adequate spacing.</strong> <br> Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.</br>
            <strong> Set default values with caution.</strong> <br>Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.</br>
            <strong> Don’t mix default and tile variants.</strong>  <br>Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.</br>
            <strong> Use a logical order.</strong>  <br>Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for. </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Customize form controls accessibly.</strong><br>
            If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.<br>
            <strong> Use fieldset and legend.</strong><br>
            Group related radio buttons together with <em>fieldset </em>and describe the group with <em>legend</em>.
            <strong>Use proper labels and attributes.</strong><br>
            Each radio button should have a <em>label tag Associate the two by matching the label </em> for attribute to the <em>input’s id attribute.</em></li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li><a href="/find-support/health-care-or-support/professional-or-program " target="_blank">/find-support/health-care-or-support/professional-or-program </a></li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-page-chooser">Specs</button>
    </h4>
    <div id="specs-page-chooser" class="usa-accordion__content">
      <code>
          font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /> <br />

        .usa-radio__label <br />
        ------------------- <br />
        cursor: pointer;<br />
        display: inherit;<br />
        font-weight: normal;<br />
        margin-top: 0.75rem;<br />
        padding-left: 2rem;<br />
        position: relative;<br />
        text-indent: -2rem; <br /><br />

        input[type="submit"] <br />
        ------------------- <br />
        -webkit-appearance: none; <br />
        -moz-appearance: none;<br />
        appearance: none;<br />
        background-color: $teal /* #1A6986; */<br />
        border: $teal /* #1A6986; */<br />
        color: $white /* #fff; */<br />
        cursor: pointer;<br />
        display: inline-block;<br />
        font-family: "Source Sans Pro",sans-serif;<br />
        font-weight: normal;<br />
        text-align: center;<br />
        text-decoration: none;<br />
        -webkit-user-select: none;<br />
        -moz-user-select: none;<br />
        -ms-user-select: none;<br />
        user-select: none;<br />
        vertical-align: middle;<br />
        white-space: normal;<br />
        border-radius: 0.25rem;<br />
        line-height: .9;<br />
        padding: 0.75rem 1.25rem;<br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Styleguide Page Chooser</h3>
<div> <div data-quickedit-entity-id="block_content/548" class="desktop:grid-col-10 tablet:grid-col-12 block block-layout-builder block-inline-blockpage-chooser" data-once="quickedit" data-quickedit-entity-instance-id="0">


  <h2 class="visually-hidden" id="-menu" aria-hidden="true">For advice on the best way to search for a health care professional or program, select the type of health insurance you have: </h2>


<div class="block-content">
  <form class="lb-page-chooser" name="what-type-of-insurance-chooser" data-once="form-updated" data-drupal-form-fields="what-type-of-insurance-chooser1,what-type-of-insurance-chooser2,what-type-of-insurance-chooser3,what-type-of-insurance-chooser4,what-type-of-insurance-chooser5,what-type-of-insurance-chooser6,what-type-of-insurance-chooser7,what-type-of-insurance-chooser8,what-type-of-insurance-chooser9">
    <fieldset class="usa-fieldset">
              <legend class="usa-legend usa-legend">For advice on the best way to search for a health care professional or program, select the type of health insurance you have: </legend>
                        <div class="usa-radio" id="what-type-of-insurance-chooser1-item">
          <input class="usa-radio__input" id="what-type-of-insurance-chooser1" type="radio" name="what-type-of-insurance-chooser" value="/find-support/health-care-or-support/professional-or-program/private-insurance">
          <label class="usa-radio__label" for="what-type-of-insurance-chooser1"><strong>Private Insurance through my employer or union</strong><br>Choose this if your health insurance is a benefit from your job–including if you’re on COBRA coverage (coverage you continue after you leave your job).</label>
        </div>
                <div class="usa-radio" id="what-type-of-insurance-chooser2-item">
          <input class="usa-radio__input" id="what-type-of-insurance-chooser2" type="radio" name="what-type-of-insurance-chooser" value="/find-support/health-care-or-support/professional-or-program/your-own-insurance">
          <label class="usa-radio__label" for="what-type-of-insurance-chooser2"><strong>Private Insurance I buy directly</strong><br>Choose this if you buy insurance through Healthcare.gov or other state marketplaces such as "Kynect" in Kentucky. Don’t choose this if you get insurance through your employer.</label>
        </div>
                <div class="usa-radio" id="what-type-of-insurance-chooser3-item">
          <input class="usa-radio__input" id="what-type-of-insurance-chooser3" type="radio" name="what-type-of-insurance-chooser" value="/find-support/health-care-or-support/professional-or-program/medicare">
          <label class="usa-radio__label" for="what-type-of-insurance-chooser3"><strong>Medicare</strong><br>Choose this if you’re on Medicare, which is a health insurance program for people who are 65 or older, certain younger people with disabilities, and people with End-Stage Renal Disease.</label>
        </div>
            </fieldset>
    <button type="submit">Find out what's available</button>
  </form>
</div>
</div></div>

Find Support - Process List

Details and Specs

Requirements USWDS Specs Designs

Description

A process list displays the steps or stages of important instructions or processes.

Guidance

Usability

Be thoughtful about the number of steps. A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.
Use consistent headings. Headings should be written with a parallel structure (e.g., all start with an action verb, etc.), including consistent end punctuation, and should be short enough to fit on one line, if possible.
Add other types of content as needed. The body of each list item can be used to display additional rich text content including HTML, images, and other components like buttons, images, simple lists, links, and tables.

Accessibility

Use semantic heading levels. Use the correct heading level with the class name usa-process-list__heading in your own implementation.

Examples

/find-support/how-to-cope/how-to-ask-for-help


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 


        ul.usa-process-list 

        ----------------- 

        margin-left: 40px; 

        position: relative; 

        counter-reset: usa-numbered-list; 


        li.usa-process-list__item 

        --------------------- 

        max-width: 100%; 

        padding-bottom: 2rem;

        border-left: 0.5rem solid #d9e8f6; 

        padding-left: calc(calc((2.5rem / 2) - 0.25rem) * 2); 


        li.usa-process-list__item::before 

        ---------------------------- 

        flex-direction:row; 

        align-items:center; 

        justify-content:center; 

        height:2.5rem; 

        border-radius:99rem; 

        width:2.5rem; 

        background-color:white; 

        border:0.25rem solid #1b1b1b; 

        box-shadow:0 0 0 0.25rem white; 

        color:#1b1b1b; 

        content:counter(usa-numbered-list, decimal); 

        counter-increment:usa-numbered-list; 

        display:flex; 

        font-size:1.46rem; 

        font-weight:700; 

        height:2.5rem; 

        left:0; 

        line-height:0.9; 

        margin-top:-0.4rem; 

        position:absolute; 

        width:2.5rem; 


        h2.usa-process-list__heading 

        ------------------------- 

        font-size: 1.46rem; /23.36px; 

        line-height: 1.1 rem; /25.7px; 

        margin: 0; 

        font-weight: 700; 

        color: #1b1b1b;

Preview

Start a process

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
- Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
- Aliquam erat volutpat. Sed quis velit.
Proceed to the second step

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.
Complete the step-by-step process

Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-process-list">Details</button>
    </h4>
    <div id="details-process-list" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/process-list/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://www.figma.com/proto/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=51858-109558&t=JngssQtRwV1B1t4P-0&scaling=min-zoom&page-id=3603%3A28924" class="button primary-button-1" title="Link to figma Designs" aria-label="Link figma Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A process list displays the steps or stages of important instructions or processes.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><b>Be thoughtful about the number of steps.</b> A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.</li>
          <li><b>Use consistent headings.</b> Headings should be written with a parallel structure (e.g., all start with an action verb, etc.), including consistent end punctuation, and should be short enough to fit on one line, if possible.</li>
          <li><b>Add other types of content as needed.</b> The body of each list item can be used to display additional rich text content including HTML, images, and other components like buttons, images, simple lists, links, and tables.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><b>Use semantic heading levels.</b> Use the correct heading level with the class name <i>usa-process-list__heading</i> in your own implementation.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li><a href="https://www.samhsa.gov/find-support/how-to-cope/how-to-ask-for-help" target="_blank">/find-support/how-to-cope/how-to-ask-for-help</a></li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-process-list">Specs</button>
    </h4>
    <div id="specs-process-list" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />
        ul.usa-process-list <br/>
        ----------------- <br/>
        margin-left: 40px; <br />
        position: relative; <br/>
        counter-reset: usa-numbered-list; <br/><br/>
        li.usa-process-list__item <br/>
        --------------------- <br/>
        max-width: 100%; <br/>
        padding-bottom: 2rem;<br/>
        border-left: 0.5rem solid #d9e8f6; <br/>
        padding-left: calc(calc((2.5rem / 2) - 0.25rem) * 2); <br /><br />
        li.usa-process-list__item::before <br/>
        ---------------------------- <br />
        flex-direction:row; <br/>
        align-items:center; <br />
        justify-content:center; <br/>
        height:2.5rem; <br />
        border-radius:99rem; <br/>
        width:2.5rem; <br/>
        background-color:white; <br/>
        border:0.25rem solid #1b1b1b; <br/>
        box-shadow:0 0 0 0.25rem white; <br/>
        color:#1b1b1b; <br/>
        content:counter(usa-numbered-list, decimal); <br/>
        counter-increment:usa-numbered-list; <br/>
        display:flex; <br/>
        font-size:1.46rem; <br/>
        font-weight:700; <br/>
        height:2.5rem; <br/>
        left:0; <br/>
        line-height:0.9; <br/>
        margin-top:-0.4rem; <br/>
        position:absolute; <br />
        width:2.5rem; <br/><br />
        h2.usa-process-list__heading <br />
        ------------------------- <br />
        font-size: 1.46rem; /23.36px; <br />
        line-height: 1.1 rem; /25.7px; <br />
        margin: 0; <br />
        font-weight: 700; <br />
        color: #1b1b1b;
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div>
<ul class="usa-process-list">
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Start a process</h4>
    <p class="margin-top-05">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque.
    </p>
    <ul>
      <li>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
        ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
        lorem non turpis.
      </li>
      <li>
        Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
        condimentum.
      </li>
      <li>Aliquam erat volutpat. Sed quis velit.</li>
    </ul>
  </li>
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Proceed to the second step</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
      ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
      lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
      volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
      facilisi. Nulla libero. Vivamus pharetra posuere sapien.
    </p>
  </li>
  <li class="usa-process-list__item">
    <h4 class="usa-process-list__heading">Complete the step-by-step process</h4>
    <p>
      Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
      condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
      libero. Vivamus pharetra posuere sapien.
    </p>
  </li>
</ul>
</div>

Standards - Share Icons

Details and Specs

Requirements Designs

SAMHSA's block of clickable share icon in Header and Footer region.


       font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



      FOOTER Facebook icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $fb-color; /* #3A67B8 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      FOOTER Twitter icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $tw-color; /* #00A2F9 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      FOOTER YouTube icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $yt-color; /* #FF0000 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      FOOTER LinkedIn icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $lk-color; /* #0E76A8 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      FOOTER Instagram icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $ig-color; /* #C13584 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      FOOTER Blog icon 

      ------------------ 

      width: 38px; 

      height: 38px; 

      display: inline-block; 

      background-color: $charcoal; /* #4A4A4A */ 

      Hover: $blog-color; /* #1C7491 */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 

      margin-right: 0.5em; 

      border-radius: 3px; 



      HEADER Facebook icon 

      ------------------ 

      font-size: 26px 

      Class: fa-facebook-square 

      Color: $midnight-60; /* #617381 */ 

      Hover: $sapphire; /* #1F419A */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 



      HEADER Twitter icon 

      ------------------ 

      font-size: 26px 

      Class: fa-twitter-square 

      Color: $midnight-60; /* #617381 */ 

      Hover: $sapphire; /* #1F419A */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 



      HEADER Envelope icon 

      ------------------ 

      font-size: 26px 

      Class: fa-envelope 

      Margin-top: -2px 

      Color: $midnight-60; /* #617381 */ 

      Hover: $sapphire; /* #1F419A */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */ 



      HEADER Print icon 

      ------------------ 

      font-size: 26px 

      Class: fa-samhsa-print (custom) 

      Color: $midnight-60; /* #617381 */ 

      Hover: $sapphire; /* #1F419A */ 

      Focus: .25rem solid $vivid-blue; /* #2491ff */

Social Media Icons - Header

Social Media Icons - Footer

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
        <div class="grid-col-6 usa-accordion-group-header">

            <h3><p>Details and Specs</p></h3>
        </div>
  </div>
<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
  <button class="usa-accordion__button" aria-expanded="false" aria-controls="details-socialbuttons">Details</button>
</h4>

  <div id="details-socialbuttons" class="usa-accordion__content">
<p style="text-align: center;">
  <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
  <a href="https://www.figma.com/design/ddIzlpkIg6cHwmSfJDPjyr/SAMHSA-Design-System?node-id=966-0&t=ApRIS0LRUo2goAxv-0" class="button primary-button-1" title="Link to Figma Designs" aria-label="Link Figma Designs" target="_blank">Designs</a>
</p>
    <p>
      SAMHSA's block of clickable share icon in Header and Footer region.
    </p>
  </div>
</div>
<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
  <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="specs-socialbuttons">Specs</button>
  </h4>
  <div id="specs-socialbuttons" class="usa-accordion__content">
    <code>
       font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

      FOOTER Facebook icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $fb-color; /* #3A67B8 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      FOOTER Twitter icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $tw-color; /* #00A2F9 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      FOOTER YouTube icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $yt-color; /* #FF0000 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      FOOTER LinkedIn icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $lk-color; /* #0E76A8 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      FOOTER Instagram icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $ig-color; /* #C13584 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      FOOTER Blog icon <br/>
      ------------------ <br/>
      width: 38px; <br/>
      height: 38px; <br/>
      display: inline-block; <br/>
      background-color: $charcoal; /* #4A4A4A */ <br/>
      Hover: $blog-color; /* #1C7491 */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/>
      margin-right: 0.5em; <br/>
      border-radius: 3px; <br/><br/>

      HEADER Facebook icon <br/>
      ------------------ <br/>
      font-size: 26px <br/>
      Class: fa-facebook-square <br/>
      Color: $midnight-60; /* #617381 */ <br/>
      Hover: $sapphire; /* #1F419A */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/><br/>

      HEADER Twitter icon <br/>
      ------------------ <br/>
      font-size: 26px <br/>
      Class: fa-twitter-square <br/>
      Color: $midnight-60; /* #617381 */ <br/>
      Hover: $sapphire; /* #1F419A */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/><br/>

      HEADER Envelope icon <br/>
      ------------------ <br/>
      font-size: 26px <br/>
      Class: fa-envelope <br/>
      Margin-top: -2px <br/>
      Color: $midnight-60; /* #617381 */ <br/>
      Hover: $sapphire; /* #1F419A */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/><br/>

      HEADER Print icon <br/>
      ------------------ <br/>
      font-size: 26px <br/>
      Class: fa-samhsa-print (custom) <br/>
      Color: $midnight-60; /* #617381 */ <br/>
      Hover: $sapphire; /* #1F419A */ <br/>
      Focus: .25rem solid $vivid-blue; /* #2491ff */ <br/><br/>
    </code>
  </div>
</div>
</div>

<br />
<hr />
<br />

<!-- MARKUP -->
<h3>Social Media Icons - Header</h3>
<div class="share-block block block-samhsa-theme-block block-share-buttons-block" style="width: 100%;">
  <ul class="share-buttons" style="list-style: none;">
  <li>
    <a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href))" title="Share on Facebook">
      <svg class="svg-inline--fa fa-facebook-square" aria-hidden="true" alt="Share on Facebook" focusable="false" data-prefix="fab" data-icon="facebook-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path></svg><!-- <span class="fa fa-brands fa-facebook-square" aria-hidden="true" alt="Share on Facebook"></span> -->
    </a>
  </li>
  <li>
    <a href="#" onclick="window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(location.href))" title="Share on Twitter">
      <svg class="svg-inline--fa fa-twitter-square" aria-hidden="true" alt="Share on Twitter" focusable="false" data-prefix="fab" data-icon="twitter-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path></svg><!-- <span class="fa fa-brands fa-twitter-square" aria-hidden="true" alt="Share on Twitter"></span> -->
    </a>
  </li>
  <li>
    <a href="#" onclick="window.open('https://samhsa.us4.list-manage.com/subscribe?u=d0780dc94825e65acd61c17dc&amp;id=ee1c4b138c', '');return false;" title="Share via Email">
      <svg class="svg-inline--fa fa-envelope" aria-hidden="true" alt="Share via Email" focusable="false" data-prefix="fas" data-icon="envelope" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"></path></svg><!-- <span class="fa fas fa-envelope" aria-hidden="true" alt="Share via Email"></span> -->
    </a>
  </li>
  <li>
    <a href="#" onclick="window.print();" title="Print this page">
      <svg class="svg-inline--fa fa-samhsa-print" aria-hidden="true" alt="Print this page" focusable="false" data-prefix="fak" data-icon="samhsa-print" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="width: 1em;"><path fill="currentColor" d="M420.983 164.983H102.4a68.267 68.267 0 00-68.267 68.267v136.533h91.017V460.8h273.067v-91.017h91.016V233.25a68.267 68.267 0 00-68.25-68.267zM352.717 415.3h-182.05V301.517h182.05zm68.266-159.283a22.75 22.75 0 1122.75-22.767 22.818 22.818 0 01-22.75 22.75zM398.217 51.2H125.15v91.017h273.067z"></path></svg><!-- <span class="fak fa-samhsa-print" aria-hidden="true" alt="Print this page"></span> -->
    </a>
  </li>
</ul>
</div>

<hr style="clear:both;">

<h3>Social Media Icons - Footer</h3>
<div class="social">
  <p>
    <a class="facebook" href="https://www.facebook.com/samhsa" target="_blank" title="Facebook">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path fill="#fff"
              d="M10.612 5.099h2.096V2.583h-2.096a2.939 2.939 0 0 0-2.935 2.935v1.258H6v2.516h1.677V16h2.516V9.292h2.096l.419-2.516h-2.516V5.518a.426.426 0 0 1 .42-.419z"></path>
      </svg>
      <span class="visually-hidden">Visit the SAMHSA Facebook page</span>
    </a>

    <a class="twitter" href="https://twitter.com/samhsagov" target="_blank" title="Twitter">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path fill="#fff"
              d="M14.002 4.879c-.41.183-.852.306-1.314.36a2.298 2.298 0 0 0 1.007-1.267 4.603 4.603 0 0 1-1.454.556 2.29 2.29 0 0 0-1.672-.721 2.289 2.289 0 0 0-2.23 2.81 6.503 6.503 0 0 1-4.72-2.393 2.286 2.286 0 0 0-.309 1.15c0 .794.403 1.496 1.018 1.905a2.31 2.31 0 0 1-1.039-.285v.029c0 1.11.789 2.036 1.837 2.245a2.298 2.298 0 0 1-1.035.04 2.296 2.296 0 0 0 2.139 1.591 4.591 4.591 0 0 1-3.392.948 6.475 6.475 0 0 0 3.512 1.029c4.211 0 6.516-3.49 6.516-6.516 0-.1-.002-.198-.006-.296a4.63 4.63 0 0 0 1.142-1.185z"></path>
      </svg>
      <span class="visually-hidden">Visit SAMHSA on Twitter</span>
    </a>

    <a class="youtube" href="https://www.youtube.com/samhsa/" target="_blank" title="Youtube">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <path fill="#FFF"
              d="M14.02 5.227s-.119-.843-.487-1.213c-.465-.487-.986-.49-1.225-.518-1.709-.125-4.276-.125-4.276-.125h-.004s-2.566 0-4.276.125c-.24.03-.76.032-1.226.519-.368.37-.484 1.213-.484 1.213s-.121.989-.121 1.98v.927c0 .989.121 1.98.121 1.98s.119.843.484 1.213c.465.487 1.077.471 1.349.523.979.093 4.157.121 4.157.121s2.569-.005 4.279-.127c.239-.028.759-.031 1.225-.518.368-.37.487-1.213.487-1.213s.121-.989.121-1.98v-.928a18.526 18.526 0 0 0-.124-1.979zm-7.254 4.03V5.821l3.302 1.724-3.302 1.712z"></path>
      </svg>
      <span class="visually-hidden">Visit the SAMHSA YouTube channel</span>
    </a>
  </p>
  <p>
    <a class="linkedin"
       href="https://www.linkedin.com/company/substance-abuse-and-mental-health-services-administration/"
       target="_blank" title="LinkedIn">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -3 33 33">
        <path fill="#FFF"
              d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"></path>
      </svg>
      <span class="visually-hidden">Visit SAMHSA on LinkedIn</span>
    </a>

    <a class="instagram" href="https://www.instagram.com/samhsagov/" target="_blank" title="Instagram">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 34 34">
        <path fill="#FFF"
              d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
      </svg>
      <span class="visually-hidden">Visit SAMHSA on Instagram</span>
    </a>

    <a class="blog" href="https://www.samhsa.gov/blog" target="_blank" title="SAMHSA's Blog">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.667 66.667">
        <path fill="#FFF"
              d="M33.752 8.904c-11.183 0-20.248 6.489-20.248 14.493 0 3.77 2.012 7.205 5.309 9.783l-3.68 8.056 10.515-4.554c2.482.776 5.222 1.208 8.103 1.208C44.935 37.89 54 31.401 54 23.396S44.935 8.904 33.752 8.904zm-8.224 16.705a1.9 1.9 0 1 1-.001-3.801h.002a1.9 1.9 0 0 1-.001 3.801zm8.192.008a1.9 1.9 0 1 1-.001-3.801h.002a1.9 1.9 0 0 1-.001 3.801zm8.204 0a1.9 1.9 0 1 1-.001-3.801h.002a1.9 1.9 0 0 1-.001 3.801zM13.366 47.536c.709-.142 1.83-.249 2.968-.249 1.624 0 2.669.267 3.453.871.653.462 1.045 1.172 1.045 2.114 0 1.154-.802 2.167-2.128 2.629v.036c1.195.284 2.595 1.226 2.595 3.003 0 1.031-.429 1.813-1.064 2.398-.878.764-2.295 1.119-4.349 1.119a19.96 19.96 0 0 1-2.52-.142V47.536zm1.624 4.904h1.474c1.717 0 2.725-.853 2.725-2.008 0-1.403-1.12-1.954-2.763-1.954-.747 0-1.176.053-1.437.107l.001 3.855zm0 5.739c.317.054.784.071 1.362.071 1.68 0 3.23-.587 3.23-2.328 0-1.634-1.474-2.31-3.247-2.31H14.99v4.567zm8.006-10.803h1.546v10.678h5.117v1.297h-6.663V47.376zm17.88 5.863c0 4.122-2.49 6.308-5.528 6.308-3.144 0-5.351-2.452-5.351-6.077 0-3.803 2.349-6.29 5.528-6.29 3.25.001 5.351 2.507 5.351 6.059zm-9.235.196c0 2.559 1.377 4.851 3.797 4.851 2.437 0 3.814-2.257 3.814-4.975 0-2.38-1.236-4.868-3.797-4.868-2.544 0-3.814 2.362-3.814 4.992zm20.643 5.384c-.693.249-2.061.657-3.678.657-1.813 0-3.305-.462-4.478-1.582-1.031-.995-1.67-2.594-1.67-4.46.018-3.572 2.47-6.183 6.485-6.183 1.385 0 2.47.302 2.985.551l-.373 1.262c-.639-.284-1.439-.515-2.647-.515-2.914 0-4.815 1.813-4.815 4.815 0 3.038 1.83 4.833 4.619 4.833 1.013 0 1.706-.142 2.061-.32v-3.572h-2.434v-1.244h3.944v5.758h.001z"></path>
      </svg>
      <span class="visually-hidden">SAMHSA Blog</span>
    </a>
  </p>
</div>

Find Support - Quotebox

Details and Specs

Description

The Quote Box component allows you include a quote with a graphical treatment to your website.

Examples

/find-support/health-care-or-support/how-to-set-up-an-appointment


        font-family: "Source Sans Pro",sans-serif; 

        font-color: $charcoal; /* #4A4A4A */ 

        font-size: 1.125rem; /* 18px / $base-font-size */ 

        line-height: 1.5; /* 25.44px */ 



        .quote-block_container 

        ------------------- 

        display: flex; 

        column-gap: 2.5rem; 

        background: -webkit-gradient(linear, left top, left bottom, from($white), color-stop($white) /* #ffffff */, to($mist)) /* #eeeeee */; 

        opacity: 1; 

        margin-bottom: 1rem; 

        padding: 2rem 4rem; 

        border-radius: 15px; 

        background-image: linear-gradient(to bottom, $white, $mist); 



        .quote-block_container .quote-block_media 

        ------------------- 

        display: block; 



        .quote-block_container .quote-block_media .field--name-field-cpnt-media 

        ------------------- 

        width: 150px; 

        height: 150px; 

        display: flex; 

        align-items: center; 

        justify-content: center; 

        background-color: #e5e5e5; 



        .quote-block_container .quote-block_media .field--name-field-cpnt-media img 

        ------------------- 

        width: 100px;
        height: 100px;
        background-color: $black /* #000000 */; 



        .quote-block_container .quote-block_media .field--name-field-cpnt-image-caption 

        ------------------- 

        width: 150px; 

        height: auto; 



        .quote-block_container .quote-block_body 

        ------------------- 

        display: flex; 

        flex-direction: column; 

        background-image: url(/themes/custom/samhsa_uswds_base/images/quote-left-solid.png); 

        background-repeat: no-repeat; 

        background-position-y: center; 

        background-position-x: center; 



        .quote-block_container .quote-block_body .field--name-field-cpnt-text-link 

        ------------------- 

        margin-top: 3rem; 



        .quote-v2-block_container 

        ------------------- 

        display: flex; 

        column-gap: 0.5rem; 

        margin-bottom: 1rem; 

        padding: 2rem 3rem; 



        .quote-v2-block_container .quote-block_media 

        ------------------- 

        display: block; 



        .quote-v2-block_container .quote-block_media .field--name-field-cpnt-media 

        ------------------- 

        width: 115px; 

        height: 115px; 

        display: flex; 



        .quote-v2-block_container .quote-block_media .field--name-field-cpnt-media img 

        ------------------- 

        width: 115px; 

        height: 115px; 

        border-radius: 50%; 



        .quote-v2-block_container .quote-block_body 

        ------------------- 

        display: flex; 

        flex-direction: column; 

        border-left: 3px solid $black; /* #000000 */ 

        padding-left: 16px; 



        .quote-v2-block_container .quote-block_body .field--name-body 

        ------------------- 

        font-weight: bold; 



        .quote-v2-block_container .quote-block_body .field--name-body p:before

        ------------------- 

        content: url(/themes/custom/samhsa_uswds_base/images/quoteLeft.svg); 

        width: 24px; 

        height: 18px; 

        flex-grow: 0; 

        display: inline-block; 

        margin-right: 10px; 

        vertical-align: sub; 


        .quote-v2-block_container .quote-block_body .field--name-body p:before

        ------------------- 

        content: "\\201d";

Preview

Cicero (106 BC - 43BC)

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”

Cicero

New Quote with Image

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”

Quote Author

Quote Source Link

New Quote no Image

Quote Author

Quote Source Link

New Quote no Image no link

Quote Author

<!-- CUSTOM STYLES  -->
<style>
</style>
<!-- CUSTOM SCRIPTS  -->
<script></script>
<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="quotebox-details"> Details </button>
    </h4>
    <div id="quotebox-details" class="usa-accordion__content">

      <h5>Description</h5>
      <p> The Quote Box component allows you include a quote with a graphical treatment to your website.</p>

      <h5>Examples</h5>
        <ul>
          <li>
            <a href="/find-support/health-care-or-support/how-to-set-up-an-appointment" target="_blank">/find-support/health-care-or-support/how-to-set-up-an-appointment</a>
          </li>
        </ul>
    </div>
  </div>
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="quotebox-specs"> Specs </button>
    </h4>
    <div id="quotebox-specs" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
        font-color: $charcoal; /* #4A4A4A */ <br />
        font-size: 1.125rem; /* 18px / $base-font-size */ <br />
        line-height: 1.5; /* 25.44px */ <br /><br />

        .quote-block_container <br />
        ------------------- <br />
        display: flex; <br />
        column-gap: 2.5rem; <br />
        background: -webkit-gradient(linear, left top, left bottom, from($white), color-stop($white) /* #ffffff */, to($mist)) /* #eeeeee */; <br />
        opacity: 1; <br />
        margin-bottom: 1rem; <br />
        padding: 2rem 4rem; <br />
        border-radius: 15px; <br />
        background-image: linear-gradient(to bottom, $white, $mist); <br /><br />

        .quote-block_container .quote-block_media <br />
        ------------------- <br />
        display: block; <br /><br />

        .quote-block_container .quote-block_media .field--name-field-cpnt-media <br />
        ------------------- <br />
        width: 150px; <br />
        height: 150px; <br />
        display: flex; <br />
        align-items: center; <br />
        justify-content: center; <br />
        background-color: #e5e5e5; <br /><br />

        .quote-block_container .quote-block_media .field--name-field-cpnt-media img <br />
        ------------------- <br />
        width: 100px;
        height: 100px;
        background-color: $black /* #000000 */; <br /><br />

        .quote-block_container .quote-block_media .field--name-field-cpnt-image-caption <br />
        ------------------- <br />
        width: 150px; <br />
        height: auto; <br /><br />

        .quote-block_container .quote-block_body <br />
        ------------------- <br />
        display: flex; <br />
        flex-direction: column; <br />
        background-image: url(/themes/custom/samhsa_uswds_base/images/quote-left-solid.png); <br />
        background-repeat: no-repeat; <br />
        background-position-y: center; <br />
        background-position-x: center; <br /><br />

        .quote-block_container .quote-block_body .field--name-field-cpnt-text-link <br />
        ------------------- <br />
        margin-top: 3rem; <br /><br />

        .quote-v2-block_container <br />
        ------------------- <br />
        display: flex; <br />
        column-gap: 0.5rem; <br />
        margin-bottom: 1rem; <br />
        padding: 2rem 3rem; <br /><br />

        .quote-v2-block_container .quote-block_media <br />
        ------------------- <br />
        display: block; <br /><br />

        .quote-v2-block_container .quote-block_media .field--name-field-cpnt-media <br />
        ------------------- <br />
        width: 115px; <br />
        height: 115px; <br />
        display: flex; <br /><br />

        .quote-v2-block_container .quote-block_media .field--name-field-cpnt-media img <br />
        ------------------- <br />
        width: 115px; <br />
        height: 115px; <br />
        border-radius: 50%; <br /><br />

        .quote-v2-block_container .quote-block_body <br />
        ------------------- <br />
        display: flex; <br />
        flex-direction: column; <br />
        border-left: 3px solid $black; /* #000000 */ <br />
        padding-left: 16px; <br /><br />

        .quote-v2-block_container .quote-block_body .field--name-body <br />
        ------------------- <br />
        font-weight: bold; <br /><br />

        .quote-v2-block_container .quote-block_body .field--name-body p:before<br />
        ------------------- <br />
        content: url(/themes/custom/samhsa_uswds_base/images/quoteLeft.svg); <br />
        width: 24px; <br />
        height: 18px; <br />
        flex-grow: 0; <br />
        display: inline-block; <br />
        margin-right: 10px; <br />
        vertical-align: sub; <br />

        .quote-v2-block_container .quote-block_body .field--name-body p:before<br />
        ------------------- <br />
        content: "\\201d"; <br /><br />

      </code>
    </div>
  </div>
</div>
<br />
<hr />
<br />
<!-- MARKUP  -->
<div class="usa-accordion">
  <!-- NON-USWDS - SAMHSA CUSTOM EXPAND/COLLAPSE FUNCTION  -->
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>Preview</h3>
    </div>
    <div class="quote-block_container">
      <div class="quote-block_media">
          <div class="field field--name-field-cpnt-media field--type-image field--label-hidden field__item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Bust_of_Cicero_%281st-cent._BC%29_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg/1280px-Bust_of_Cicero_%281st-cent._BC%29_-_Palazzo_Nuovo_-_Musei_Capitolini_-_Rome_2016.jpg" alt="" loading="lazy" typeof="foaf:Image">
          </div>
          <div class="field field--name-field-cpnt-image-caption field--type-string-long field--label-hidden field__item">Cicero (106 BC - 43BC)</div>
      </div>
      <div class="quote-block_body">
        <h2 class="field field--name-field-cpnt-qbox-quote field--type-string-long field--label-hidden field__item">“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”</h2>
         <div class="field field--name-field-cpnt-text-link field--type-link field--label-hidden field__item"><a href="http://www.samhsa.gov">Cicero</a></div>
      </div>
    </div>
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>New Quote with Image</h3>
    </div>
    <div class="quote-v2-block_container">
   <div class="quote-block_media">
      <div class="field field--name-field-cpnt-media field--type-image field--label-hidden field__item">
         <img src="../themes/custom/samhsa_uswds_base/images/user-profile.jpg" width="180" height="225" alt="placeholder" loading="lazy" typeof="foaf:Image">
      </div>
   </div>
   <div class="quote-block_body">
      <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
         <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”</p>
      </div>
      <div class="field field--name-field-by-line field--type-string field--label-hidden field__item">Quote Author</div>
      <div class="field field--name-field-cpnt-text-link field--type-link field--label-hidden field__item"><a href="http://www.samhsa.gov">Quote Source Link</a></div>
   </div>
    </div>
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>New Quote no Image</h3>
    </div>
    <div class="quote-v2-block_container">
   <div class="quote-block_body">
      <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
         <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”</p>
      </div>
      <div class="field field--name-field-by-line field--type-string field--label-hidden field__item">Quote Author</div>
      <div class="field field--name-field-cpnt-text-link field--type-link field--label-hidden field__item"><a href="http://www.samhsa.gov">Quote Source Link</a></div>
   </div>
    </div>
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>New Quote no Image no link</h3>
    </div>
    <div class="quote-v2-block_container">
   <div class="quote-block_body">
      <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
         <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ”</p>
      </div>
      <div class="field field--name-field-by-line field--type-string field--label-hidden field__item">Quote Author</div>
   </div>
    </div>
  </div>
</div>

Standards - Sidebar Nav

Details and Specs

Requirements USWDS Specs Designs

Description

Hierarchical, vertical navigation to place at the side of a page.

Guidance

Usability

Show the current page. Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.
Keep the navigation links short. They can be shorter derivatives of page titles themselves.
Always test your navigation. 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

The width of the current menu item’s highlight border is set with the $theme-sidenav-current-border-width variable.

Examples

Example List Goes Here


                  font-family: "Source Sans Pro",sans-serif; 

                  font-color: $charcoal; /* #4A4A4A */ 

                 DESKTOP: font-size: 1.06rem; /* 16.96px /  

                 MOBILE: font-size: 1rem; /* 16px /  

                 line-height: 1.5; /* 25.44px */ 

                 font-weight: 400; 
 


                Left Navigation Header 

                ------------------- 

                Background color: crimson; /* #CD3835 */ 

                Font size: H2 /* 16.96px */ 

                Font color: white; /* #FFFFFF */ 

                Link on hover: underline

                


                First Level Navigation Body 

                ------------------- 

                Background color: #CDCDCD /* light-gray */ 

                Background color on hover: #DADADA /* holy-gray */ 

                Font size: 16.96px 

                Font color: #000000 /* black */ 

                Link on hover: underline 

                Active menu item: bold 

                Border top: 1px solid #FFFFFF /* white */ 

                


                Second Level Navigation Body 

                ------------------- 

                Background color: #EEEEEE /* mist */ 

                Font size: 16.96px 

                Font color: #000000 /* black */ 

                Link on hover: underline 

                Active menu item: bold

                


                Exit Disclaimer SVG 

                ------------------- 

                Color: #1F419A /* sapphire */ 

                Color on hover: #005EA2 /* $royalblue */

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
<div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3>
    </div>
</div>

    <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="sidebar-details">Details</button>
        </h4>

        <div id="sidebar-details" class="usa-accordion__content">
            <p style="text-align: center;">
              <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
              <a href="https://designsystem.digital.gov/components/side-navigation/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
              <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/613a66b3750e52b9717eda24" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
            </p>

            <h5>Description</h5>
            <p>Hierarchical, vertical navigation to place at the side of a page.</p>

            <h5>Guidance</h5>
                <h6>Usability</h6>
                <ul>
                    <li>Show the current page. Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.</li>
                    <li>Keep the navigation links short. They can be shorter derivatives of page titles themselves.</li>
                    <li>Always test your navigation. 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.</li>
                </ul>

                <h6>Accessibility</h6>
                <ul>
                    <li>The width of the current menu item’s highlight border is set with the $theme-sidenav-current-border-width variable.</li>
                </ul>

            <h5>Examples</h5>
            <ul>
                <li>Example List Goes Here </li>
            </ul>
        </div>
    </div>

    <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button" aria-expanded="false" aria-controls="sidebar-specs">
                Specs
            </button>
        </h4>
        <div id="sidebar-specs" class="usa-accordion__content">
            <code>
                  font-family: "Source Sans Pro",sans-serif; <br />
                  font-color: $charcoal; /* #4A4A4A */ <br />
                 DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
                 MOBILE: font-size: 1rem; /* 16px /  <br />
                 line-height: 1.5; /* 25.44px */ <br />
                 font-weight: 400; <br /> <br />

                Left Navigation Header <br />
                ------------------- <br />
                Background color: crimson; /* #CD3835 */ <br />
                Font size: H2 /* 16.96px */ <br />
                Font color: white; /* #FFFFFF */ <br />
                Link on hover: underline<br />
                <br />

                First Level Navigation Body <br />
                ------------------- <br />
                Background color: #CDCDCD /* light-gray */ <br />
                Background color on hover: #DADADA /* holy-gray */ <br />
                Font size: 16.96px <br />
                Font color: #000000 /* black */ <br />
                Link on hover: underline <br />
                Active menu item: bold <br />
                Border top: 1px solid #FFFFFF /* white */ <br />
                <br />

                Second Level Navigation Body <br />
                ------------------- <br />
                Background color: #EEEEEE /* mist */ <br />
                Font size: 16.96px <br />
                Font color: #000000 /* black */ <br />
                Link on hover: underline <br />
                Active menu item: bold<br />
                <br />

                Exit Disclaimer SVG <br />
                ------------------- <br />
                Color: #1F419A /* sapphire */ <br />
                Color on hover: #005EA2 /* $royalblue */
            </code>
        </div>
    </div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<div class="grid-row grid-gap">
    <div class="tablet:grid-col-4 margin-bottom-4 tablet:margin-bottom-0">
        <nav aria-label="left navigation menu" class="side-menu">
            <h2>Section Link</h2>
            <ul class="usa-sidenav">
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
                <li class="usa-sidenav__item menu-item--active-trail">
                    <a href="#Sandbox-Template">
                        Current link
                    </a>
                </li>
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="tablet:grid-col-4 margin-bottom-4 tablet:margin-bottom-0">
        <nav aria-label="left navigation menu" class="side-menu">
            <h2>Section Link</h2>
            <ul class="usa-sidenav">
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
                <li class="usa-sidenav__item menu-item--active-trail">
                    <a href="#Sandbox-Template">
                        Current link
                    </a>
                    <ul class="usa-sidenav__sublist">
                        <li class="usa-sidenav__item">
                            <a href="#Sandbox-Template">
                                Child link
                            </a>
                        </li>
                        <li class="usa-sidenav__item menu-item--active-trail">
                            <a href="#Sandbox-Template">
                                Current Child link
                            </a>
                        </li>
                        <li class="usa-sidenav__item">
                            <a href="#Sandbox-Template">
                                Child link
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <div class="tablet:grid-col-4 margin-bottom-4 tablet:margin-bottom-0">
        <nav aria-label="left navigation menu" class="side-menu">
            <h2>Section Link</h2>
            <ul class="usa-sidenav">
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
                <li class="usa-sidenav__item menu-item--active-trail">
                    <a href="#Sandbox-Template">
                        Current link
                    </a>
                    <ul class="usa-sidenav__sublist">
                        <li class="usa-sidenav__item">
                            <a href="#Sandbox-Template">
                                Child link
                            </a>
                        </li>
                        <li class="usa-sidenav__item menu-item--active-trail">
                            <a href="#Sandbox-Template">
                                Current Child link
                            </a>
                            <ul class="usa-sidenav__sublist">
                                <li class="usa-sidenav__item">
                                    <a href="#Sandbox-Template">
                                        Grandchild link
                                    </a>
                                </li>
                                <li class="usa-sidenav__item menu-item--active-trail">
                                    <a href="#Sandbox-Template">
                                        Current Grandchild link
                                    </a>
                                </li>
                                <li class="usa-sidenav__item">
                                    <a href="#Sandbox-Template">
                                        Grandchild link
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="usa-sidenav__item">
                            <a href="#Sandbox-Template">
                                Child link
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="usa-sidenav__item">
                    <a href="#Sandbox-Template">
                        Parent link
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

Standards - Summary Box

Details and Specs

Requirements USWDS Specs Designs

Description

Usability

Select, split, and sequence to prioritize critical information. First, select the most important information from the page. Then, split up the information into logical parts. Finally, sequence the parts in an order that makes sense to the reader.
Link to more information. We suggest linking to further reading on the same page using an anchor link. To do this without confusing your readers, do your best to explain where the link will take them in the hyperlinked text and reiterate it with the subsequent heading.
Use smooth scrolling. Show the reader that they haven’t left the page with smooth scrolling. If you opt for smooth scrolling, ensure the focus state is transferred appropriately.
Give the user a way to get back. Provide a “back to top” link or sticky internal navigation.

Accessibility

Write for your audience. The summary box is meant to make it easier to understand page content. Don’t leave readers without access to critical information. Check your writing level to ensure it’s easy to read. Search for “readability level tool” to find tools that assess reading level.

Examples

/workplace/faqs-federal-drug-testing


          font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 
 


        .usa-summary-box 

        ------------------- 

        background-color: $cerulean-20; /* #DAEAF6 */ 

        border-radius: .25rem; 

        border: 1px solid $cerulean; /* #5191CD */ 

        color: $charcoal; /* #4A4A4A */ 

        margin-top: 1rem; 

        margin-bottom: 1.5rem; 

        padding: 1.5rem; 

        position: relative; 



        .usa-summary-box__heading 

        ------------------- 

        font-size: 1.46rem; /* 23.36px */ 

        line-height: 1.1; /* 25.69px */ 

        margin-top: 0; 

        margin-bottom: 0.5rem; 



        .usa-summary-box__text 

        ------------------- 

        margin-bottom: 0; margin-top: 0; 



        .usa-summary-box .usa-list:last-child 

        ------------------- 

        margin-bottom: 0;

Key information

If you are under a winter storm warning, find shelter right away. This is an internal link. This is an external link.
Sign up for your community’s warning system. This is an internal link. This is an external link.
Learn the signs of, and basic treatments for, frostbite and hypothermia. This is an internal link. This is an external link.
Gather emergency supplies for your home and your car.This is an internal link. This is an external link.

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3><p>Details and Specs</p></h3> </div>
  </div>

  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="details-summarybox">
        Details
      </button>
    </h4>
    <div id="details-summarybox" class="usa-accordion__content">
      <p style="text-align: center;">
  <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/1920467068/Summary+Box+USWDS" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
  <a href="https://designsystem.digital.gov/components/summary-box/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
  <a href="https://www.figma.com/file/KuBOIHTYc06K0sCIQ7Oyw5/Summary-Box-Component?type=design&node-id=1-1118&mode=design&t=DVR69B3uveK4Tc8v-0" class="button primary-button-1" title="Link to Figma" aria-label="Link XD Designs" target="_blank">Designs</a>
</p>
      <h5>Description</h5>
      <h6 id="usability-guidance-accordion"><a id="section_8" class="usa-anchor"></a>Usability</h6>
                <ul class="usa-content-list">
                    <li>
                        Select, split, and sequence to prioritize critical information. First, select the most important information from the page. Then, split up the information into logical parts. Finally, sequence the parts in an order
                        that makes sense to the reader.
                    </li>
                    <li>
                        Link to more information. We suggest linking to further reading on the same page using an anchor link. To do this without confusing your readers, do your best to explain where the link will take them in the
                        hyperlinked text and reiterate it with the subsequent heading.
                    </li>
                    <li>Use smooth scrolling. Show the reader that they haven’t left the page with smooth scrolling. If you opt for smooth scrolling, ensure the focus state is transferred appropriately.</li>
                    <li>Give the user a way to get back. Provide a “back to top” link or sticky internal navigation.</li>
                </ul>

                <h6 id="accessibility-accordion" class="usa-heading">
                    <a id="section_9" class="usa-anchor"></a>
                    Accessibility
                </h6>
                <ul class="usa-content-list">
                    <li>
                        Write for your audience. The summary box is meant to make it easier to understand page content. Don’t leave readers without access to critical information. Check your writing level to ensure it’s easy to read. Search
                        for “readability level tool” to find tools that assess reading level.
                    </li>
                </ul>

      <h5>Examples</h5>
      <ul>
          <li>
              <a href="/workplace/faqs-federal-drug-testing" target="_blank">/workplace/faqs-federal-drug-testing</a>
          </li>
      </ul>
    </div>
  </div>

  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <button class="usa-accordion__button" aria-expanded="false" aria-controls="specs-summarybox">
        Specs
      </button>
    </h4>
    <div id="specs-summarybox" class="usa-accordion__content">
      <code>
          font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /> <br />

        .usa-summary-box <br />
        ------------------- <br />
        background-color: $cerulean-20; /* #DAEAF6 */ <br />
        border-radius: .25rem; <br />
        border: 1px solid $cerulean; /* #5191CD */ <br />
        color: $charcoal; /* #4A4A4A */ <br />
        margin-top: 1rem; <br />
        margin-bottom: 1.5rem; <br />
        padding: 1.5rem; <br />
        position: relative; <br /><br />

        .usa-summary-box__heading <br />
        ------------------- <br />
        font-size: 1.46rem; /* 23.36px */ <br />
        line-height: 1.1; /* 25.69px */ <br />
        margin-top: 0; <br />
        margin-bottom: 0.5rem; <br /><br />

        .usa-summary-box__text <br />
        ------------------- <br />
        margin-bottom: 0; margin-top: 0; <br /><br />

        .usa-summary-box .usa-list:last-child <br />
        ------------------- <br />
        margin-bottom: 0; <br />
        </code>
    </div>
  </div>
</div>

<br><hr><br>

<!-- MARKUP  -->
<div
  class="usa-summary-box"
  role="region"
  aria-labelledby="summary-box-key-information"
>
  <div class="usa-summary-box__body">
    <h3 class="usa-summary-box__heading" id="summary-box-key-information">
      Key information
    </h3>
    <div class="usa-summary-box__text">
      <ul class="usa-list">
        <li>
          If you are under a winter storm warning,
          <a href="javascript:void(0);"
            >find shelter</a
          >
          right away. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </li>
        <li>
          Sign up for
          <a href="javascript:void(0);"
            >your community’s warning system</a
          >. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </li>
        <li>
          Learn the signs of, and basic treatments for,
          <a href="javascript:void(0);"
            >frostbite</a
          >
          and
          <a href="javascript:void(0);"
            >hypothermia</a
          >. This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </li>
        <li>
          Gather emergency supplies for your
          <a href="javascript:void(0);">home</a>
          and your
          <a href="javascript:void(0);">car</a>.This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
        </li>
      </ul>
    </div>
  </div>
</div>

Guidelines - Emergency Alert

Details and Specs

Requirements USWDS Specs Designs

Description

This is a custom set of Alerts based from USWDS. An alert keeps users informed of important and sometimes time-sensitive changes.

An alert keeps users informed of important and sometimes time-sensitive changes.

Guidance

Usability

Consider next steps. 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. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human-readable language; avoid jargon and computer code.
Be polite. Be polite in error messages — don’t blame the user.
Alerts are an opportunity. Users will read a message that helps them resolve an error even if they generally won’t read documentation; include some educational material in your error message.
Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.
Allow a user to dismiss a notification wherever appropriate.
Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.

Accessibility

Don’t visually hide alert messages 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.
Use the proper ARIA role. The ARIA role attribute can notify assistive technologies of time-sensitive and important messages. To elevate the importance of the alert, choose the appropriate role from the ARIA roles table and add it to the .usa-alert element.

Examples


            font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



            .usa-alert.usa-alert--emergency 

            ------------------- 

            background: #FFD7D6 

            border-left-color: $russet; /* #D54309 

            color: $white; /* #FFF */ 

            mask: "usa-icons/error.svg"; 



            .usa-alert.usa-alert--emergency a:link 

            ------------------- 

            color: $white; /* #FFF */ 


            &hover color: $offwhite; /* #E6E6E6

Alert - Emergency Type - Default Size - Icon

Lorem ipsum dolor sit amet, This is an internal link. This is an external link.

<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
        <div class="grid-col-6 usa-accordion-group-header">
            <h3><p>Details and Specs</p></h3>
        </div>
  </div>
<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">
  <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
  <button class="usa-accordion__button" aria-expanded="false" aria-controls="details-emergency-alerts">Details</button>
</h4>

<div id="details-emergency-alerts" class="usa-accordion__content">
  <div style="text-align:center;">
    <a href="https://ocwebteam.atlassian.net/browse/OCWT-7939" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
    <a href="https://designsystem.digital.gov/components/alert/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
    <a href="https://www.figma.com/file/VYaATUlvcYKohEzn5Z7WZa/Emergency-Alert?node-id=139%3A35&mode=dev" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
  </div>

  <h5>Description</h5>
        <p>This is a custom set of Alerts based from USWDS. An alert keeps users informed of important and sometimes time-sensitive changes.</p>
        <p>An alert keeps users informed of important and sometimes time-sensitive changes.</p>

  <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Consider next steps. 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. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human-readable language; avoid jargon and computer code.</li>
          <li>Be polite. Be polite in error messages — don’t blame the user.</li>
          <li>Alerts are an opportunity. Users will read a message that helps them resolve an error even if they generally won’t read documentation; include some educational material in your error message.</li>
          <li>Don’t overdo it. Too many notifications will either overwhelm or annoy the user and are likely to be ignored.</li>
          <li>Allow a user to dismiss a notification wherever appropriate.</li>
          <li>Understand the user’s context. Don’t include notifications that aren’t related to the user’s current goal.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Don’t visually hide alert messages 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.</li>
          <li>Use the proper ARIA role. The ARIA role attribute can notify assistive technologies of time-sensitive and important messages. To elevate the importance of the alert, choose the appropriate role from the ARIA roles table and add it to the .usa-alert element.</li>
        </ul>

  <h5>Examples</h5>

</div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
            <button class="usa-accordion__button" aria-expanded="false" aria-controls="emergency-alerts-specs">Specs</button>
        </h4>
        <div id="emergency-alerts-specs" class="usa-accordion__content">
          <code>
            font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

            .usa-alert.usa-alert--emergency <br/>
            ------------------- <br />
            background: #FFD7D6 <br/>
            border-left-color: $russet; /* #D54309 <br/>
            color: $white; /* #FFF */ <br/>
            mask: "usa-icons/error.svg"; <br/><br/>

            .usa-alert.usa-alert--emergency a:link <br/>
            ------------------- <br />
            color: $white; /* #FFF */ <br/><br/>
            &hover color: $offwhite; /* #E6E6E6 <br/>

          </code>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<!--MARKUP STARTS HERE-->
<div class="usa-alert usa-alert--emergency usa-alert--slim clearfix samhsa">
  <div class="usa-alert__body">
    <h4 class="usa-alert__heading">Alert - Emergency Type - Default Size - Icon</h4>
    <p class="usa-alert__text">
        Lorem ipsum dolor sit amet,&nbsp;This is an <a href="/styleguide/paragraphs">internal link</a>. This is an <a href="https://www.google.com/">external link</a>.
      </p>
  </div>
</div>
<!--MARKUP ENDS HERE-->

Guidelines - Float image with text wrap

Unordered list item
Unordered list item
Unordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

<style>
  .imagefloat-img img {
    float: left;
    margin: 5px 25px 5px 5px;
  }

  .imagefloat-text {
    text-align: justify;
  }

  .imagefloat-text .usa-list {
    list-style-position:inside;
    text-indent: 1em;
  }

  .imagefloat-text .usa-button {
    margin-bottom: 1em;
  }
</style>

<!--MARKUP STARTS HERE-->
<div class="grid-row grid-gap">
  <div class="mobile-lg:grid-col-12">
    <div class="imagefloat-img">
      <img src="http://placehold.it/200x200" alt="Placeholder Image">
    </div>
    <div class="imagefloat-text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <ul class="usa-list">
        <li>Unordered list item</li>
        <li>Unordered list item</li>
        <li>Unordered list item</li>
      </ul>
      <button class="usa-button">Lorem Ipsum Dolor</button>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>
  </div>
</div>
<!--MARKUP ENDS HERE-->

In Development - Accordion - Horizontal

Details and Specs

Requirements Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .sampleclass 

        ------------------- 

        samplestyle: samplestyle;

Preview

Markup Goes Here

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-accordion-horizontal">Details</button>
    </h4>
    <div id="details-accordion-horizontal" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/642b42d9db1e7c754ab86e2b" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-accordion-horizontal">Specs</button>
    </h4>
    <div id="specs-accordion-horizontal" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .sampleclass <br />
        ------------------- <br />
        samplestyle: samplestyle; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here </div>

Standards - Tables

Details and Specs

Requirements USWDS Specs Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here

Specs Goes Here

Normal Table:

Name	Title of Employee within Company	Hire Date	Number	Description
Bob Barker	Web Developer	05/19/2014	00234	Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.
Pat Sajak	Concierge	02/24/2011	003455	Dui purus, eleifend vel, consequat non, dictum porta, nulla.
Steve Harvey	Consultant	10/19/2013	43223	Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.
Alex Trebek	Mechanic	01/09/2016	00345234225	Dui purus, eleifend vel, consequat non, dictum porta, nulla.
Chuck Woolery	Makeup	01/19/1978	4322343223	Eleifend vel.
Bob Eubanks	Sales	12/09/1999	003455	Dui purus, eleifend vel, consequat non, dictum porta, nulla. Dui purus, eleifend vel, consequat non, dictum porta, nulla.
Regis Philbin	Intern	01/19/2013	43223	Eleifend vel, consequat non, dictum porta, nulla.

Narrow Table:

Name	Title of Employee within Company
Bob Barker	Web Developer
Pat Sajak	Concierge
Steve Harvey	Consultant
Alex Trebek	Mechanic
Chuck Woolery	Makeup
Bob Eubanks	Sales
Regis Philbin	Intern

Long Table:

Name	Title of Employee within Company	Hire Date	Birthday	Favorite Color	Lucky Number	Number	Description	Random Column Heading	Random Column Heading	Random Column Heading
Bob Barker	Web Developer	05/19/2014	05/19/2014	red	7	00234	Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.	Random Value	Random Value	Random Value
Pat Sajak	Concierge	02/24/2011	05/19/2014	yellow	7	003455	Dui purus, eleifend vel, consequat non, dictum porta, nulla.	Random Value	Random Value	Random Value
Steve Harvey	Consultant	10/19/2013	05/19/2014	green	7	43223	Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.	Random Value	Random Value	Random Value
Alex Trebek	Mechanic	01/09/2016	05/19/2014	purple	7	00345234225	Dui purus, eleifend vel, consequat non, dictum porta, nulla.	Random Value	Random Value	Random Value

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-tables">Details</button>
    </h4>
    <div id="details-tables" class="usa-accordion__content">
      <div style="text-align:center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
<a href="https://designsystem.digital.gov/components/table/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
<a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/613a66b35416a6b9a21150ea" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </div>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-tables">Specs</button>
    </h4>
    <div id="specs-tables" class="usa-accordion__content">
      <code> Specs Goes Here </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<div class="simple-styleguide">

    <p><strong>Normal Table:</strong></p>
    <table class="sticky-enabled sticky-table">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
            <th>Hire Date</th>
            <th>Number</th>
            <th>Description</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
            <td>05/19/2014</td>
            <td>00234</td>
            <td>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
            <td>02/24/2011</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
            <td>10/19/2013</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
            <td>01/09/2016</td>
            <td>00345234225</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Chuck Woolery</td>
            <td>Makeup</td>
            <td>01/19/1978</td>
            <td>4322343223</td>
            <td>Eleifend vel.</td>
        </tr>
        <tr class="even">
            <td>Bob Eubanks</td>
            <td>Sales</td>
            <td>12/09/1999</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla. Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        <tr class="odd">
            <td>Regis Philbin</td>
            <td>Intern</td>
            <td>01/19/2013</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla.</td>
        </tr>
        </tbody>
    </table>

    <p><strong>Narrow Table:</strong></p>
    <table class="sticky-enabled sticky-table">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
        </tr>
        <tr class="odd">
            <td>Chuck Woolery</td>
            <td>Makeup</td>
        </tr>
        <tr class="even">
            <td>Bob Eubanks</td>
            <td>Sales</td>
        </tr>
        <tr class="odd">
            <td>Regis Philbin</td>
            <td>Intern</td>
        </tr>
        </tbody>
    </table>

    <p><strong>Long Table:</strong></p>
    <table class="sticky-enabled sticky-table responsive">
        <thead class="tableHeader-processed">
        <tr>
            <th>Name</th>
            <th>Title of Employee within Company</th>
            <th>Hire Date</th>
            <th>Birthday</th>
            <th>Favorite Color</th>
            <th>Lucky Number</th>
            <th>Number</th>
            <th>Description</th>
            <th>Random Column Heading</th>
            <th>Random Column Heading</th>
            <th>Random Column Heading</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td>Bob Barker</td>
            <td>Web Developer</td>
            <td>05/19/2014</td>
            <td>05/19/2014</td>
            <td>red</td>
            <td>7</td>
            <td>00234</td>
            <td>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="even">
            <td>Pat Sajak</td>
            <td>Concierge</td>
            <td>02/24/2011</td>
            <td>05/19/2014</td>
            <td>yellow</td>
            <td>7</td>
            <td>003455</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="odd">
            <td>Steve Harvey</td>
            <td>Consultant</td>
            <td>10/19/2013</td>
            <td>05/19/2014</td>
            <td>green</td>
            <td>7</td>
            <td>43223</td>
            <td>Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla. Eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        <tr class="even">
            <td>Alex Trebek</td>
            <td>Mechanic</td>
            <td>01/09/2016</td>
            <td>05/19/2014</td>
            <td>purple</td>
            <td>7</td>
            <td>00345234225</td>
            <td>Dui purus, eleifend vel, consequat non, dictum porta, nulla.</td>
            <td>Random Value</td>
            <td>Random Value</td>
            <td>Random Value</td>
        </tr>
        </tbody>
    </table>
</div>

In Development - Forms

Details and Specs

Requirements Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here

Specs Goes Here

Preview

Markup Goes Here

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-forms">Details</button>
    </h4>
    <div id="details-forms" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/613a66b21a8ed6baa4513bb9" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-forms">Specs</button>
    </h4>
    <div id="specs-forms" class="usa-accordion__content">
      <code> Specs Goes Here </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here </div>

Standards - Time Picker

Details and Specs

Requirements USWDS Specs Designs

Description

When to use the time picker component

Guidance

Scheduling. Use the time picker to schedule a time from common, consistent increments, such as planning a meeting time in 30-minute blocks

Exact time. Plain text input is more appropriate for historical exact times, like time of birth.

Usability

Use option strings familiar to users. The combo box filters by matching strings. Include option text that includes familiar strings or spellings (i.e. if using the combobox with a state list, include the postal abbreviation in the option text: District of Columbia (DC)).
Make sure to test. Test select menus 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 dependent options. Avoid making options in one select menu change based on the input to another. Users often don’t understand how choosing an item in one impacts another
Use a good default. When most users will (or should) pick a particular option, make it the default: .

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Always use a label. Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).
Avoid auto-submission. 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.

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



       .usa-label 

        ------------------- 

        font-size: 1.125rem; /* 18px / $base-font-size */ 
 


        .usa-hint 

        ------------------- 

        color: #71767a; 



        .usa-time-picker 

        ------------------- 

        width: 10em; 



       .usa-combo-box__clear-input__wrapper button 

        ------------------- 

        appearance: none;
       background-color: $teal /* #1a6986;  */ 

      border: $teal /* #1a6986;  */ 

      color: $white /* #fff;  */ 

      cursor: pointer;  

      display: inline-block; 

      font-weight: normal; 

      text-align: center; 

      text-decoration: none; 

      user-select: none; 

      vertical-align: middle; 

      white-space: normal; 

      border-radius: 0.25rem; 

      line-height: .9; 

       padding: 0.75rem 1.25rem;

Preview

Appointment time

hh:mm

<!-- CUSTOM STYLES  -->
<style>
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-details-time-picker">Details</button>
    </h4>
    <div id="templates-details-time-picker" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/time-picker/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>When to use the time picker component</p>

      <h5>Guidance</h5>
<p>Scheduling. Use the time picker to schedule a time from common, consistent increments, such as planning a meeting time in 30-minute blocks</p>
<p>Exact time. Plain text input is more appropriate for historical exact times, like time of birth.</p>
        <h6>Usability</h6>
        <ul>
          <li>Use option strings familiar to users. The combo box filters by matching strings. Include option text that includes familiar strings or spellings (i.e. if using the combobox with a state list, include the postal abbreviation in the option text: District of Columbia (DC)). </li>
  <li>Make sure to test. Test select menus 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. </li>
  <li>Avoid dependent options. Avoid making options in one select menu change based on the input to another. Users often don’t understand how choosing an item in one impacts another</li>
  <li>Use a good default. When most users will (or should) pick a particular option, make it the default: <option selected="selected">Default</option>.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls. </li>
<li>Always use a label. Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).</li>

<li>Avoid auto-submission. 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.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs-time-picker">Specs</button>
    </h4>
    <div id="templates-specs-time-picker" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

       .usa-label <br />
        ------------------- <br />
        font-size: 1.125rem; /* 18px / $base-font-size */ <br /> <br />

        .usa-hint <br />
        ------------------- <br />
        color: #71767a; <br /><br />

        .usa-time-picker <br />
        ------------------- <br />
        width: 10em; <br /><br />

       .usa-combo-box__clear-input__wrapper button <br />
        ------------------- <br />
        appearance: none;
       background-color: $teal /* #1a6986;  */ <br />
      border: $teal /* #1a6986;  */ <br />
      color: $white /* #fff;  */ <br />
      cursor: pointer;  <br />
      display: inline-block; <br />
      font-weight: normal; <br />
      text-align: center; <br />
      text-decoration: none; <br />
      user-select: none; <br />
      vertical-align: middle; <br />
      white-space: normal; <br />
      border-radius: 0.25rem; <br />
      line-height: .9; <br />
       padding: 0.75rem 1.25rem; <br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- MARKUP  Begins-->
<div class="usa-form-group">
  <label class="usa-label" id="appointment-time-label" for="appointment-time"
    >Appointment time</label
  >
  <div class="usa-hint" id="appointment-time-hint">hh:mm</div>
  <div class="usa-time-picker">
    <input
      class="usa-input"
      id="appointment-time"
      name="appointment-time"
      aria-describedby="appointment-time-label appointment-time-hint"
    />
  </div>
</div>
<!-- MARKUP  Ends-->

In Development - Infographic

Details and Specs

Requirements Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .sampleclass 

        ------------------- 

        samplestyle: samplestyle;

Preview

Markup Goes Here

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-infographic">Details</button>
    </h4>
    <div id="details-infographic" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-infographic">Specs</button>
    </h4>
    <div id="specs-infographic" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .sampleclass <br />
        ------------------- <br />
        samplestyle: samplestyle; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here </div>

In Development - Template

Details and Specs

Requirements USWDS Specs Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .sampleclass 

        ------------------- 

        samplestyle: samplestyle;

Preview

Markup Goes Here

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-tsg-devtemplate">Details</button>
    </h4>
    <div id="details-tsg-devtemplate" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/overview/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-tsg-devtemplate">Specs</button>
    </h4>
    <div id="specs-tsg-devtemplate" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .sampleclass <br />
        ------------------- <br />
        samplestyle: samplestyle; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here </div>

Find Support - Timeline

Details and Specs

Requirements Designs

Description

The SAMHSA Timeline item is a stylized piece of content that allows for specific content to be rendered in a controlled and animated manner. The Timeline is interactive and usually operable via user scrolling.

Guidance

Usability

Alternating Sides - Ensure that each item in the Timeline alternates sides in a staggered fashion
View Fading When Scrolling - Ensure that the items fade into view only when scrolled to

Accessibility

ARIA Attributes - ARIA Attributes exist on multiple items and within the wrapper elements, which allows for screen readers and other accessibility tools to read the content presented in the Timeline
Focus element - Upon element focus, each Timeline item remains in focus with a blue outline to show which element is currently being interacted with

Examples


            .timeline-list-wrapper { 

                margin: 1.5rem 0 3rem 0; 

            } 

            

            .timeline-list-wrapper ul.timeline-list { 

                list-style: none; 

                margin: 0; 

                padding: 0; 

                position: relative; 

            } 

            

            .timeline-list-wrapper ul.timeline-list:after { 

                content: ''; 

                width: 1px; 

                height: 100%; 

                position: absolute; 

                border-right: 2px dashed $seaweed; /* #0e769e */  

                top: 0; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item { 

                margin: 0; 

                padding: 0; 

                position: relative; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-icon-wrapper { 

                background-repeat: no-repeat; 

                background-position: center; 

                background-size: contain; 

                position: absolute; 

                width: 50%; 

                height: 100%; 

                top: 5px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item:after { 

                content: ""; 

                display: table; 

                clear: both; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper { 

                position: relative; 

                border-radius: 10px; 

                box-shadow: 0 13px 10px 0 rgba(0, 0, 0, 0.22); 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper:after { 

                content: ""; 

                display: table; 

                clear: both; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-marker { 

                position: absolute; 

                z-index: 2; 

                background: $white; /* #fff */

                border: solid 4px $seaweed; /* #0e769e */

                border-radius: 50%; 

                width: 19px; 

                height: 18px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-marker-lb { 

                position: absolute; 

                z-index: 2; 

                background: $white; /* #fff */

                border: solid 4px $seaweed; /* #0e769e */

                border-radius: 50%; 

                width: 19px; 

                height: 18px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-date-wrapper { 

                position: relative; 

                width: 100%; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { 

                color: $white; /* #fff */

                background-color: $seaweed; /* #0e769e */

                font-weight: bold; 

                margin-right: -1px; 

                padding: 5px 10px; 

                text-align: center; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-img-wrapper { 

                min-height: 30px; 

                margin-right: -1px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-img-wrapper img { 

                width: 100%; 

                height: auto; 

                object-fit: contain; 

                border-radius: 10px 10px 0px 0px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper { 

                padding: 1.5rem; 

                text-align: left; 

                width: 100%; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper ul li { 

                list-style-type: disc; 

                margin-bottom: 1.5rem; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper .yt-container { 

                position: relative; 

                width: 100%; 

                height: 0; 

                padding-bottom: 56.25%; 

            } 

            

            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper .yt-video { 

                position: absolute; 

                top: 0; 

                left: 0; 

                width: 100%; 

                height: 100%; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper { 

                float: left; 

                padding-right: 0; 

                text-align: right; 

                margin-left: 16px; 

                min-height: 191px; 

                word-wrap: break-word; 

                z-index: 1; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { 

                border-radius: 0 5px 0 0; 

                position: absolute; 

                right: 1px; 

                top: 0; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper { 

                float: right; 

                padding-left: 0; 

                text-align: left; 

                margin-right: 16px; 

                min-height: 191px; 

                word-wrap: break-word; 

                z-index: 1; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { 

                border-radius: 5px 0 0 0; 

                position: absolute; 

                left: 0; 

                top: 0; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.left:after { 

                left: 0; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper { 

                width: 100%; 

                padding-left: 1rem; 

                text-align: left; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker { 

                left: -6px; 

            } 

            

            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker-lb { 

                left: -6px; 

            } 

            

            .timeline-scroll-arrow { 

                width: 100%; 

                text-align: center; 

                height: 80px; 

            } 

            

            .timeline-scroll-arrow svg { 

                color: $seaweed; /* #0e769e */

                font-size: 50px; 

            } 

            

            .timeline-scroll-marker { 

                text-align: center; 

                height: 12px; 

            } 

            

            .timeline-scroll-marker svg { 

                color: $seaweed; /* #0e769e */

                position: absolute; 

                z-index: 2; 

                background: $white; /* #fff */

                border: solid 2px $seaweed; /* #0e769e */

                border-radius: 50%; 

                margin-left: -11px; 

            }

2001
- Congress appropriates funding for suicide prevention hotline
- SAMHSA awards a competitive grant to a single lead grantee to establish a network of crisis centers that can answer calls from their local communities
2005
- The National Suicide Prevention Lifeline launched with the 1-800-273-8255 (TALK)
- Received 46K calls in the first year
2006
- The Lifeline adds a Spanish language subnetwork (now “Press 2”) on 1-800-273-8255
2007
- SAMHSA and VA partner to access the Veterans Crisis Line by “Press 1” on 1-800-273-8255
2013
- Lifeline adds English only chat service, available at www.suicidepreventionlifeline.org
2015
- Disaster Distress Helpline added into the Lifeline network, with a different phone number and SAMHSA funding source
2016
- Lifeline chat link added to Google search engine when a person types “suicide” or related terms
2018
- The National Suicide Hotline Improvement Act becomes law. It requires a feasibility study into designating a three-digit dialing code for a national suicide prevention and mental health crisis hotline system
2020
- The National Suicide Hotline Designation Act of 2020 becomes law. It requires the FCC to designate 988 as the universal number for a national suicide prevention and mental health crisis hotline
- English text service added to the Lifeline
- Lifeline volume has grown to 3.3M calls, chats, and texts
- On July 16, 2020, the FCC issues the final order designating 988 as the new Lifeline and Veterans Crisis Line number, requiring all U.S. telecommunication providers to activate 988 for all subscribers by July 16, 2022
2021
- The FCC added to their order that all U.S. telecommunication providers also activate text to 988 by July 16, 2022
2022
- The country transitions to 988, an easy-to-remember, three-digit dialing code
- Around 200 local, independently owned and operated crisis centers operate in the Lifeline network

<!-- CUSTOM STYLEGUIDE STYLES -->
<style>
    .timeline-list-wrapper {
    height: auto !important;
    }
    </style>
    <!-- DETAILS AND SPECS  -->
    <div class="usa-accordion style-admin usa-accordion--bordered">
      <div class="grid-row margin-bottom-2">
        <div class="grid-col-6 usa-accordion-group-header">
          <h3>
            <p>Details and Specs</p>
          </h3>
        </div>
      </div>

      <!-- DETAILS -->
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-timeline">Details</button>
        </h4>
        <div id="details-timeline" class="usa-accordion__content">
          <p style="text-align: center;">
            <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2461401212/988+Timeline+Dashboard+-+Feb+Mar+2022" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
            <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/screen/642af56de6e99e73a4e6ebe3" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
          </p>

          <h5>Description</h5>
            <p>The SAMHSA Timeline item is a stylized piece of content that
                allows for specific content to be rendered in a controlled and
                animated manner. The Timeline is interactive and usually operable
                via user scrolling.
            </p>

          <h5>Guidance</h5>
            <h6>Usability</h6>
            <ul>
                <li><strong>Alternating Sides</strong> - Ensure that each item in the Timeline
                alternates sides in a staggered fashion</li>
                <li><strong>View Fading When Scrolling</strong> - Ensure that the items fade into view
                only when scrolled to</li>
            </ul>

            <h6>Accessibility</h6>
            <ul>
                <li><strong>ARIA Attributes</strong> - ARIA Attributes exist on multiple items and within the wrapper elements,
                which allows for screen readers and other accessibility tools to read the content presented in the Timeline</li>
                <li><strong>Focus element</strong> - Upon element focus, each Timeline item remains in focus with a blue outline
                to show which element is currently being interacted with</li>
            </ul>

          <h5>Examples</h5>
            <ul>
              <li><a href="https://www.samhsa.gov/find-help/988/lifeline-timeline">Lifeline Timeline</a></li>
              <li><a href="https://www.samhsa.gov/find-help/988/lifeline-timeline">TBA</a></li>
              <li><a href="https://www.samhsa.gov/find-help/988/lifeline-timeline">TBA</a></li>
            </ul>
        </div>
      </div>

      <!-- SPECS -->
      <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
        <h4 class="usa-accordion__heading">
          <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
          <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-timeline">Specs</button>
        </h4>
        <div id="specs-timeline" class="usa-accordion__content">
          <code>
            .timeline-list-wrapper { <br />
                margin: 1.5rem 0 3rem 0; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list { <br />
                list-style: none; <br />
                margin: 0; <br />
                padding: 0; <br />
                position: relative; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list:after { <br />
                content: ''; <br />
                width: 1px; <br />
                height: 100%; <br />
                position: absolute; <br />
                border-right: 2px dashed $seaweed; /* #0e769e */  <br />
                top: 0; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item { <br />
                margin: 0; <br />
                padding: 0; <br />
                position: relative; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-icon-wrapper { <br />
                background-repeat: no-repeat; <br />
                background-position: center; <br />
                background-size: contain; <br />
                position: absolute; <br />
                width: 50%; <br />
                height: 100%; <br />
                top: 5px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item:after { <br />
                content: ""; <br />
                display: table; <br />
                clear: both; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper { <br />
                position: relative; <br />
                border-radius: 10px; <br />
                box-shadow: 0 13px 10px 0 rgba(0, 0, 0, 0.22); <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper:after { <br />
                content: ""; <br />
                display: table; <br />
                clear: both; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-marker { <br />
                position: absolute; <br />
                z-index: 2; <br />
                background: $white; /* #fff */<br />
                border: solid 4px $seaweed; /* #0e769e */<br />
                border-radius: 50%; <br />
                width: 19px; <br />
                height: 18px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-marker-lb { <br />
                position: absolute; <br />
                z-index: 2; <br />
                background: $white; /* #fff */<br />
                border: solid 4px $seaweed; /* #0e769e */<br />
                border-radius: 50%; <br />
                width: 19px; <br />
                height: 18px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-date-wrapper { <br />
                position: relative; <br />
                width: 100%; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { <br />
                color: $white; /* #fff */<br />
                background-color: $seaweed; /* #0e769e */<br />
                font-weight: bold; <br />
                margin-right: -1px; <br />
                padding: 5px 10px; <br />
                text-align: center; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-img-wrapper { <br />
                min-height: 30px; <br />
                margin-right: -1px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-img-wrapper img { <br />
                width: 100%; <br />
                height: auto; <br />
                object-fit: contain; <br />
                border-radius: 10px 10px 0px 0px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper { <br />
                padding: 1.5rem; <br />
                text-align: left; <br />
                width: 100%; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper ul li { <br />
                list-style-type: disc; <br />
                margin-bottom: 1.5rem; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper .yt-container { <br />
                position: relative; <br />
                width: 100%; <br />
                height: 0; <br />
                padding-bottom: 56.25%; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list li.timeline-item .timeline-item-wrapper .timeline-body-wrapper .yt-video { <br />
                position: absolute; <br />
                top: 0; <br />
                left: 0; <br />
                width: 100%; <br />
                height: 100%; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper { <br />
                float: left; <br />
                padding-right: 0; <br />
                text-align: right; <br />
                margin-left: 16px; <br />
                min-height: 191px; <br />
                word-wrap: break-word; <br />
                z-index: 1; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.odd .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { <br />
                border-radius: 0 5px 0 0; <br />
                position: absolute; <br />
                right: 1px; <br />
                top: 0; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper { <br />
                float: right; <br />
                padding-left: 0; <br />
                text-align: left; <br />
                margin-right: 16px; <br />
                min-height: 191px; <br />
                word-wrap: break-word; <br />
                z-index: 1; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.alternate li.timeline-item.even .timeline-item-wrapper .timeline-date-wrapper .timeline-date-box { <br />
                border-radius: 5px 0 0 0; <br />
                position: absolute; <br />
                left: 0; <br />
                top: 0; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.left:after { <br />
                left: 0; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper { <br />
                width: 100%; <br />
                padding-left: 1rem; <br />
                text-align: left; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker { <br />
                left: -6px; <br />
            } <br />
            <br />
            .timeline-list-wrapper ul.timeline-list.left li.timeline-item .timeline-item-wrapper .timeline-marker-lb { <br />
                left: -6px; <br />
            } <br />
            <br />
            .timeline-scroll-arrow { <br />
                width: 100%; <br />
                text-align: center; <br />
                height: 80px; <br />
            } <br />
            <br />
            .timeline-scroll-arrow svg { <br />
                color: $seaweed; /* #0e769e */<br />
                font-size: 50px; <br />
            } <br />
            <br />
            .timeline-scroll-marker { <br />
                text-align: center; <br />
                height: 12px; <br />
            } <br />
            <br />
            .timeline-scroll-marker svg { <br />
                color: $seaweed; /* #0e769e */<br />
                position: absolute; <br />
                z-index: 2; <br />
                background: $white; /* #fff */<br />
                border: solid 2px $seaweed; /* #0e769e */<br />
                border-radius: 50%; <br />
                margin-left: -11px; <br />
            } <br />
            <br />
          </code>
        </div>
      </div>
    </div>
    <br>
    <hr>
    <br>
    <!-- MARKUP  -->
    <div class="timeline-list-wrapper">
      <ul class="timeline-list item-list alternate marker-center">
        <li class="item01 timeline-item clearfix odd tabindex" tabindex="0">
          <div class="timeline-item-wrapper animate__animated animate__slower animate__fadeIn">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2001</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    Congress appropriates funding for suicide prevention hotline
                  </li>
                  <li>
                    SAMHSA awards a competitive grant to a single lead grantee to establish a network of crisis centers that can answer calls from their local communities
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper animate__animated animate__slower animate__fadeIn"></div>
        </li>

        <li class="item02 timeline-item clearfix even" tabindex="0">
          <div class="timeline-icon-wrapper"></div>
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2005</div>
            </div>
            <div class="timeline-img-wrapper">
              <img src="/themes/custom/samhsa_uswds_base/images/988-timeline/mask_group_10.png" alt="">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    The National Suicide Prevention Lifeline launched with the <strong>1-800-273-8255 (TALK)</strong>
                  </li>
                  <li>
                    <strong>Received 46K calls in the first year</strong>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>

        <li class="item03 timeline-item clearfix odd" tabindex="0">
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper ">
              <div class="timeline-date-box">2006</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    The Lifeline adds a Spanish language subnetwork <strong>(now “Press 2”)</strong> on <strong>1-800-273-8255</strong>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper"></div>
        </li>

        <li class="item04 timeline-item clearfix even" tabindex="0">
          <div class="timeline-icon-wrapper"></div>
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2007</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    SAMHSA and VA partner to access the <a href="https://www.veteranscrisisline.net/" title="Learn more about Veterans Crisis Line">Veterans Crisis Line</a> by <strong>“Press 1”</strong> on <strong>1-800-273-8255</strong>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>

        <li class="item05 timeline-item clearfix odd" tabindex="0">
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper ">
              <div class="timeline-date-box">2013</div>
            </div>
            <div class="timeline-img-wrapper">
              <img src="/themes/custom/samhsa_uswds_base/images/988-timeline/mask_group_13.png" class="Mask-Group-6" alt="">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    Lifeline adds English only chat service, available at <a href="https://suicidepreventionlifeline.org/" title="Learn more about suicidepreventionlifeline.org">www.suicidepreventionlifeline.org</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper"></div>
        </li>

        <li class="item06 timeline-item clearfix even" tabindex="0">
          <div class="timeline-icon-wrapper"></div>
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2015</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    <a href="/find-help/disaster-distress-helpline" title="Learn more about Disaster Distress Helpline">Disaster Distress Helpline</a> added into the Lifeline network, with a different phone number and SAMHSA funding source
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>

        <li class="item07 timeline-item clearfix odd" tabindex="0">
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper ">
              <div class="timeline-date-box">2016</div>
            </div>
            <div class="timeline-img-wrapper">
              <img src="/themes/custom/samhsa_uswds_base/images/988-timeline/mask_group_14.png" class="Mask-Group-6" alt="">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    Lifeline chat link added to Google search engine when a person types “suicide” or related terms
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper"></div>
        </li>

        <li class="item08 timeline-item clearfix even" tabindex="0">
          <div class="timeline-icon-wrapper"></div>
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2018</div>
            </div>
            <div class="timeline-img-wrapper">
              <img src="/themes/custom/samhsa_uswds_base/images/988-timeline/mask_group_8.png" class="Mask-Group-6" alt="">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    <a href="https://www.congress.gov/bill/115th-congress/house-bill/2345?q=%7B%22search%22%3A%5B%22National+Suicide+Hotline+Improvement+Act+of+2017%22%5D%7D&r=2" title="The National Suicide Hotline Improvement Act">The National Suicide Hotline Improvement Act</a> becomes law. It requires a feasibility study into designating a three-digit dialing code for a national suicide prevention and mental health crisis hotline system
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>

        <li class="item09 timeline-item clearfix odd" tabindex="0">
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper ">
              <div class="timeline-date-box">2020</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    The <a href="https://www.congress.gov/bill/116th-congress/senate-bill/2661" title="The National Suicide Hotline Designation Act of 2020">National Suicide Hotline Designation Act of 2020</a> becomes law. It requires the FCC to designate 988 as the universal number for a national suicide prevention and mental health crisis hotline
                  </li>
                  <li>
                    English text service added to the Lifeline
                  </li>
                  <li>
                    Lifeline volume has grown to 3.3M calls, chats, and texts
                  </li>
                  <li>
                    On July 16, 2020, the FCC issues the final order designating 988 as the new Lifeline and Veterans Crisis Line number, requiring all U.S. telecommunication providers to activate 988 for all subscribers by July 16, 2022
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper"></div>
        </li>

        <li class="item10 timeline-item clearfix even" tabindex="0">
          <div class="timeline-icon-wrapper"></div>
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper">
              <div class="timeline-date-box">2021</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    The FCC added to their order that all U.S. telecommunication providers also activate text to 988 by July 16, 2022
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>

        <li class="item11 timeline-item clearfix odd" tabindex="0">
          <div class="timeline-item-wrapper">
            <span class="timeline-marker"></span>
            <div class="timeline-date-wrapper ">
              <div class="timeline-date-box">2022</div>
            </div>
            <div class="timeline-img-wrapper">
            </div>
            <div class="timeline-body-wrapper views-field views-field-timeline-list">
              <div class="field-content">
                <ul>
                  <li>
                    The country transitions to 988, an easy-to-remember, three-digit dialing code
                  </li>
                  <li>
                    Around 200 local, independently owned and operated crisis centers operate in the Lifeline network
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="timeline-icon-wrapper animate__animated animate__fadeIn"></div>
        </li>
      </ul>
      <div class="timeline-scroll-arrow"><i class="fas fa-arrow-circle-down" aria-hidden="true" title="Scroll down to present next timeline card."></i></div>
    </div><!-- END TIMELINE -->

Out of the Box - Character Count

Details and Specs

Requirements USWDS Specs Designs

Description

Character count helps users know how much text they can enter when there is a limit on the number of characters.

Guidance

Usability

Brevity is desired. When users are likely to provide more detail than is needed, and you want to force them to use fewer words. Note: this will likely increase the amount of time it takes users to submit the form because editing requires thinking. In the words of Mark Twain, “I didn’t have time to write a short letter, so I wrote a long one instead.”
Legal requirement. When there is a legal reason where an entry must be under a certain number of characters.
Exceeding the character limit is highly unlikely. If the vast majority of users (well over 99%) are very unlikely to run afoul of backend validation, such as an address field that has a database field limit of 250 characters.

Accessibility

Associate the character count message to the input. Use aria-describedby on the input to allow the message to be announced to those using screen readers.

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-form 

        ------------------- 

        max-width: 20rem;  /* 320px  */ 


       .usa-label  

        ------------------- 

        font-size: 1.06rem  /* 16.96px   */ 


       .usa-hint  

        ------------------- 

        color: #71767a; 


         .usa-input, .usa-textarea 

        ------------------- 

         border-width: 1px; 

        border-color: #565c65; 

       border-style: solid; 

       appearance: none;
       border-radius: 0; 

      color: #1b1b1b;  /*   */ 

      display: block;

      margin-top: 0.5rem; 

      padding: 0.5rem; 

      width: 100%; 


      .usa-input 

        ------------------- 

        height: 2.5rem;/*  40px */ 


       .usa-textarea 

        ------------------- 

       height: 10rem; /*  160px */

Preview

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-details-character-count">Details</button>
    </h4>
    <div id="template-details-character-count" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7953" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/character-count/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Character count helps users know how much text they can enter when there is a limit on the number of characters.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Brevity is desired. When users are likely to provide more detail than is needed, and you want to force them to use fewer words. Note: this will likely increase the amount of time it takes users to submit the form because editing requires thinking. In the words of Mark Twain, “I didn’t have time to write a short letter, so I wrote a long one instead.” </li>
<li>Legal requirement. When there is a legal reason where an entry must be under a certain number of characters.</li>
<li>Exceeding the character limit is highly unlikely. If the vast majority of users (well over 99%) are very unlikely to run afoul of backend validation, such as an address field that has a database field limit of 250 characters.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Associate the character count message to the input. Use aria-describedby on the input to allow the message to be announced to those using screen readers.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-specs-character-count">Specs</button>
    </h4>
    <div id="template-specs-character-count" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .usa-form <br />
        ------------------- <br />
        max-width: 20rem;  /* 320px  */ <br />

       .usa-label  <br />
        ------------------- <br />
        font-size: 1.06rem  /* 16.96px   */ <br />

       .usa-hint  <br />
        ------------------- <br />
        color: #71767a; <br />

         .usa-input, .usa-textarea <br />
        ------------------- <br />
         border-width: 1px; <br />
        border-color: #565c65; <br />
       border-style: solid; <br />
       appearance: none;
       border-radius: 0; <br />
      color: #1b1b1b;  /*   */ <br />
      display: block;<br />
      margin-top: 0.5rem; <br />
      padding: 0.5rem; <br />
      width: 100%; <br />

      .usa-input <br />
        ------------------- <br />
        height: 2.5rem;/*  40px */ <br />

       .usa-textarea <br />
        ------------------- <br />
       height: 10rem; /*  160px */ <br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>

<!-- MARKUP Begins  -->
<form class="usa-form">
  <div class="usa-character-count">
    <div class="usa-form-group">
      <label class="usa-label" for="with-hint-input">Text input</label>
      <span id="with-hint-input-hint" class="usa-hint"
        >This is an input with a character counter.</span
      >
      <input
        class="usa-input usa-character-count__field"
        id="with-hint-input"
        maxlength="25"
        name="with-hint-input"
        aria-describedby="with-hint-input-info with-hint-input-hint"
      />
    </div>
    <span id="with-hint-input-info" class="usa-character-count__message"
      >You can enter up to 25 characters</span
    >
  </div>
</form>
<form class="usa-form">
  <div class="usa-character-count">
    <div class="usa-form-group">
      <label class="usa-label" for="with-hint-textarea">Textarea</label>
      <span id="with-hint-textarea-hint" class="usa-hint"
        >This is a textarea with a character counter.</span
      >
      <textarea
        class="usa-textarea usa-character-count__field"
        id="with-hint-textarea"
        maxlength="50"
        name="with-hint-textarea"
        rows="5"
        aria-describedby="with-hint-textarea-info with-hint-textarea-hint"
      ></textarea>
    </div>
    <span id="with-hint-textarea-info" class="usa-character-count__message"
      >You can enter up to 50 characters</span
    >
  </div>
</form>

<!-- MARKUP Ends  -->

Out of the Box - Combo Box

Details and Specs

Requirements USWDS Specs Designs

Description

A combo box helps users select an item from a large list of options.

Guidance

More than 15 options.Use a combo box when there are more than 15 choices in a drop-down list. With so many options, users may find it difficult to navigate with scrolling only.

Limited space. Use a combo box for presenting options when screen real estate is limited.

Limited choices. When the number of options is small, you can continue to use a select or radio element.

Usability guidance

Use option strings familiar to users. The combo box filters by matching strings. Include option text that includes familiar strings or spellings (for example, if using the combobox with a state list, include the postal abbreviation in the option text: District of Columbia (DC)).
Make sure to test. Test select menus 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 dependent options. Avoid making options in one select menu change based on the input to another. Users often don’t understand how choosing an item in one impacts anothe
Use a good default. When most users will (or should) pick a particular option, make it the default:
Avoid auto-submission. 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.

Accessibility guidance

Known assistive technology issues. Testing with people using assistive technology revealed usability concerns that require additional investigation. At this time, consider using a Select component instead of a Combo box. More research and testing is planned to better understand and address these accessibility issues. If you would like to contribute to improving this component, please join our community and share your feedback.
Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Always use a label. Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).
Always use a label. Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).
Avoid auto-submission. 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.


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 


        ------------------- 

        .usa-icon-list__title {

        font-size: .98rem;

        line-height: 1.2;

        margin-bottom: 0;

        padding-top: .425ex; 



.usa-combo-box 

------------------

    max-width: 30rem;

    position: relative;




.usa-combo-box__toggle-list 

------------------

background-color: rgba(0,0,0,0);

    background-position: center;

    background-size: auto 1.5rem;

    border: 0;

    bottom: 1px;

    cursor: pointer;

    margin-bottom: 0;

    opacity: .6;

    padding-right: 2rem;

    position: absolute;

    top: 1px;

    z-index: 100;

Preview

Select a fruit

<!-- CUSTOM STYLES  -->
<style>
#out_of_the_box_combo_box .usa-combo-box button.usa-combo-box__clear-input,
#out_of_the_box_combo_box  .usa-combo-box button:not(.toolbar-icon)
 {
    background-color: rgba(0,0,0,0);
 }
#out_of_the_box_combo_box .usa-combo-box ul.usa-combo-box__list,
#out_of_the_box_combo_box .usa-combo-box .usa-combo-box__input
{
 margin: 0;
}

#out_of_the_box_combo_box .usa-combo-box .usa-combo-box__clear-input {
display: none;
}
#out_of_the_box_combo_box .usa-combo-box.usa-combo-box--pristine .usa-combo-box__clear-input {
display: block;
}
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-combo-box-1">Details</button>
    </h4>
    <div id="details-combo-box-1" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7970" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/combo-box/" title="Link To USWDS Specs"class="button primary-button-1"  aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A combo box helps users select an item from a large list of options.</p>

      <h5>Guidance</h5>
<p><strong>More than 15 options.</strong>Use a combo box when there are more than 15 choices in a drop-down list. With so many options, users may find it difficult to navigate with scrolling only.</p>
<p><strong>Limited space.</strong> Use a combo box for presenting options when screen real estate is limited.</p>
<p><strong>Limited choices.</strong> When the number of options is small, you can continue to use a select or radio element.</p>

        <h6>Usability guidance</h6>
 <ul>
 <li><strong>Use option strings familiar to users. </strong>The combo box filters by matching strings. Include option text that includes familiar strings or spellings (for example, if using the combobox with a state list, include the postal abbreviation in the option text: District of Columbia (DC)).</li>
<li><strong>Make sure to test. </strong> Test select menus 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.</li>
<li><strong>Avoid dependent options. </strong> Avoid making options in one select menu change based on the input to another. Users often don’t understand how choosing an item in one impacts anothe</li>
<li><strong>Use a good default. </strong> When most users will (or should) pick a particular option, make it the default: <option selected="selected">Default</option></li>
<li><strong>Avoid auto-submission. </strong> 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.</li>
 </ul>

<h6>Accessibility guidance</h6>
  <ul>
          <li><strong>Known assistive technology issues. </strong> Testing with people using assistive technology revealed usability concerns that require additional investigation. At this time, consider using a Select component instead of a Combo box. More research and testing is planned to better understand and address these accessibility issues. If you would like to contribute to improving this component, please join our community and share your feedback.</li>

          <li><strong>Customize form controls accessibly.  </strong> If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.</li>
          <li><strong>Always use a label.  </strong>Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).</li>
 <li><strong>Always use a label.  </strong>Make sure your select element has a label. Don’t replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).</li>
 <li><strong>Avoid auto-submission. </strong> 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.</li>
</ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-combo-box-1">Specs</button>
    </h4>
    <div id="specs-combo-box-1" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>
        ------------------- <br />
        .usa-icon-list__title {</br>
        font-size: .98rem;</br>
        line-height: 1.2;</br>
        margin-bottom: 0;</br>
        padding-top: .425ex; <br /><br />

.usa-combo-box <br/>
------------------<br/>
    max-width: 30rem;<br/>
    position: relative;<br/>
<br/>

.usa-combo-box__toggle-list <br/>
------------------<br/>
background-color: rgba(0,0,0,0);<br/>
    background-position: center;<br/>
    background-size: auto 1.5rem;<br/>
    border: 0;<br/>
    bottom: 1px;<br/>
    cursor: pointer;<br/>
    margin-bottom: 0;<br/>
    opacity: .6;<br/>
    padding-right: 2rem;<br/>
    position: absolute;<br/>
    top: 1px;<br/>
    z-index: 100;<br/>
<br/>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- MARKUP Begins -->
<label class="usa-label" for="fruit">Select a fruit</label>
<div class="usa-combo-box">
  <select class="usa-select" name="fruit" id="fruit">
    <option value>Select a fruit</option>
    <option value="apple">Apple</option>
    <option value="apricot">Apricot</option>
    <option value="avocado">Avocado</option>
    <option value="banana">Banana</option>
    <option value="blackberry">Blackberry</option>
    <option value="blood orange">Blood orange</option>
    <option value="blueberry">Blueberry</option>
    <option value="boysenberry">Boysenberry</option>
    <option value="breadfruit">Breadfruit</option>
    <option value="buddhas hand citron">Buddha's hand citron</option>
    <option value="cantaloupe">Cantaloupe</option>
    <option value="clementine">Clementine</option>
    <option value="crab apple">Crab apple</option>
    <option value="currant">Currant</option>
    <option value="cherry">Cherry</option>
    <option value="custard apple">Custard apple</option>
    <option value="coconut">Coconut</option>
    <option value="cranberry">Cranberry</option>
    <option value="date">Date</option>
    <option value="dragonfruit">Dragonfruit</option>
    <option value="durian">Durian</option>
    <option value="elderberry">Elderberry</option>
    <option value="fig">Fig</option>
    <option value="gooseberry">Gooseberry</option>
    <option value="grape">Grape</option>
    <option value="grapefruit">Grapefruit</option>
    <option value="guava">Guava</option>
    <option value="honeydew melon">Honeydew melon</option>
    <option value="jackfruit">Jackfruit</option>
    <option value="kiwifruit">Kiwifruit</option>
    <option value="kumquat">Kumquat</option>
    <option value="lemon">Lemon</option>
    <option value="lime">Lime</option>
    <option value="lychee">Lychee</option>
    <option value="mandarine">Mandarine</option>
    <option value="mango">Mango</option>
    <option value="mangosteen">Mangosteen</option>
    <option value="marionberry">Marionberry</option>
    <option value="nectarine">Nectarine</option>
    <option value="orange">Orange</option>
    <option value="papaya">Papaya</option>
    <option value="passionfruit">Passionfruit</option>
    <option value="peach">Peach</option>
    <option value="pear">Pear</option>
    <option value="persimmon">Persimmon</option>
    <option value="plantain">Plantain</option>
    <option value="plum">Plum</option>
    <option value="pineapple">Pineapple</option>
    <option value="pluot">Pluot</option>
    <option value="pomegranate">Pomegranate</option>
    <option value="pomelo">Pomelo</option>
    <option value="quince">Quince</option>
    <option value="raspberry">Raspberry</option>
    <option value="rambutan">Rambutan</option>
    <option value="soursop">Soursop</option>
    <option value="starfruit">Starfruit</option>
    <option value="strawberry">Strawberry</option>
    <option value="tamarind">Tamarind</option>
    <option value="tangelo">Tangelo</option>
    <option value="tangerine">Tangerine</option>
    <option value="ugli fruit">Ugli fruit</option>
    <option value="watermelon">Watermelon</option>
    <option value="white currant">White currant</option>
    <option value="yuzu">Yuzu</option>
  </select>
</div>
<!-- MARKUP End -->

Out of the Box - Date Range Picker

Details and Specs

Requirements USWDS Specs Designs

Description

A date range picker helps users select a range between two dates.

Guidance

When to use the date range picker component

Scheduling. When users need to schedule or record an event and benefit from the context of a calendar.

When the day of the week is important. When knowing the day of the week helps users choose a specific date.

When to consider something else

When the day of the week is irrelevant. If there's no benefit to knowing the day of the week for a date or range, consider memorable datea fields.

Usability guidance

Describe the date format. Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker.

Accessibility guidance

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

Avoid auto-submission. 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.

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        button.usa-date-picker__button 

        ------------------------------- 

        position: relative; 

        opacity: 1; 

        background-position: top; 



        .usa-date-picker__calendar__month-selection, .usa-date-picker__calendar__year-selection 

        ------------------------------- 

        position: relative !important; 

        display: inline-block !important; 

        height: 100%; 

        padding: 8px 4px !important; 

        width: auto; 

        color: $charcoal !important; /* #4A4A4A */ 




        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--current-month 

        ------------------------------- 

        position: relative !important; 

        color: $charcoal !important; /* #4A4A4A */ 




        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--previous-month,
        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--next-month
        ------------------------------- 

        display: none !important;

Preview

Event start date

mm/dd/yyyy

Event end date

mm/dd/yyyy

<!-- CUSTOM STYLES  -->
<style>
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-date-picker">Details</button>
    </h4>
    <div id="details-date-picker" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="#" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/date-range-picker/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A date range picker helps users select a range between two dates.</p>

      <h5>Guidance</h5>
      <h6>When to use the date range picker component</h6>
      <p><strong>Scheduling.</strong> When users need to schedule or record an event and benefit from the context of a calendar.   </p>

      <p><strong>When the day of the week is important.</strong> When knowing the day of the week helps users choose a specific date.</p>

      <h6>When to consider something else</h6>
       <p><strong>When the day of the week is irrelevant.</strong> If there's no benefit to knowing the day of the week for a date or range, consider <a href="https://designsystem.digital.gov/components/memorable-date">memorable date</a>a fields.</p>

      <h6>Usability guidance</h6>
      <p><strong>Describe the date format.</strong> Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker.</p>

      <h6>Accessibility guidance</h6>
      <p><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the <a href="https://designsystem.digital.gov/components/form">accessibility requirements that apply to all form controls</a>.</p>

      <p><strong>Avoid auto-submission.</strong> 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.</p>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-date-picker">Specs</button>
    </h4>
    <div id="specs-date-picker" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        button.usa-date-picker__button <br />
        ------------------------------- <br />
        position: relative; <br />
        opacity: 1; <br />
        background-position: top; <br /><br />

        .usa-date-picker__calendar__month-selection, .usa-date-picker__calendar__year-selection <br />
        ------------------------------- <br />
        position: relative !important; <br />
        display: inline-block !important; <br />
        height: 100%; <br />
        padding: 8px 4px !important; <br />
        width: auto; <br />
        color: $charcoal !important; /* #4A4A4A */ <br /><br />


        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--current-month <br />
        ------------------------------- <br />
        position: relative !important; <br />
        color: $charcoal !important; /* #4A4A4A */ <br /><br />


        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--previous-month,
        .usa-date-picker__calendar__date.usa-date-picker__calendar__date--next-month
        ------------------------------- <br />
        display: none !important; <br /><br />


      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div class="usa-date-range-picker">
  <div class="usa-form-group">
    <label class="usa-label" id="event-date-start-label" for="event-date-start"
      >Event start date</label
    >
    <div class="usa-hint" id="event-date-start-hint">mm/dd/yyyy</div>
    <div class="usa-date-picker">
      <input
        class="usa-input"
        id="event-date-start"
        name="event-date-start"
        aria-labelledby="event-date-start-label"
        aria-describedby="event-date-start-hint"
      />
    </div>
  </div>
  <div class="usa-form-group">
    <label class="usa-label" id="event-date-end-label" for="event-date-end"
      >Event end date</label
    >
    <div class="usa-hint" id="event-date-end-hint">mm/dd/yyyy</div>
    <div class="usa-date-picker">
      <input
        class="usa-input"
        id="event-date-end"
        name="event-date-end"
        aria-labelledby="event-date-end-label"
        aria-describedby="event-date-end-hint"
      />
    </div>
  </div>
</div>

Out of the Box - Icon List

Details and Specs

Requirements USWDS Specs Designs

Description

An icon list reinforces the meaning and visibility of individual list items with a leading icon.

Guidance

Do-and-don’t lists. Icon lists help reinforce the message of a list item using a visual cue as a progressive enhancement. This can be effective in a list, or pair of lists, that describe actions users should do or not do. A pair of icons with clear and opposite meaning, like check_circle () and cancel (), create an effective do-and-don’t list.

Features and metadata. Use an icon list to enhance a list of features, like a campsite’s amenities or other lists where icons might help users understand content at a glance.

Important tasks or requirements. Use an icon list to help users find, distinguish, and verify related steps or tasks that can be completed in any order, like a checklist of items to pack or documents to complete.

Printable checklists. Users may wish to print a page and use it as a physical checklist. This kind of static checklist is not an interactive form. Use an icon like check_box_outline_blank () to provide a space for physical checking.

Usability

Use consistent headings. Headings should be written with parallel structure. For example, start each with an action verb. When possible, keep headings short enough to fit on one or two lines.
Add rich content sparingly. Each list item can display rich text content like HTML, images, and even other components. Be succinct. Too much complexity distracts from the impact of an icon list.
Use similar icons. Use the same icon for each list item unless variation is meaningful, as with our check_circle icon () and cancel icon (). Icons should come from the same icon library and have a similar look and feel.

Accessibility

Don’t rely on the icons alone to convey meaning. Use text and context to establish the meaning of your list, and use the icon to reinforce that meaning as a progressive enhancement.
Use colors with accessible contrast. While the icons in an icon list might be considered decorative progressive enhancement, aim for accessible AA contrast. This assures legibility on printed pages as well.
Hide most icons from screen readers. This component uses the aria-hidden="true" and role=”img” attributes because the icons are used solely as a visual progressive enhancement. The icon’s meaning is redundant with the list content.

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 


        ------------------- 

        .usa-icon-list__title {

        font-size: .98rem;

        line-height: 1.2;

        margin-bottom: 0;

        padding-top: .425ex;

Preview

Default

Wash your hands for 20 seconds with soap
Stay six feet away from others
Avoid large gatherings

Simple content

Benefits of joining Global Entry program:

No processing lines
Access to expedited entry benefits in other countries
Available at major U.S. airports
Reduced wait times

Rich content

Donate cash when possible.

Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.
Confirm what donations are needed.

Unneeded and unsolicited goods burden local organizations’ ability to meet survivors’ confirmed needs, drawing away valuable volunteer labor, transportation and warehouse space.
Talk to trusted organizations about volunteering.

Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.

Custom size with rich content

Here are a few easy ways you can help reduce energy use and costs while spending more time at home.

Let the sun shine.

On sunny days, open your curtains to allow the sun to naturally warm the rooms of your home without using electricity. Natural sunlight can also lift your mood to help brighten your day. On warm days, close your curtains to help keep your house cool.
Adjust your schedule.

Instead of running high-energy-use appliances such as dishwashers and clothes dryers during mid-afternoon or early evening hours, operate them early in the morning or late at night. Some utilities charge less at off-peak times, which will help reduce your costs.
Fill it up.

Wash full loads, whether it’s clothes or dishes. Washing multiple small loads means you’re using and heating more water, which can increase your expenses. Using cold water for clothes washing can also help lower your costs.

Custom size

Timing. Is now the right time to start a business?

Funding. Do I have enough money to launch a business?

Need. Will this business fill a real need for my customers?

<!-- CUSTOM STYLES  -->
<style>



</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-il">Details</button>
    </h4>
    <div id="details-il" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/icon-list/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>An icon list reinforces the meaning and visibility of individual list items with a leading icon.</p>

      <h5>Guidance</h5>
<p><strong>Do-and-don’t lists.</strong> Icon lists help reinforce the message of a list item using a visual cue as a progressive enhancement. This can be effective in a list, or pair of lists, that describe actions users should do or not do. A pair of icons with clear and opposite meaning, like check_circle () and cancel (), create an effective do-and-don’t list.</p>
<p><strong>Features and metadata.</strong> Use an icon list to enhance a list of features, like a campsite’s amenities or other lists where icons might help users understand content at a glance.</p>
<p><strong>Important tasks or requirements.</strong> Use an icon list to help users find, distinguish, and verify related steps or tasks that can be completed in any order, like a checklist of items to pack or documents to complete.</p>
<p><strong>Printable checklists.</strong> Users may wish to print a page and use it as a physical checklist. This kind of static checklist is not an interactive form. Use an icon like check_box_outline_blank () to provide a space for physical checking.</p>
        <h6>Usability</h6>
        <ul>
          <li><strong>Use consistent headings.</strong> Headings should be written with parallel structure. For example, start each with an action verb. When possible, keep headings short enough to fit on one or two lines.
</li>
<li><strong>Add rich content sparingly.</strong> Each list item can display rich text content like HTML, images, and even other components. Be succinct. Too much complexity distracts from the impact of an icon list.</li>
<li><strong>Use similar icons.</strong> Use the same icon for each list item unless variation is meaningful, as with our check_circle icon () and cancel icon (). Icons should come from the same icon library and have a similar look and feel.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Don’t rely on the icons alone to convey meaning.</strong> Use text and context to establish the meaning of your list, and use the icon to reinforce that meaning as a progressive enhancement.</li>
<li><strong>Use colors with accessible contrast.</strong> While the icons in an icon list might be considered decorative progressive enhancement, aim for accessible AA contrast. This assures legibility on printed pages as well.</li>
<li><strong>Hide most icons from screen readers.</strong> This component uses the aria-hidden="true" and role=”img” attributes because the icons are used solely as a visual progressive enhancement. The icon’s meaning is redundant with the list content.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-il">Specs</button>
    </h4>
    <div id="specs-il" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>
        ------------------- <br />
        .usa-icon-list__title {</br>
        font-size: .98rem;</br>
        line-height: 1.2;</br>
        margin-bottom: 0;</br>
        padding-top: .425ex; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> <div class="grid-row grid-gap">
  <div class="tablet:grid-col">
    <h3 class="site-preview-heading border-top-1px border-base-light padding-top-1 margin-top-0">Default</h3>
    <ul class="usa-icon-list">
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-green">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#check_circle"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      Wash your hands for 20 seconds with soap
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-green">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#check_circle"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">Stay six feet away from others</div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-red">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#cancel"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">Avoid large gatherings</div>
  </li>
</ul>
  </div>
  <div class="tablet:grid-col">
    <h3 class="site-preview-heading border-top-1px border-base-light padding-top-1 tablet:margin-top-0">Simple content</h3>
    <p class="margin-bottom-2">Benefits of joining Global Entry program:</p>
    <ul class="usa-icon-list usa-icon-list--primary">
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#thumb_up_alt"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">No processing lines</div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#thumb_up_alt"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      Access to expedited entry benefits in other countries
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#thumb_up_alt"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">Available at major U.S. airports</div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#thumb_up_alt"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">Reduced wait times</div>
  </li>
</ul>
  </div>
</div>
<div class="grid-row grid-gap">
  <div class="tablet:grid-col">
    <h3 class="site-preview-heading border-top-1px border-base-light padding-top-1">Rich content</h3>
    <ul class="usa-icon-list">
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-ink">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#check_circle"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">Donate cash when possible.</h3>
      <p>
        Financial contributions to recognized disaster relief organizations are
        the fastest, most flexible and most effective method of donating.
        Organizations on the ground know what items and quantities are needed,
        often buy in bulk with discounts and, if possible, purchase through
        businesses local to the disaster, which supports economic recovery.
      </p>
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-ink">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#check_circle"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">Confirm what donations are needed.</h3>
      <p>
        Unneeded and unsolicited goods burden local organizations’ ability to
        meet survivors’ confirmed needs, drawing away valuable volunteer labor,
        transportation and warehouse space.
      </p>
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-ink">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#check_circle"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">
        Talk to trusted organizations about volunteering.
      </h3>
      <p>
        Financial contributions to recognized disaster relief organizations are
        the fastest, most flexible and most effective method of donating.
        Organizations on the ground know what items and quantities are needed,
        often buy in bulk with discounts and, if possible, purchase through
        businesses local to the disaster, which supports economic recovery.
      </p>
    </div>
  </li>
</ul>
  </div>
  <div class="tablet:grid-col">
    <h3 class="site-preview-heading border-top-1px border-base-light padding-top-1">Custom size with rich content</h3>
    <p class="margin-bottom-2">Here are a few easy ways you can help reduce energy use and costs while spending more time at home.</p>
    <ul class="usa-icon-list usa-icon-list--size-lg">
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-green">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#attach_money"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">Let the sun shine.</h3>
      <p>
        On sunny days, open your curtains to allow the sun to naturally warm the
        rooms of your home without using electricity. Natural sunlight can also
        lift your mood to help brighten your day. On warm days, close your
        curtains to help keep your house cool.
      </p>
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-green">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#attach_money"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">Adjust your schedule.</h3>
      <p>
        Instead of running high-energy-use appliances such as dishwashers and
        clothes dryers during mid-afternoon or early evening hours, operate them
        early in the morning or late at night. Some utilities charge less at
        off-peak times, which will help reduce your costs.
      </p>
    </div>
  </li>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-green">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#attach_money"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <h3 class="usa-icon-list__title">Fill it up.</h3>
      <p>
        Wash full loads, whether it’s clothes or dishes. Washing multiple small
        loads means you’re using and heating more water, which can increase your
        expenses. Using cold water for clothes washing can also help lower your
        costs.
      </p>
    </div>
  </li>
</ul>
  </div>
</div>
<div class="grid-row grid-gap">
  <div class="tablet:grid-col">
    <h3 class="site-preview-heading border-top-1px border-base-light padding-top-1">Custom size</h3>
    <ul class="usa-icon-list usa-icon-list--size-lg">
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-blue">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#help"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <span class="text-bold">Timing.</span> Is now the right time to start a
      business?
    </div>
  </li>
<br>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-blue">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#help"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <span class="text-bold">Funding.</span> Do I have enough money to launch a
      business?
    </div>
  </li>
<br>
  <li class="usa-icon-list__item">
    <div class="usa-icon-list__icon text-blue">
      <svg class="usa-icon" aria-hidden="true" role="img">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#help"></use>
      </svg>
    </div>
    <div class="usa-icon-list__content">
      <span class="text-bold">Need.</span> Will this business fill a real need
      for my customers?
    </div>
  </li>
</ul>
  </div>
</div></div>

Out of the Box - Identifier

Details and Specs

Requirements USWDS Specs Designs

Description

The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.

Guidance

To identify a site’s parent agency.

To display links required by federal laws and policies. The identifier includes links required on all government sites. When to consider something else

Any time it would be misleading. The identifier should be used to reduce confusion. Avoid using the identifier on any site meant only for testing or otherwise not meant to be identified as an official government website.

Any time it would be misleading. Redundant content. Don’t add the identifier without removing any duplicate links from your existing site footer. Favor the common links and content in the identifier over any equivalent content in your site footer.

Usability

Use the identifier component for required links. If your site already includes the federally required links in its site footer, remove them in favor of the links in the identifier. This assures that site visitors find the required links in a consistent location from site to site.
Display the parent agency logo, not the product logo. The identifier is meant to identify a website’s parent agency as a complement to the site footer. Site-specific logos, like a product logo, should be in the site footer, not the identifier.
Use language that matches section headings. The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. Our component scans the page for h2 and h3 elements within the main element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
Display multiple parents and logos in hierarchical order. If a site has more than one parent agency, you may display a reference and a logo for each parent in hierarchical order, highest first. For example, “An official website of [Grandparent Department] and [Parent Agency]”.
Avoid distraction. The identifier appears on every page of your site. Choose background colors that fit with your site theme and avoid color combinations that draw excessive attention to the identifier.
Keep the text up-to-date. Use the most current version of the identifier.

Accessibility

Use proper landmarks for each identifier section. Each identifier section should be either a section or a nav, and include an appropriate aria-label property.
Add an alt attribute to each logo image. Use [Agency shortname] logo as the alt text for each logo image you add..
Use image role for any SVG images. Use role="img" with any SVG logo image.

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



       @media (min-width: 64em)

       .usa-identifier__section--required-links {

       font-size: 1.06rem;

       }



      @media (min-width: 40em)

      .usa-identifier__section--required-links {

      padding-bottom: 0.5rem;

      padding-top: 0.5rem;

      }

Preview

Create Identifier Component

Default

Looking for U.S. government information and services?

Visit USA.gov

Default (Spanish)

¿Necesita información y servicios del Gobierno?

Visite USA.gov en Español

Multiple parents and logos

Looking for U.S. government information and services?

Visit USA.gov

Multiple parents and logos (Spanish)

¿Necesita información y servicios del Gobierno?

Visite USA.gov en Español

No logos

Looking for U.S. government information and services?

Visit USA.gov

Taxpayer disclaimer

Looking for U.S. government information and services?

Visit USA.gov

Taxpayer disclaimer (Spanish)

¿Necesita información y servicios del Gobierno?

Visite USA.gov en Español

<!-- CUSTOM STYLES  -->
<style>
.usa-identifier__required-link, .usa-identifier__required-link.usa-link {
    color: #adadad !important;
    display: inline-block;
}

 ul.usa-identifier__required-links-list {
    list-style: none !important;
}

.usa-identifier__identity-disclaimer a, .usa-identifier__identity-disclaimer a:visited {
    color: #e6e6e6 !important;
}

.usa-identifier__section--usagov a {
    color: #e6e6e6 !important;
    font-weight: 700;
}
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-idb">Details</button>
    </h4>
    <div id="details-idb" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="#" class="button primary-button-1" title="Link to Requirements Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/identifier/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.
</p>

      <h5>Guidance</h5>
<p><strong>To identify a site’s parent agency.</strong The identifier is a complement to the USWDS banner. Use the identifier to tell users what agency is responsible for your website.
</p>

<p><strong>To display links required by federal laws and policies.</strong> The identifier includes links required on all government sites.
When to consider something else</p>

<p><strong>Any time it would be misleading.</strong> The identifier should be used to reduce confusion. Avoid using the identifier on any site meant only for testing or otherwise not meant to be identified as an official government website.
</p>

<p><strong>Any time it would be misleading.</strong> Redundant content. Don’t add the identifier without removing any duplicate links from your existing site footer. Favor the common links and content in the identifier over any equivalent content in your site footer. </p>

<h6>Usability</h6>

        <ul>
          <li><strong>Use the identifier component for required links.</strong> If your site already includes the federally required links in its site footer, remove them in favor of the links in the identifier. This assures that site visitors find the required links in a consistent location from site to site.

 </li>
          <li><strong>Display the parent agency logo, not the product logo.</strong> The identifier is meant to identify a website’s parent agency as a complement to the site footer. Site-specific logos, like a product logo, should be in the site footer, not the identifier.
 </li>
          <li><strong>Use language that matches section headings.</strong> The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. Our component scans the page for h2 and h3 elements within the main element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
 </li>
          <li><strong>Display multiple parents and logos in hierarchical order.</strong> If a site has more than one parent agency, you may display a reference and a logo for each parent in hierarchical order, highest first. For example, “An official website of [Grandparent Department] and [Parent Agency]”.
 </li>
          <li><strong>Avoid distraction.</strong> The identifier appears on every page of your site. Choose background colors that fit with your site theme and avoid color combinations that draw excessive attention to the identifier.
 </li>
          <li><strong>Keep the text up-to-date.</strong> Use the most current version of the identifier.
 </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Use proper landmarks for each identifier section.</strong> Each identifier section should be either a section or a nav, and include an appropriate aria-label property.</li>
<li><strong>Add an alt attribute to each logo image.</strong> Use [Agency shortname] logo as the alt text for each logo image you add..
</li>
<li><strong>Use image role for any SVG images.</strong> Use role="img" with any SVG logo image.
</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-idb">Specs</button>
    </h4>
    <div id="specs-idb" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

       @media (min-width: 64em)<br/>
       .usa-identifier__section--required-links {<br/>
       font-size: 1.06rem;<br/>
       }<br/><br/>

      @media (min-width: 40em)<br/>
      .usa-identifier__section--required-links {<br/>
      padding-bottom: 0.5rem;<br/>
      padding-top: 0.5rem;<br/>
      }<br/><br/>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Create Identifier Component </div>
<h3 class="site-preview-heading">Default</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Agency identifier,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Agency description,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>official website of the
          <a href="">&lt;Parent agency&gt;</a>
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Important links,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >About &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Accessibility statement</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >FOIA requests</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >No FEAR Act data</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Office of the Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Performance reports</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Privacy policy</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="U.S. government information and services,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        Looking for U.S. government information and services?
      </div>
      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
    </div>
  </section>
</div>



<h3 class="site-preview-heading">Default (Spanish)</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Identificador de la agencia,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="javascript:void(0)" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Descripción de la agencia,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>Un sitio web oficial de
          <a href="">&lt;Parent agency&gt;</a>
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Enlaces importantes,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >Acerca de &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Declaración de accesibilidad</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Solicitud a través de FOIA</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Datos de la ley No FEAR</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Oficina del Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Informes de desempeño</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Política de privacidad</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="Información y servicios del Gobierno de EE. UU.,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        ¿Necesita información y servicios del Gobierno?
      </div>
      <a href="https://www.usa.gov/espanol/" class="usa-link"
        >Visite USA.gov en Español</a
      >
    </div>
  </section>
</div>



<h3 class="site-preview-heading">Multiple parents and logos</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Agency identifier,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="javascript:void(0)" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
          /> </a
        ><a href="javascript:void(0);" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Other agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Agency description,,,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>official website of the
          <a href="">&lt;Parent agency&gt;</a> and the
          <a href="javascript:void(0)">&lt;Other agency&gt;</a>
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Important links,,,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >About &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Accessibility statement</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >FOIA requests</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >No FEAR Act data</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Office of the Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Performance reports</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Privacy policy</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="U.S. government information and services,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        Looking for U.S. government information and services?
      </div>
      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
    </div>
  </section>
</div>



<h3 class="site-preview-heading">Multiple parents and logos (Spanish)</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Identificador de la agencia,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="javascript:void(0)" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
          /> </a
        ><a href="javascript:void(0);" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Other agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Descripción de la agencia,,,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>Un sitio web oficial de
          <a href="">&lt;Parent agency&gt;</a> y
          <a href="javascript:void(0)">&lt;Other agency&gt;</a>
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Enlaces importantes,,,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >Acerca de &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Declaración de accesibilidad</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Solicitud a través de FOIA</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Datos de la ley No FEAR</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Oficina del Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Informes de desempeño</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Política de privacidad</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="Información y servicios del Gobierno de EE. UU.,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        ¿Necesita información y servicios del Gobierno?
      </div>
      <a href="https://www.usa.gov/espanol/" class="usa-link"
        >Visite USA.gov en Español</a
      >
    </div>
  </section>
</div>



<h3 class="site-preview-heading">No logos</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Agency identifier,,"
  >
    <div class="usa-identifier__container">
      <section
        class="usa-identifier__identity"
        aria-label="Agency description,,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>official website of the
          <a href="">&lt;Parent agency&gt;</a>
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Important links,,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >About &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Accessibility statement</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >FOIA requests</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >No FEAR Act data</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Office of the Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Performance reports</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Privacy policy</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="U.S. government information and services,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        Looking for U.S. government information and services?
      </div>
      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
    </div>
  </section>
</div>



<h3 class="site-preview-heading">Taxpayer disclaimer</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Agency identifier,,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="javascript:void(0)" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Agency description,,,,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>official website of the
          <a href="">&lt;Parent agency&gt;</a> . Produced and published at
          taxpayer expense.
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Important links,,,,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >About &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Accessibility statement</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >FOIA requests</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >No FEAR Act data</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Office of the Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Performance reports</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Privacy policy</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="U.S. government information and services,,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        Looking for U.S. government information and services?
      </div>
      <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
    </div>
  </section>
</div>



<h3 class="site-preview-heading">Taxpayer disclaimer (Spanish)</h3>

  <div class="usa-identifier">
  <section
    class="usa-identifier__section usa-identifier__section--masthead"
    aria-label="Identificador de la agencia,,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__logos">
        <a href="javascript:void(0)" class="usa-identifier__logo"
          ><img
            class="usa-identifier__logo-img"
            src="/themes/custom/samhsa_uswds_base/images/circle-gray-20.svg"
            alt="&lt;Parent agency&gt; logo"
            role="img"
        /></a>
      </div>
      <section
        class="usa-identifier__identity"
        aria-label="Descripción de la agencia,,,,"
      >
        <p class="usa-identifier__identity-domain">domain.gov</p>
        <p class="usa-identifier__identity-disclaimer">
          <span aria-hidden="true">An </span>Un sitio web oficial de
          <a href="">&lt;Parent agency&gt;</a> . Producido y publicado con
          dinero de los contribuyentes de impuestos.
        </p>
      </section>
    </div>
  </section>
  <nav
    class="usa-identifier__section usa-identifier__section--required-links"
    aria-label="Enlaces importantes,,,,"
  >
    <div class="usa-identifier__container">
      <ul class="usa-identifier__required-links-list">
        <li class="usa-identifier__required-links-item">
          <a
            href="javascript:void(0)"
            class="usa-identifier__required-link usa-link"
            >Acerca de &lt;Parent shortname&gt;</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Declaración de accesibilidad</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Solicitud a través de FOIA</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Datos de la ley No FEAR</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Oficina del Inspector General</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Informes de desempeño</a
          >
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="" class="usa-identifier__required-link usa-link"
            >Política de privacidad</a
          >
        </li>
      </ul>
    </div>
  </nav>
  <section
    class="usa-identifier__section usa-identifier__section--usagov"
    aria-label="Información y servicios del Gobierno de EE. UU.,,,,"
  >
    <div class="usa-identifier__container">
      <div class="usa-identifier__usagov-description">
        ¿Necesita información y servicios del Gobierno?
      </div>
      <a href="https://www.usa.gov/espanol/" class="usa-link"
        >Visite USA.gov en Español</a
      >
    </div>
  </section>
</div>

Out of the Box - In Page Navigation

Details and Specs

Requirements USWDS Specs Designs

Description

In-page navigation helps users understand the contents of a page and navigate to the section they need to read. This component is most suited for lengthy pages. The component is displayed alongside the main content in a sticky container that remains fixed when the user scrolls. When a user clicks an item on the in-page navigation, the page smoothly scrolls to the target section.

Guidance

Long pages. In-page navigation can offer a substantial improvement to user experience for pages that include three or more distinct content sections or content that exceeds three or more viewport heights.

Short pages. For pages that require little or no scrolling, in-page navigation is not necessary.

Unstructured content. Pages that lack hierarchical structures (h2 and h3 elements in the main) cannot use the in-page navigation component.

Infinite scrolling. For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.

Usability

Display the in-page navigation to the side of the main content. Visually, place the in-page navigation component after the main content in the language’s natural reading order. For example, for a left-to-right language like English, this component goes to the right of the main content.
Make it stand out. Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. Include borders and well-defined link active states to clearly convey the utility and purpose of the section. Define a consistent width for the in-page navigation component that is sufficiently wide and does not change based on text length.
Use language that matches section headings. The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. Our component scans the page for h2 and h3 elements within the main element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
Don’t include the page h1 in the navigation. Each page should have a single h1 to describe its contents. It would be redundant to include this heading level in the in-page navigation.
In-page navigation heading. Inform users that they will scroll down on the same page by including in-page navigation under a descriptive title such as “On this page,” “In this article,” or “Table of contents.”

Accessibility

Allow keyboard navigation. Users should be able to navigate between items by using the Tab key. They should also be able to activate a link when pressing Enter on their keyboard. Users should be able to activate hover and focus states with both a mouse and a keyboard.
Keyboard users should access the in-page navigation before the main content. When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation before the main content. Since the in-page navigation appears after the main content in the reading order, this may seem like a tab-order error. However, tabbing through the entire page before getting to in-page navigation links is not logical, creates confusion, and diminishes the user experience.
Set focus state on section target for keyboard users. When keyboard users follow an in-page anchor link set the focus state to the link target when the user presses the Enter key. When mouse users follow an in-page anchor link the focus should remain on the selected link.

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



       .usa-in-page-nav__list a:not(.usa-button) {

       display: block;

       padding: 0.5rem 1rem;

       text-decoration: none;

       }

Preview

Create in-page navigation page

Sample in-page navigation page

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

Consectetuer adipiscing elit

Nullam sit amet enim

Vivamus pharetra posuere sapien

Suspendisse id velit

Orci magna rhoncus neque

Aliquam erat volutpat: velit vitae ligula volutpat

Vitae ligula

<style>
</style>

<script></script>

<div class="usa-accordion style-admin usa-accordion--bordered">
<div class="grid-row margin-bottom-2">
<div class="grid-col-6 usa-accordion-group-header">
<h3>
<p>Details and Specs</p>
</h3>
</div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">

<button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-ipn">Details</button>
</h4>
<div id="details-ipn" class="usa-accordion__content">
<p style="text-align: center;">
<a href="#" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
<a href="https://designsystem.digital.gov/components/in-page-navigation/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
<a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
</p>

<h5>Description</h5>
<p>In-page navigation helps users understand the contents of a page and navigate to the section they need to read. This component is most suited for lengthy pages. The component is displayed alongside the main content in a sticky container that remains fixed when the user scrolls. When a user clicks an item on the in-page navigation, the page smoothly scrolls to the target section.
</p>

<h5>Guidance</h5>
<p><strong>Long pages.</strong> In-page navigation can offer a substantial improvement to user experience for pages that include three or more distinct content sections or content that exceeds three or more viewport heights.</p>

<p><strong>Short pages.</strong> For pages that require little or no scrolling, in-page navigation is not necessary.
</p>

<p><strong>Unstructured content.</strong> Pages that lack hierarchical structures (h2 and h3 elements in the main) cannot use the in-page navigation component.
</p>
Infinite scrolling. For pages that feature infinite scrolling, in-page navigation is neither a practical nor feasible feature.
<h6>Usability</h6>
<ul>
<li><strong>Display the in-page navigation to the side of the main content.</strong> Visually, place the in-page navigation component after the main content in the language’s natural reading order. For example, for a left-to-right language like English, this component goes to the right of the main content.

</li>
<li><strong>Make it stand out.</strong> Site visitors should be able to quickly and easily distinguish in-page navigation from other landmarks on the page. Include borders and well-defined link active states to clearly convey the utility and purpose of the section. Define a consistent width for the in-page navigation component that is sufficiently wide and does not change based on text length.
</li>
<li><strong>Use language that matches section headings.</strong> The text of the links displayed within the in-page navigation aside should match the heading text of the target sections. Our component scans the page for h2 and h3 elements within the main element, automatically creates the in-page navigation block, and dynamically inserts the text to match the section headings.
</li>
<li><strong>Don’t include the page h1 in the navigation.</strong> Each page should have a single h1 to describe its contents. It would be redundant to include this heading level in the in-page navigation.
</li>
<li><strong>In-page navigation heading.</strong> Inform users that they will scroll down on the same page by including in-page navigation under a descriptive title such as “On this page,” “In this article,” or “Table of contents.”

</li>
</ul>

<h6>Accessibility</h6>
<ul>
<li><strong>Allow keyboard navigation.</strong> Users should be able to navigate between items by using the Tab key. They should also be able to activate a link when pressing Enter on their keyboard. Users should be able to activate hover and focus states with both a mouse and a keyboard.</li>
<li><strong>Keyboard users should access the in-page navigation before the main content.</strong> When a user tabs through a page that contains the in-page navigation component, they should find the in-page navigation before the main content. Since the in-page navigation appears after the main content in the reading order, this may seem like a tab-order error. However, tabbing through the entire page before getting to in-page navigation links is not logical, creates confusion, and diminishes the user experience.
</li>
<li><strong>Set focus state on section target for keyboard users.</strong> When keyboard users follow an in-page anchor link set the focus state to the link target when the user presses the Enter key. When mouse users follow an in-page anchor link the focus should remain on the selected link.
</li>
</ul>

<h5>Examples</h5>
<ul>
<li>Example List Goes Here </li>
</ul>
</div>
</div>

<div class="usa-accordion_panel_wrapper tablet:grid-col-12">
<h4 class="usa-accordion__heading">

<button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-ipn">Specs</button>
</h4>
<div id="specs-ipn" class="usa-accordion__content">
<code>
font-family: "Source Sans Pro",sans-serif; <br />
font-family: "Source Sans Pro",sans-serif; <br />
font-color: $charcoal; /* #4A4A4A */ <br />
DESKTOP: font-size: 1.06rem; /* 16.96px / <br />
MOBILE: font-size: 1rem; /* 16px / <br />
line-height: 1.5; /* 25.44px */ <br />
font-weight: 400; <br /><br />

.usa-in-page-nav__list a:not(.usa-button) {<br />
display: block;<br />
padding: 0.5rem 1rem;<br />
text-decoration: none;<br />
}<br /><br />

</code>
</div>
</div>
</div>
<br>
<hr>
<br>

<h3>Preview</h3>
<div> Create in-page navigation page </div>
<div class="usa-in-page-nav-container">
<aside
class="usa-in-page-nav noLi"
data-title-text="On this page"
data-title-heading-level="h4"
data-scroll-offset="0"
data-root-margin="0px 0px 0px 0px"
data-threshold="1"
></aside>
<main id="main-content" class="main-content">
<h1>Sample in-page navigation page</h1>
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h2>Consectetuer adipiscing elit</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h3>Nullam sit amet enim</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h3>Vivamus pharetra posuere sapien</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h3>Suspendisse id velit</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h3>Orci magna rhoncus neque</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h2>Aliquam erat volutpat: velit vitae ligula volutpat</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<h3>Vitae ligula</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo,
ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio
lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla
facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra
gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida,
orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus
pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna
rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.
Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat
volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra
posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id
pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit
vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit.
Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non
turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat
condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla
libero. Vivamus pharetra posuere sapien.
</p>
</main>
</div>

Out of the Box - Input Mask

Details and Specs

Requirements USWDS Specs Designs

Description

An input mask is a string expression that constrains input to support valid input values.

Guidance

Common input patterns. In fields with a specific expected format like Social Security Number or ZIP code, an input mask allows you to constrain and shape the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.

When the input requires a free-form field. When there isn’t a common input pattern to use, input masking is not appropriate.

When the pattern is too complicated to allow for a valid input mask. A pattern like email, with many possible scenarios for input, is not a good candidate for masking. Allow the user to enter their email address (or other complicated data) and have your validation library confirm before form submission.

Usability

Wait to validate. Only show error validation messages or stylings after a user has interacted with a particular field.

Accessibility

Include a label. Make sure each form control includes a label with a for attribute related to the id of the input element it labels.
Use helpful hint text. Make sure any hint text helps users understand what they need to input.
Customization. As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        h3 {

        font-size: 1.75rem;

        }



        .usa-form {

        max-width: 20rem;

        } 

        ------------------- 

        .usa-input-group input {

        border: 0;

        height: 100%;

        margin-top: 0;

        min-width: 0;

        width: 100%;

        }



       .usa-input-group {

       -webkit-box-align: center;

       -ms-flex-align: center;

       align-items: center;

       background-color: #fff;

       display: -webkit-box;

       display: -ms-flexbox;

       display: flex;

       padding: 0;

       }

Preview

Enter a value

Social Security Number Input Mask

US Telephone Number Input Mask

9 Digit US ZIP Code Input Mask

Alphanumeric Input Mask

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-im">Details</button>
    </h4>
    <div id="details-im" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="#" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/input-mask/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>An input mask is a string expression that constrains input to support valid input values.
</p>

      <h5>Guidance</h5>
<p><strong>Common input patterns.</strong> In fields with a specific expected format like Social Security Number or ZIP code, an input mask allows you to constrain and shape the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.</p>
<p><strong>When the input requires a free-form field.</strong> When there isn’t a common input pattern to use, input masking is not appropriate.</p>
<p><strong>When the pattern is too complicated to allow for a valid input mask.</strong> A pattern like email, with many possible scenarios for input, is not a good candidate for masking. Allow the user to enter their email address (or other complicated data) and have your validation library confirm before form submission.</p>

</p>
        <h6>Usability</h6>
        <ul>
          <li><strong>Wait to validate. </strong> Only show error validation messages or stylings after a user has interacted with a particular field.

 </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Include a label.</strong> Make sure each form control includes a label with a for attribute related to the id of the input element it labels.</li>
<li><strong>Use helpful hint text. </strong> Make sure any hint text helps users understand what they need to input. </li>
<li><strong>Customization. </strong>  As you customize, make sure you follow accessibility guidelines for form templates and the accessibility guidelines for form controls.
</li>


        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-im">Specs</button>
    </h4>
    <div id="specs-im" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        h3 {<br />
        font-size: 1.75rem;<br />
        }<br /><br />

        .usa-form {<br />
        max-width: 20rem;<br />
        } <br />
        ------------------- <br />
        .usa-input-group input {<br />
        border: 0;<br />
        height: 100%;<br />
        margin-top: 0;<br />
        min-width: 0;<br />
        width: 100%;<br />
        }<br /><br />

       .usa-input-group {<br />
       -webkit-box-align: center;<br />
       -ms-flex-align: center;<br />
       align-items: center;<br />
       background-color: #fff;<br />
       display: -webkit-box;<br />
       display: -ms-flexbox;<br />
       display: flex;<br />
       padding: 0;<br />
       }<br /> <br />


      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Enter a value </div>
<h3 class="site-preview-heading">Social Security Number Input Mask</h3>

<form class="usa-form">
  <label class="usa-label" for="ssn">Social Security Number</label>
  <div class="usa-hint" id="ssnHint">For example, 123 45 6789</div>
  <input
    id="ssn"
    inputmode="numeric"
    name="ssn"
    placeholder="___ __ ____"
    pattern="^(?!(000|666|9))\\d{3} (?!00)\\d{2} (?!0000)\\d{4}$"
    class="usa-input usa-masked"
    aria-describedby="ssnHint"
  />
</form>

<h3 class="site-preview-heading">US Telephone Number Input Mask</h3>

<form class="usa-form">
  <label class="usa-label" for="tel">US Telephone Number</label>
  <div class="usa-hint" id="telHint">For example, 123-456-7890</div>
  <input
    id="tel"
    type="tel"
    inputmode="numeric"
    name="tel"
    placeholder="___-___-____"
    pattern="\\d{3}-\\d{3}-\\d{4}"
    class="usa-input usa-masked"
    aria-describedby="telHint"
  />
</form>

<h3 class="site-preview-heading">9 Digit US ZIP Code Input Mask</h3>

<form class="usa-form">
  <label class="usa-label" for="zip">ZIP Code</label>
  <div class="usa-hint" id="zipHint">For example, 12345-6789</div>
  <input
    id="zip"
    inputmode="numeric"
    name="zip"
    placeholder="_____-____"
    pattern="^[0-9]{5}(?:-[0-9]{4})?$"
    class="usa-input usa-masked"
    aria-describedby="zipHint"
  />
</form>

<h3 class="site-preview-heading">Alphanumeric Input Mask</h3>

<form class="usa-form">
  <label class="usa-label" for="alphanumeric">Alphanumeric</label>
  <div class="usa-hint" id="alphanumericHint">For example, A1B 2C3</div>
  <input
    id="alphanumeric"
    inputmode="text"
    name="alphanumeric"
    placeholder="___ ___"
    pattern="\\w\\d\\w \\d\\w\\d"
    class="usa-input usa-masked"
    aria-describedby="alphanumericHint"
    data-charset="A#A #A#"
  />
</form>

Out of the Box - Input Prefix and Suffix

Details and Specs

Requirements USWDS Specs Designs

Description

Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.

Guidance

Highlight the type of information. Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information the user needs to enter. Some common examples include units of measurement (like lbs or ft), symbols (like $ or %), or even icons (like showing an eye for password visibility).

Input cannot include units. Use prefixes and suffixes if the input refers to a unit or currency amount (like a length or dollar amount), but the user’s input must include digits only, not units or a currency symbol.

Reduce mental load. Adding a prefix or suffix can help the user more quickly understand what kind of information is requested.

Usability

Follow best practices when using an icon. If you include an icon as a prefix or suffix, follow the design system’s icon guidance.
Use common abbreviations. Only use commonly understood abbreviations when indicating a text prefix or suffix. Don’t use the full word.

Accessibility

Hide from screen readers. Prefixes and suffixes are hidden from screen readers using aria-hidden.
Use descriptive labels. Labels should clearly indicate what type of data to enter since prefixes and suffixes are hidden from screen readers. For example, if you’re requesting someone’s height in inches, you have “in.” appear in a suffix, but your form label should say “Height, in inches.”

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-form {

        max-width: 20rem;

        } 

        ------------------- 

        .usa-input-group input {

        border: 0;

        height: 100%;

        margin-top: 0;

        min-width: 0;

        width: 100%;

        }



       .usa-input-group {

       -webkit-box-align: center;

       -ms-flex-align: center;

       align-items: center;

       background-color: #fff;

       display: -webkit-box;

       display: -ms-flexbox;

       display: flex;

       padding: 0;

       }

Preview

Enter numeric value

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-ips">Details</button>
    </h4>
    <div id="details-ips" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="#" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/input-prefix-suffix/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.
</p>

      <h5>Guidance</h5>
<p><strong>Highlight the type of information.</strong> Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information the user needs to enter. Some common examples include units of measurement (like lbs or ft), symbols (like $ or %), or even icons (like showing an eye for password visibility).</p>

<p><strong>Input cannot include units.</strong> Use prefixes and suffixes if the input refers to a unit or currency amount (like a length or dollar amount), but the user’s input must include digits only, not units or a currency symbol.</p>

<p><strong>Reduce mental load.</strong> Adding a prefix or suffix can help the user more quickly understand what kind of information is requested.
</p>
        <h6>Usability</h6>
        <ul>
          <li><strong>Follow best practices when using an icon.</strong> If you include an icon as a prefix or suffix, follow the design system’s icon guidance.

 </li>
          <li><strong>Use common abbreviations.</strong> Only use commonly understood abbreviations when indicating a text prefix or suffix. Don’t use the full word.

 </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Hide from screen readers.</strong> Prefixes and suffixes are hidden from screen readers using aria-hidden. </li>
<li><strong>Use descriptive labels.</strong> Labels should clearly indicate what type of data to enter since prefixes and suffixes are hidden from screen readers. For example, if you’re requesting someone’s height in inches, you have “in.” appear in a suffix, but your form label should say “Height, in inches.” </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-ips">Specs</button>
    </h4>
    <div id="specs-ips" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .usa-form {<br />
        max-width: 20rem;<br />
        } <br />
        ------------------- <br />
        .usa-input-group input {<br />
        border: 0;<br />
        height: 100%;<br />
        margin-top: 0;<br />
        min-width: 0;<br />
        width: 100%;<br />
        }<br /><br />

       .usa-input-group {<br />
       -webkit-box-align: center;<br />
       -ms-flex-align: center;<br />
       align-items: center;<br />
       background-color: #fff;<br />
       display: -webkit-box;<br />
       display: -ms-flexbox;<br />
       display: flex;<br />
       padding: 0;<br />
       }<br /> <br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Enter numeric value </div>
<form class="usa-form">
  <label class="usa-label" for="example-input-prefix">Credit card number</label>
  <div class="usa-input-group">
    <div class="usa-input-prefix" aria-hidden="true">
      <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
        <use xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#credit_card"></use>
      </svg>
    </div>
    <input
      id="example-input-prefix"
      class="usa-input"
      pattern="[0-9]*"
      inputmode="numeric"
    />
  </div>
  <label class="usa-label" for="example-input-prefix-error"
    >Credit card number (Error)</label
  >
  <div class="usa-input-group usa-input-group--error">
    <div class="usa-input-prefix" aria-hidden="true">
      <svg aria-hidden="true" role="img" focusable="false" class="usa-icon">
        <use
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="/themes/custom/samhsa_uswds_base/images/sprite.svg#credit_card"
        ></use>
      </svg>
    </div>
    <input
      id="example-input-prefix-error"
      class="usa-input"
      pattern="[0-9]*"
      inputmode="numeric"
    />
  </div>
</form>
<form class="usa-form">
  <label class="usa-label" for="example-input-suffix">Weight, in pounds</label>
  <div class="usa-input-group usa-input-group--sm">
    <input
      id="example-input-suffix"
      class="usa-input"
      pattern="[0-9]*"
      inputmode="numeric"
    />
    <div class="usa-input-suffix" aria-hidden="true">lbs.</div>
  </div>
</form>

Out of the Box - Language selector

Details and Specs

Requirements USWDS Specs Designs

Description

The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.

Guidance

When to use the language selector with two languages component

Two languages are available. Help users find information in their preferred language when equivalent translated content is available in two languages.

When to consider something else Limited translated content is available. Consider using something else if the entirety of your content is not translated to a second language.

Accessibility guidance

There should be enough color contrast between the button, the text inside the button, and the background to ensure readability.

The language of each page should be identified using the HTML lang attribute (, for example). Please see H57: Using the language attribute on the HTML element.

All logically related items/links must be presented as an HTML unordered list.

Please see H48: Using ol, ul and dl for lists or groups of links.

Language links should contain a span element with the lang attribute. Every language link in the language selector dropdown that is different from content of the current page, should be defined using the lang attribute on a tag wrapping the relevant text (e.g., Hola means Hello.). Please see H58: Using language attributes to identify changes in the human language.

Examples

Example List Goes Here


font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



.button 

-----------

appearance: none;

background-color: $teal; /* #1A6986 */

border: $teal; /* #1A6986 */

border-radius: 0.25rem;

color: $white; /* #FFFFFF */

cursor: pointer;

display: inline-block;

line-height: 1.2; /* 20.32 */

max-width: 100%;

padding: 0.75rem 1.25rem;

text-align: center;

text-decoration: none;

user-select: none;

vertical-align: middle;

font-weight: normal;

white-space: normal;



.button:focus, .button:hover

-------------------

background-color: $steel; /* #5F636A */

Preview

Language selector with three or more languages

Give users the ability to select their preferred language when visiting a website available in three or more languages.

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="language-selector-detail">Details</button>
    </h4>
    <div id="language-selector-detail" class="usa-accordion__content">
      <p style="text-align: center;">
        <a class="button primary-button-1" href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7968" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a class="button primary-button-1" href="https://designsystem.digital.gov/components/language-selector/" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>The consistent placement, interface, and behavior of the language selection component allows users to easily find and access content in the language the user is most comfortable in.</p>

      <h6>Guidance</h6>
       <p>When to use the language selector with two languages component </p> </br>
         <p> <strong>Two languages are available. </strong>
            Help users find information in their preferred language when equivalent translated content is available in two languages. </p> </br>

         <p>When to consider something else
        Limited translated content is available. Consider using something else if the entirety of your content is not translated to a second language.  </p>

        <h6>Accessibility guidance</h6>

<p><strong>There should be enough color contrast between the button, the text inside the button, and the background to ensure readability.</strong></p>
<p>The language of each page should be identified using the HTML lang attribute (<html lang="en">, for example). Please see H57: Using the language attribute on the HTML element.

<p><strong>All logically related items/links must be presented as an HTML unordered list.</strong> </p>
<p>Please see H48: Using ol, ul and dl for lists or groups of links.</p>

<p><strong>Language links should contain a span element with the lang attribute. </strong>Every language link in the language selector dropdown that is different from content of the current page, should be defined using the lang attribute on a <span> tag wrapping the relevant text (e.g., <span lang="es">Hola</span> means Hello.). Please see H58: Using language attributes to identify changes in the human language.</p>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="language-selector-spec">Specs</button>
    </h4>
    <div id="language-selector-spec" class="usa-accordion__content">
       <code>
font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

.button <br/>
-----------<br/>
appearance: none;<br/>
background-color: $teal; /* #1A6986 */<br/>
border: $teal; /* #1A6986 */<br/>
border-radius: 0.25rem;<br/>
color: $white; /* #FFFFFF */<br/>
cursor: pointer;<br/>
display: inline-block;<br/>
line-height: 1.2; /* 20.32 */<br/>
max-width: 100%;<br/>
padding: 0.75rem 1.25rem;<br/>
text-align: center;<br/>
text-decoration: none;<br/>
user-select: none;<br/>
vertical-align: middle;<br/>
font-weight: normal;<br/>
white-space: normal;<br/><br/>

.button:focus, .button:hover<br/>
-------------------<br/>
background-color: $steel; /* #5F636A */<br/>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div class="usa-language-container">
  <button type="button" class="usa-button" role="button">
    <span lang="es" xml:lang="es">Español</span>
  </button>
</div>

<br/>
<h3> <strong>Language selector with three or more languages </strong></h3>
<p>Give users the ability to select their preferred language when visiting a website available in three or more languages.</p>

<div class="usa-language-container usa-language--small">
  <ul class="usa-language__primary usa-accordion">
    <li class="usa-language__primary-item">
      <button
        type="button"
        class="usa-button usa-language__link"
        role="button"
        aria-expanded="false"
        aria-controls="language-options"
      >
        Languages
      </button>
      <ul id="language-options" class="usa-language__submenu" hidden="true">
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="ar" xml:lang="ar"
              ><strong>العربية</strong> (Arabic)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="zh" xml:lang="zh"
              ><strong>简体字</strong> (Chinese - Simplified)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="en" xml:lang="en"><strong>English</strong></span></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="es" xml:lang="es"
              ><strong>Español</strong> (Spanish)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="fr" xml:lang="fr"
              ><strong>Français</strong> (French)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="it" xml:lang="it"
              ><strong>Italiano</strong> (Italian)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            ><span lang="ru" xml:lang="ru"
              ><strong>Pусский</strong> (Russian)</span
            ></a
          >
        </li>
        <li class="usa-language__submenu-item">
          <a href="javascript:void()"
            >Selected content in additional languages</a
          >
        </li>
      </ul>
    </li>
  </ul>
</div>

Out of the Box - Memorable Dates

Details and Specs

Requirements USWDS Specs Designs

Description

When to use the memorable date component

Guidance

Appropriate for most dates. This component is appropriate for most dates.

Consider a date picker for scheduling. If users are trying to schedule something, the date picker might make more sense. Be sure to also provide an option for text entry as well.

Usability

Label each field. Be sure each field is properly labeled — some countries enter dates in day, month, year order
Avoid select elements for day or year. It may be tempting to switch all or some of these text fields to select elements, but these tend to be more difficult to use than text inputs.

Accessibility

Follow input guidance. These text fields should follow the accessibility guidelines for all text inputs.
Don’t auto-advance focus. Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.
Use “text” instead of “number” inputs. Research indicates that numeric inputs still carry many usability problems, according to the gov.uk Technology in Government blog.

Examples

Example List Goes Here



.usa-memorable-date


        -------------------


    display: flex;

    flex-wrap: wrap;



.usa-form-group--day,
  .usa-form-group--month,
 .usa-form-group--year


  -------------------


    flex: 0 1 auto;

    margin-right: 1rem;

    width: -moz-fit-content;

    width: fit-content;



.usa-form-group--month


  -------------------


    width: 15rem;




.usa-select


  -------------------


    background-image: url(../img/usa-icons/unfold_more.svg),linear-gradient(transparent,transparent);
    background-repeat: no-repeat;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    background-color: #fff;

    background-position: right 0.5rem center;

    background-size: 1.25rem;

    padding-right: 2rem;




.usa-form-group--month select


        -------------------


    width: 15rem;



.usa-combo-box__input, .usa-input, .usa-input-group, .usa-select


  -------------------


    border-width: 1px;

    border-color: #5c5c5c;

    border-style: solid;

    border-radius: 0;

    color: #1b1b1b;

    display: block;

    height: 2.5rem;

    margin-top: 0.5rem;

    max-width: 30rem;

    padding: 0.5rem;

    width: 100%;




.usa-label


 -------------------


    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;

    font-size: 1.06rem;

    line-height: 1.3;

    display: block;

    font-weight: 400;

    margin-top: 1.5rem;

    max-width: 30rem;



.usa-combo-box__input, .usa-input, .usa-input-group, .usa-select


        -------------------


    border-width: 1px;

    border-color: #5c5c5c;

    border-style: solid;

    border-radius: 0;

    color: #1b1b1b;

    display: block;

    height: 2.5rem;

    margin-top: 0.5rem;

    max-width: 30rem;

    padding: 0.5rem;

    width: 100%;



.usa-form-group--day input, .usa-form-group--month input


   -------------------


    width: 3rem;



.usa-form-group--year input


        -------------------


    width: 4.5rem;

Preview

Date of Birth For example: January 19 2000

Month

Day

Year

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="memorable-dates-detail">Details</button>
    </h4>
    <div id="memorable-dates-detail" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/memorable-date/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
       <p>When to use the memorable date component</p>

      <h6>Guidance</h6>
         <ul class="usa-content-list">
           <li><strong>Appropriate for most dates.</strong> This component is appropriate for most dates.</li>
         </ul>

         <ul class="usa-content-list">
               <li><strong>Consider a date picker for scheduling.</strong> If users are trying to schedule something, the <a href="/components/date-picker">date picker</a> might make more sense. Be sure to also provide an option for text entry as well.</li>
          </ul>

         <h6>Usability </h6>
         <ul class="usa-content-list">
              <li><strong>Label each field.</strong> Be sure each field is properly labeled — some countries enter dates in day, month, year order</li>
             <li><strong>Avoid select elements for day or year.</strong> It may be tempting to switch all or some of these text fields to select elements, but these tend to be more difficult to use than text inputs.</li>
          </ul>

        <h6>Accessibility</h6>
         <ul class="usa-content-list">
             <li><strong>Follow input guidance.</strong> These text fields should follow the accessibility <a href="/components/text-input">guidelines for all text inputs</a>.</li>
             <li><strong>Don’t auto-advance focus.</strong> Do not use JavaScript to auto advance the focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.</li>
             <li><strong>Use “text” instead of “number” inputs.</strong> Research indicates that <a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">numeric inputs still carry many usability problems</a>, according to the gov.uk Technology in Government blog.</li>
           </ul>


      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="memorable-dates-spec">Specs</button>
    </h4>
    <div id="memorable-dates-spec" class="usa-accordion__content">
      <code>

.usa-memorable-date
<br />
        -------------------
<br />
    display: flex;<br />
    flex-wrap: wrap;<br /><br />

.usa-form-group--day,
  .usa-form-group--month,
 .usa-form-group--year
<br />
  -------------------
<br />
    flex: 0 1 auto;<br />
    margin-right: 1rem;<br />
    width: -moz-fit-content;<br />
    width: fit-content;<br /><br/>

.usa-form-group--month
<br />
  -------------------
<br />
    width: 15rem;</br><br />


.usa-select
<br />
  -------------------
<br />
    background-image: url(../img/usa-icons/unfold_more.svg),linear-gradient(transparent,transparent);
    background-repeat: no-repeat;<br />
    -webkit-appearance: none;<br />
    -moz-appearance: none;<br />
    appearance: none;<br />
    background-color: #fff;<br />
    background-position: right 0.5rem center;<br />
    background-size: 1.25rem;<br />
    padding-right: 2rem;</br></br>


.usa-form-group--month select
<br />
        -------------------
<br />
    width: 15rem;</br><br />

.usa-combo-box__input, .usa-input, .usa-input-group, .usa-select
<br />
  -------------------
<br />
    border-width: 1px;<br />
    border-color: #5c5c5c;<br />
    border-style: solid;<br />
    border-radius: 0;<br />
    color: #1b1b1b;<br />
    display: block;<br />
    height: 2.5rem;<br />
    margin-top: 0.5rem;<br />
    max-width: 30rem;<br />
    padding: 0.5rem;<br />
    width: 100%;<br /><br/>


.usa-label
<br />
 -------------------
<br />
    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;</br>
    font-size: 1.06rem;</br>
    line-height: 1.3;</br>
    display: block;</br>
    font-weight: 400;</br>
    margin-top: 1.5rem;</br>
    max-width: 30rem;</br></br>

.usa-combo-box__input, .usa-input, .usa-input-group, .usa-select
<br />
        -------------------
<br />
    border-width: 1px;</br>
    border-color: #5c5c5c;</br>
    border-style: solid;</br>
    border-radius: 0;</br>
    color: #1b1b1b;</br>
    display: block;</br>
    height: 2.5rem;</br>
    margin-top: 0.5rem;</br>
    max-width: 30rem;</br>
    padding: 0.5rem;</br>
    width: 100%;</br></br>

.usa-form-group--day input, .usa-form-group--month input
<br />
   -------------------
<br />
    width: 3rem;</br><br />

.usa-form-group--year input
<br />
        -------------------
<br />
    width: 4.5rem;</br><br />



      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<fieldset class="usa-fieldset">
  <legend class="usa-legend">Date of Birth</legend>
  <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
  <div class="usa-memorable-date">
    <div class="usa-form-group usa-form-group--month usa-form-group--select">
      <label class="usa-label" for="date_of_birth_month">Month</label>
      <select
        class="usa-select"
        id="date_of_birth_month"
        name="date_of_birth_month"
        aria-describedby="mdHint"
      >
        <option value>- Select -</option>
        <option value="1">01 - January</option>
        <option value="2">02 - February</option>
        <option value="3">03 - March</option>
        <option value="4">04 - April</option>
        <option value="5">05 - May</option>
        <option value="6">06 - June</option>
        <option value="7">07 - July</option>
        <option value="8">08 - August</option>
        <option value="9">09 - September</option>
        <option value="10">10 - October</option>
        <option value="11">11 - November</option>
        <option value="12">12 - December</option>
      </select>
    </div>
    <div class="usa-form-group usa-form-group--day">
      <label class="usa-label" for="date_of_birth_day">Day</label>
      <input
        class="usa-input"
        aria-describedby="mdHint"
        id="date_of_birth_day"
        name="date_of_birth_day"
        maxlength="2"
        pattern="[0-9]*"
        inputmode="numeric"
        value=""
      />
    </div>
    <div class="usa-form-group usa-form-group--year">
      <label class="usa-label" for="date_of_birth_year">Year</label>
      <input
        class="usa-input"
        aria-describedby="mdHint"
        id="date_of_birth_year"
        name="date_of_birth_year"
        minlength="4"
        maxlength="4"
        pattern="[0-9]*"
        inputmode="numeric"
        value=""
      />
    </div>
  </div>
</fieldset>

Out of the Box - Prose

Details and Specs

Requirements USWDS Specs Designs

Description

usa-prose is meant for blocks of text where it’s more difficult to add custom classes to individual elements, like a blog post where the content is coming out of markdown or a CMS.

Guidance

Adding usa-prose to any container adds USWDS default heading and body text styling to the following direct-child elements:
- h1-h6
- p
- ul and ol, plus child li
- table, plus child thead, th, td, and caption
Customize line-length by changing the value of $theme-text-measure and $theme-lead-measure in your USWDS settings configuration. Each setting accepts a measure token.
- $theme-text-measure
- $theme-lead-measure

Usability

Accessibility

Examples

Example List Goes Here



        .usa-prose>h1, .usa-prose>h2, .usa-prose>h3, .usa-prose>h4, .usa-prose>h5
        
------------------- 

        font-family: "Source Sans Pro",sans-serif;

        font-weight: 600;

        line-height: 1.5; 

        margin: 0 0 5px 0; 



        .usa-prose>h1,
        
------------------- 

        DESKTOP: font-size: 2.663rem; 

        MOBILE: font-size: 2.131rem 




        .usa-prose>h2
        
------------------- 

        DESKTOP: font-size: 1.991rem; 

        MOBILE: font-size: 1.594rem; 



        .usa-prose>h3
        
------------------- 

        DESKTOP: font-size: 1.648rem;

        MOBILE: font-size: 1.319rem; 



        .usa-prose>h4
        
------------------- 

        DESKTOP: font-size: 1.281rem;

        MOBILE: font-size: 1.156rem;



        .usa-prose>h5
        
------------------- 

          DESKTOP: font-size: 1.06rem;

          MOBILE: font-size: 1rem;



        .usa-prose>ol, .usa-prose>ul
            font-family: "Source Sans Pro",sans-serif;

            font-size: 1.125rem;

            line-height: 1.5;

            margin-bottom: 0.5em;




        .usa-prose>p
        
------------------- 

        line-height: 1.5;

        font-family: "Source Sans Pro",sans-serif;

        font-size: 1.06rem;

        line-height: 1.5;

        font-weight: 400;

        max-width: 64ex;



        .usa-prose>table
        
------------------- 

          border-collapse: collapse;

          border-spacing: 0;

          color: #1b1b1b;

          font-size: 1.06rem;

          text-align: left;

          line-height: 1.5;

          margin: 1.25rem 0;



        .usa-prose>table caption, .usa-table caption
         
------------------- 

          font-size: 1rem;

          font-weight: 700;

          margin-bottom: 0.75rem;



          .measure-3
          
------------------- 

              max-width: 64ex!important;



          .margin-top-1, .margin-y-1
          
------------------- 

            margin-top: 0.5rem!important; 
 


            .bg-primary-lighter, .hover\\:bg-primary-lighter:hover
            
------------------- 

                background-color: #d9e8f6!important; 
 


            .example-spacing *
            background-color: white;

Preview

Line length

75 characters (68ex) max-width: Yosemite National Park is set within California’s Sierra Nevada mountains. It’s famed for its giant, ancient sequoias, and for Tunnel View, the iconic vista of towering Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.

Spacing

Page heading

Great Smoky Mountains National Park straddles the border of North Carolina and Tennessee.

Section heading

Section of the page

The sprawling landscape encompasses lush forests and an abundance of wildflowers that bloom year-round. Streams, rivers and waterfalls appear along hiking routes that include a segment of the Appalachian Trail.

Subsection of the page

World renowned for its diversity of plant and animal life, the beauty of its ancient mountains, and the quality of its remnants of Southern Appalachian mountain culture, this is America's most visited national park.

Right now scientists think that we only know about 17 percent of the plants and animals that live in the park, or about 17,000 species of a probable 100,000 different organisms.

Subsection of the page

Entrance to Great Smoky Mountains National Park is free. The park is one of the few national parks where no entrance fees are charged.

Unordered list item
Unordered list item
Unordered list item
- Nested unordered list item
- Nested unordered list item
  - 3rd level nesting
  - 3rd level nesting
  - 3rd level nesting
- Nested unordered list item
- Nested unordered list item

Right now scientists think that we only know about 17 percent of the plants and animals that live in the park, or about 17,000 species of a probable 100,000 different organisms.

Ordered list item
Ordered list item
1. Nested ordered list item
2. Nested ordered list item
3. Nested ordered list item
4. Nested ordered list item
Ordered list item

Bordered table
Document title	Description	Year
Declaration of Independence	Statement adopted by the Continental Congress declaring independence from the British Empire.	1776
Bill of Rights	The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.	1791
Declaration of Sentiments	A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.	1848
Emancipation Proclamation	An executive order granting freedom to slaves in designated southern states.	1863

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="prose-detail">Details</button>
    </h4>
    <div id="prose-detail" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/prose/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p><code class="language-plaintext highlighter-rouge">usa-prose</code> is meant for blocks of text where it’s more difficult to add custom classes to individual elements, like a blog post where the content is coming out of markdown or a CMS.</p>

        <h6>Guidance</h6>
           <ul class="usa-content-list">
          <li>Adding <code class="language-plaintext highlighter-rouge">usa-prose</code> to any container adds USWDS default heading and body text styling to the following <strong>direct-child elements</strong>:
            <ul>
              <li><code class="language-plaintext highlighter-rouge">h1</code>-<code class="language-plaintext highlighter-rouge">h6</code></li>
              <li><code class="language-plaintext highlighter-rouge">p</code></li>
              <li><code class="language-plaintext highlighter-rouge">ul</code> and <code class="language-plaintext highlighter-rouge">ol</code>, <em>plus</em> child <code class="language-plaintext highlighter-rouge">li</code></li>
              <li><code class="language-plaintext highlighter-rouge">table</code>, <em>plus</em> child <code class="language-plaintext highlighter-rouge">thead</code>, <code class="language-plaintext highlighter-rouge">th</code>, <code class="language-plaintext highlighter-rouge">td</code>, and <code class="language-plaintext highlighter-rouge">caption</code></li>
            </ul>
          </li>
          <li>Customize line-length by changing the value of <code class="language-plaintext highlighter-rouge">$theme-text-measure</code> and <code class="language-plaintext highlighter-rouge">$theme-lead-measure</code> in your <a href="/documentation/settings">USWDS settings configuration</a>. Each setting accepts a <a href="/design-tokens/typesetting/measure/">measure token</a>.
            <ul>
              <li><code class="language-plaintext highlighter-rouge">$theme-text-measure</code></li>
              <li><code class="language-plaintext highlighter-rouge">$theme-lead-measure</code></li>
            </ul>
          </li>
        </ul>

         <h6>Usability </h6>


        <h6>Accessibility</h6>



      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="prose-spec">Specs</button>
    </h4>
    <div id="prose-spec" class="usa-accordion__content">
     <code>

        .usa-prose>h1, .usa-prose>h2, .usa-prose>h3, .usa-prose>h4, .usa-prose>h5
        <br />------------------- <br />
        font-family: "Source Sans Pro",sans-serif;</br>
        font-weight: 600;<br />
        line-height: 1.5; <br />
        margin: 0 0 5px 0; </br></br>

        .usa-prose>h1,
        <br />------------------- <br />
        DESKTOP: font-size: 2.663rem; <br />
        MOBILE: font-size: 2.131rem <br /><br />


        .usa-prose>h2
        <br />------------------- <br />
        DESKTOP: font-size: 1.991rem; <br />
        MOBILE: font-size: 1.594rem; <br /><br />

        .usa-prose>h3
        <br />------------------- <br />
        DESKTOP: font-size: 1.648rem;<br />
        MOBILE: font-size: 1.319rem; <br /><br />

        .usa-prose>h4
        <br />------------------- <br />
        DESKTOP: font-size: 1.281rem;<br />
        MOBILE: font-size: 1.156rem;<br /><br />

        .usa-prose>h5
        <br />------------------- <br />
          DESKTOP: font-size: 1.06rem;<br />
          MOBILE: font-size: 1rem;<br /><br />

        .usa-prose>ol, .usa-prose>ul
            font-family: "Source Sans Pro",sans-serif;<br />
            font-size: 1.125rem;<br />
            line-height: 1.5;<br />
            margin-bottom: 0.5em;<br /><br />


        .usa-prose>p
        <br />------------------- <br />
        line-height: 1.5;<br />
        font-family: "Source Sans Pro",sans-serif;<br />
        font-size: 1.06rem;<br />
        line-height: 1.5;<br />
        font-weight: 400;<br />
        max-width: 64ex;<br /><br />

        .usa-prose>table
        <br />------------------- <br />
          border-collapse: collapse;<br />
          border-spacing: 0;<br />
          color: #1b1b1b;<br />
          font-size: 1.06rem;<br />
          text-align: left;</br>
          line-height: 1.5;<br />
          margin: 1.25rem 0;<br /><br />

        .usa-prose>table caption, .usa-table caption
         <br />------------------- <br />
          font-size: 1rem;<br />
          font-weight: 700;<br />
          margin-bottom: 0.75rem;<br /></br>

          .measure-3
          <br />------------------- <br />
              max-width: 64ex!important;</br></br>

          .margin-top-1, .margin-y-1
          <br />------------------- <br />
            margin-top: 0.5rem!important; <br /> <br />

            .bg-primary-lighter, .hover\\:bg-primary-lighter:hover
            <br />------------------- <br />
                background-color: #d9e8f6!important; <br /> <br />

            .example-spacing *
            background-color: white;<br /> <br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div class="usa-line-length-example">
  <h3 class="site-preview-heading margin-top-0">Line length</h3>
  <section class="typography-example usa-prose margin-top-1">
    <p>
      <strong>75 characters (68ex) max-width:</strong> Yosemite National Park is
      set within California’s Sierra Nevada mountains. It’s famed for its giant,
      ancient sequoias, and for Tunnel View, the iconic vista of towering
      Bridalveil Fall and the granite cliffs of El Capitan and Half Dome.
    </p>
  </section>
</div>
<h3 class="site-preview-heading">Spacing</h3>
<section
  class="example-spacing usa-prose margin-top-1 font-sans-sm measure-3 bg-primary-lighter"
>
  <h1>Page heading</h1>
  <p class="usa-intro">
    Great Smoky Mountains National Park straddles the border of North Carolina
    and Tennessee.
  </p>
  <h2>Section heading</h2>
  <h3>Section of the page</h3>
  <p>
    The sprawling landscape encompasses lush forests and an abundance of
    wildflowers that bloom year-round. Streams, rivers and waterfalls appear
    along hiking routes that include a segment of the Appalachian Trail.
  </p>
  <h4>Subsection of the page</h4>
  <p>
    World renowned for its diversity of plant and animal life, the beauty of its
    ancient mountains, and the quality of its remnants of Southern Appalachian
    mountain culture, this is America's most visited national park.
  </p>
  <p>
    Right now scientists think that we only know about 17 percent of the plants
    and animals that live in the park, or about 17,000 species of a probable
    100,000 different organisms.
  </p>
  <h5>Subsection of the page</h5>
  <p>
    Entrance to Great Smoky Mountains National Park is free. The park is one of
    the few national parks where no entrance fees are charged.
  </p>
  <ul>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>
      Unordered list item
      <ul>
        <li>Nested unordered list item</li>
        <li>
          Nested unordered list item
          <ul>
            <li>3rd level nesting</li>
            <li>3rd level nesting</li>
            <li>3rd level nesting</li>
          </ul>
        </li>
        <li>Nested unordered list item</li>
        <li>Nested unordered list item</li>
      </ul>
    </li>
  </ul>
  <p>
    Right now scientists think that we only know about 17 percent of the plants
    and animals that live in the park, or about 17,000 species of a probable
    100,000 different organisms.
  </p>
  <ol>
    <li>Ordered list item</li>
    <li>
      Ordered list item
      <ol>
        <li>Nested ordered list item</li>
        <li>Nested ordered list item</li>
        <li>Nested ordered list item</li>
        <li>Nested ordered list item</li>
      </ol>
    </li>
    <li>Ordered list item</li>
  </ol>
  <table>
    <caption>
      Bordered table
    </caption>
    <thead>
      <tr>
        <th scope="col">Document title</th>
        <th scope="col">Description</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Declaration of Independence</th>
        <td>
          Statement adopted by the Continental Congress declaring independence
          from the British Empire.
        </td>
        <td>1776</td>
      </tr>
      <tr>
        <th scope="row">Bill of Rights</th>
        <td>
          The first ten amendments of the U.S. Constitution guaranteeing rights
          and freedoms.
        </td>
        <td>1791</td>
      </tr>
      <tr>
        <th scope="row">Declaration of Sentiments</th>
        <td>
          A document written during the Seneca Falls Convention outlining the
          rights that American women should be entitled to as citizens.
        </td>
        <td>1848</td>
      </tr>
      <tr>
        <th scope="row">Emancipation Proclamation</th>
        <td>
          An executive order granting freedom to slaves in designated southern
          states.
        </td>
        <td>1863</td>
      </tr>
    </tbody>
  </table>
</section>

Out of the Box - Radio Button

Details and Specs

Requirements USWDS Specs Designs

Description

Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label. In contrast, checkboxes may show a single label, with the checked/unchecked status of the item meaning opposite things. For example, a checkbox could have a single input/label and legend that says “I have read the terms and conditions.” Radio buttons would need two inputs/labels for the same legend, “No” and “Yes”.

Once a user selects one of the radio buttons in a group, the group can’t be easily reset to displaying no radio buttons selected. One possible solution would be to add a “none of the above” option to a radio button group, which would allow users to effectively unselect the other radio buttons in that group.

Guidance

When to use the radio buttons component

To display a single selection. When users need to select only one option from a set of mutually exclusive choices.

Multiple selections. If users need to select more than one option or if there’s only one item to select, use checkboxes instead.
Limited space. Consider a select component if you don’t have enough space to list out all available options.
Selecting none. If users should be able to select zero of the options or change their mind and unselect an option, consider using checkboxes. You can also choose to add a “none of the above” option to the radio button group instead.

Usability

Use the label as a target. Users should be able to select either the text label or the radio button to select or deselect an option.
List items vertically. Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.
Use adequate spacing. Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.
Set default values with caution. Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.
Don’t mix default and tile variants. Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.
Use a logical order. Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Use fieldset and legend. Group related radio buttons together with <fieldset> and describe the group with <legend>.
Use proper labels and attributes. Each radio button should have a <label>. Associate the two by matching the <label>’s for attribute to the <input>’s id attribute.

Examples

Example List Goes Here


        .usa-fieldset
        
------------------- 

            border: 0;

            margin: 0;

            padding: 0;



        .usa-legend
        
------------------- 

          font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
          font-size: 1.06rem;

          line-height: 1.3;

          display: block;

          font-weight: 400;

          margin-top: 1.5rem;

          max-width: 30rem;



          .usa-radio
          
------------------- 

            background: #fff;



          .usa-radio__input
          
------------------- 

            position: absolute;

            left: -999em;

            right: auto;



            .usa-radio__label
            
------------------- 

              cursor: pointer;

              display: inherit;

              font-weight: 400;

              margin-top: 0.75rem;

              padding-left: 2rem;

              position: relative;



            .usa-radio__input--tile:checked+[class*=__label]
            
------------------- 

              background-color: rgba(0,94,162,.1);

              border-color: #005ea2;



              .usa-radio__input--tile+[class*=__label]
              
------------------- 

                background-color: #fff;

                border: 2px solid #c9c9c9;

                color: #1b1b1b;

                border-radius: 0.25rem;

                margin-top: 0.5rem;

                padding: 0.75rem 1rem 0.75rem 2.5rem;



              .usa-radio__input:checked+[class*=__label]::before
              
------------------- 

                  box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #fff;




              .usa-radio__input:checked+[class*=__label]::before
              
------------------- 

                  background-color: #005ea2;



              .usa-radio__input--tile+[class*=__label]::before
              
------------------- 

                  left: 0.5rem;



              .usa-radio__label::before
              
------------------- 

                  content: " ";

                  display: block;

                  left: 0;

                  margin-left: 2px;

                  margin-top: 0.064rem;

                  position: absolute;

                  height: 1.25rem;

                  border-radius: 99rem;

                  width: 1.25rem;

Preview

Default

Select one historical figure

Sojourner Truth

Frederick Douglass

Booker T. Washington

George Washington Carver

Tile

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="radio-button-detail">Details</button>
    </h4>
    <div id="radio-button-detail" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/radio-buttons/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Radio buttons are a common way to allow users to make a single selection from a list of options. Since only one radio button can be selected at a time (within the same group), each available choice must be its own item and label. In contrast, <a href="/components/checkbox">checkboxes</a> may show a single label, with the checked/unchecked status of the item meaning opposite things. For example, a checkbox could have a single input/label and legend that says “I have read the terms and conditions.” Radio buttons would need two inputs/labels for the same legend, “No” and “Yes”.</p>

        <p>Once a user selects one of the radio buttons in a group, the group can’t be easily reset to displaying no radio buttons selected. One possible solution would be to add a “none of the above” option to a radio button group, which would allow users to effectively unselect the other radio buttons in that group.</p>

      <h6>Guidance</h6>
       <p><strong>When to use the radio buttons component</strong></p>
        <ul class="usa-content-list">
          <li><strong>To display a single selection.</strong> When users need to select only one option from a set of mutually exclusive choices.</li>
        </ul>

        <ul class="usa-content-list">
          <li><strong>Multiple selections.</strong> If users need to select more than one option or if there’s only one item to select, use <a href="/components/checkbox">checkboxes</a> instead.</li>
          <li><strong>Limited space.</strong> Consider a <a href="/components/select">select component</a> if you don’t have enough space to list out all available options.</li>
          <li><strong>Selecting none.</strong> If users should be able to select zero of the options or change their mind and unselect an option, consider using checkboxes. You can also choose to add a “none of the above” option to the radio button group instead.</li>
        </ul>

         <h6>Usability </h6>
         <ul class="usa-content-list">
          <li><strong>Use the label as a target.</strong> Users should be able to select either the text label or the radio button to select or deselect an option.</li>
          <li><strong>List items vertically.</strong> Vertically-listed options are easier to read than those that are listed horizontally. A horizontal layout can make it difficult to tell which label belongs to which radio button.</li>
          <li><strong>Use adequate spacing.</strong> Make sure selections are adequately spaced for touch screens. Consider using the tile variant for larger touch targets.</li>
          <li><strong>Set default values with caution.</strong> Setting a default value can bias a decision, seem pushy, or alienate users who don’t fit your assumptions. Only use a default selection if you have data to back it up.</li>
          <li><strong>Don’t mix default and tile variants.</strong> Pick one implementation and stick with it. When mixed, tiles can appear to indicate a bias or preference toward that option.</li>
          <li><strong>Use a logical order.</strong> Make sure the selection options are organized in a meaningful way, like alphabetical or most-frequent to least-frequent. This helps users easily find the option they’re looking for.</li>
        </ul>

        <h6>Accessibility</h6>
         <ul class="usa-content-list">
          <li><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the <a href="/components/form">accessibility requirements that apply to all form controls</a>.</li>
          <li><strong>Use fieldset and legend.</strong> Group related radio buttons together with <code class="language-plaintext highlighter-rouge">&lt;fieldset&gt;</code> and describe the group with <code class="language-plaintext highlighter-rouge">&lt;legend&gt;</code>.</li>
          <li><strong>Use proper labels and attributes.</strong> Each radio button should have a <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code>. Associate the two by matching the <code class="language-plaintext highlighter-rouge">&lt;label&gt;</code>’s <code class="language-plaintext highlighter-rouge">for</code> attribute to the <code class="language-plaintext highlighter-rouge">&lt;input&gt;</code>’s <code class="language-plaintext highlighter-rouge">id</code> attribute.</li>
        </ul>


      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="radio-button-spec">Specs</button>
    </h4>
    <div id="radio-button-spec" class="usa-accordion__content">
       <code>
        .usa-fieldset
        <br />------------------- <br />
            border: 0;</br>
            margin: 0;</br>
            padding: 0;</br></br>

        .usa-legend
        <br />------------------- <br />
          font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
          font-size: 1.06rem;</br>
          line-height: 1.3;</br>
          display: block;</br>
          font-weight: 400;</br>
          margin-top: 1.5rem;</br>
          max-width: 30rem;</br></br>

          .usa-radio
          <br />------------------- <br />
            background: #fff;</br></br>

          .usa-radio__input
          <br />------------------- <br />
            position: absolute;</br>
            left: -999em;</br>
            right: auto;</br></br>

            .usa-radio__label
            <br />------------------- <br />
              cursor: pointer;</br>
              display: inherit;</br>
              font-weight: 400;</br>
              margin-top: 0.75rem;</br>
              padding-left: 2rem;</br>
              position: relative;</br></br>

            .usa-radio__input--tile:checked+[class*=__label]
            <br />------------------- <br />
              background-color: rgba(0,94,162,.1);</br>
              border-color: #005ea2;</br></br>

              .usa-radio__input--tile+[class*=__label]
              <br />------------------- <br />
                background-color: #fff;</br>
                border: 2px solid #c9c9c9;</br>
                color: #1b1b1b;</br>
                border-radius: 0.25rem;</br>
                margin-top: 0.5rem;</br>
                padding: 0.75rem 1rem 0.75rem 2.5rem;</br></br>

              .usa-radio__input:checked+[class*=__label]::before
              <br />------------------- <br />
                  box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #fff;</br></br>


              .usa-radio__input:checked+[class*=__label]::before
              <br />------------------- <br />
                  background-color: #005ea2;</br></br>

              .usa-radio__input--tile+[class*=__label]::before
              <br />------------------- <br />
                  left: 0.5rem;</br></br>

              .usa-radio__label::before
              <br />------------------- <br />
                  content: " ";</br>
                  display: block;</br>
                  left: 0;</br>
                  margin-left: 2px;</br>
                  margin-top: 0.064rem;</br>
                  position: absolute;</br>
                  height: 1.25rem;</br>
                  border-radius: 99rem;</br>
                  width: 1.25rem;</br></br>

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<h4 class="site-preview-heading">Default</h4>
<fieldset class="usa-fieldset">
  <legend class="usa-legend usa-legend">Select one historical figure</legend>
  <div class="usa-radio">
    <input
      class="usa-radio__input"
      id="historical-truth"
      type="radio"
      name="historical-figures"
      value="sojourner-truth"
      checked="checked"
    />
    <label class="usa-radio__label" for="historical-truth"
      >Sojourner Truth</label
    >
  </div>
  <div class="usa-radio">
    <input
      class="usa-radio__input"
      id="historical-douglass"
      type="radio"
      name="historical-figures"
      value="frederick-douglass"
    />
    <label class="usa-radio__label" for="historical-douglass"
      >Frederick Douglass</label
    >
  </div>
  <div class="usa-radio">
    <input
      class="usa-radio__input"
      id="historical-washington"
      type="radio"
      name="historical-figures"
      value="booker-t-washington"
    />
    <label class="usa-radio__label" for="historical-washington"
      >Booker T. Washington</label
    >
  </div>
  <div class="usa-radio">
    <input
      class="usa-radio__input"
      id="historical-carver"
      type="radio"
      name="historical-figures"
      value="george-washington-carver"
      disabled="disabled"
    />
    <label class="usa-radio__label" for="historical-carver"
      >George Washington Carver</label
    >
  </div>
</fieldset>
<br>
<h4 class="site-preview-heading">Tile</h4>
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend">Select one historical figure</legend>
    <div class="usa-radio">
      <input
        class="usa-radio__input usa-radio__input--tile"
        id="historical-truth-2"
        type="radio"
        name="historical-figures-2"
        value="sojourner-truth"
        checked="checked"
      />
      <label class="usa-radio__label" for="historical-truth-2"
        >Sojourner Truth</label
      >
    </div>
    <div class="usa-radio">
      <input
        class="usa-radio__input usa-radio__input--tile"
        id="historical-douglass-2"
        type="radio"
        name="historical-figures-2"
        value="frederick-douglass"
      />
      <label class="usa-radio__label" for="historical-douglass-2"
        >Frederick Douglass
        <span class="usa-checkbox__label-description"
          >This is optional text that can be used to describe the label in more
          detail.</span
        ></label
      >
    </div>
    <div class="usa-radio">
      <input
        class="usa-radio__input usa-radio__input--tile"
        id="historical-washington-2"
        type="radio"
        name="historical-figures-2"
        value="booker-t-washington"
      />
      <label class="usa-radio__label" for="historical-washington-2"
        >Booker T. Washington</label
      >
    </div>
    <div class="usa-radio">
      <input
        class="usa-radio__input usa-radio__input--tile"
        id="historical-carver-2"
        type="radio"
        name="historical-figures-2"
        value="george-washington-carver"
        disabled="disabled"
      />
      <label class="usa-radio__label" for="historical-carver-2"
        >George Washington Carver</label
      >
    </div>
  </fieldset>
</form>

Out of the Box - Range Slider

Details and Specs

Requirements USWDS Specs Designs

Description

A range slider allows users to choose an approximate number from a range.

Guidance

When to use the range slider component

When the range is more important than precision. For instance, it could be more important for a target price selector to communicate where the target price falls within a certain range than the precise dollar amount selected.
When a relative value is more important than an exact value. For instance, a volume slider is typically more focussed on the relative loudness of the output rather than the specific decibel level.

When to consider something else

Use a regular text input if a user needs to enter a precise number.

Usability

Highlight the control when selected. The slider control should change color to indicate it is active when a user selects it.
The control must be draggable. Users should be able to drag the slider control or select somewhere along the slider itself to change the value.
Label the limits of the range. When appropriate, label the ends of the slider with the limits of the range (for example: “0/100”, “small/large” or “less expensive/more expensive”).
Don’t be too granular. In a range slider, the relative value is more important than the specific value, so set the step attribute so it’s not too granular. By setting the step to a value of 10-20% of the total range you prevent unnecessary precision and cognitive strain in your users. For example, set step="10" in a total range of 100.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

Examples

Example List Goes Here



                     .usa-label 

                ------------------- 


    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;/ 

    font-size: 1.06rem; 

    line-height: 1.3; 

    display: block;

    font-weight: 400; 

    margin-top: 1.5rem; 

    max-width: 30rem;

 



                  .usa-range  

                ------------------- 


    -webkit-appearance: none; 

    -moz-appearance: none; 

    appearance: none; 

    border: 0;

    padding-left: 1px; 

    width: 100%; 

    height: 2.5rem; 

    border-radius: 0; 

    color: #1b1b1b; 

    display: block; 

    margin-top: 0.5rem; 

    max-width: 30rem; 

    padding: 0.5rem 

font-size: 1.06rem;

    line-height: 1.3;

Preview

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="range-slider-detail">Details</button>
    </h4>
    <div id="range-slider-detail" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/range-slider/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A range slider allows users to choose an approximate number from a range.</p>

        <h6>Guidance</h6>
          <p id="when-to-use-the-range-slider"><strong>When to use the range slider component</strong></p>
          <ul class="usa-content-list">
            <li>When the range is more important than precision. For instance, it could be more important for a target price selector to communicate where the target price falls within a certain range than the precise dollar amount selected.</li>
            <li>When a relative value is more important than an exact value. For instance, a volume slider is typically more focussed on the relative loudness of the output rather than the specific decibel level.</li>
          </ul>

          <p id="when-to-consider-something-else-range-slider">When to consider something else </p>
          <ul class="usa-content-list">
            <li>Use a regular text input if a user needs to enter a precise number.</li>
          </ul>

         <h6>Usability </h6>
          <ul class="usa-content-list">
            <li>Highlight the control when selected. The slider control should change color to indicate it is active when a user selects it.</li>
            <li>The control must be draggable. Users should be able to drag the slider control or select somewhere along the slider itself to change the value.</li>
            <li>Label the limits of the range. When appropriate, label the ends of the slider with the limits of the range (for example: “0/100”, “small/large” or “less expensive/more expensive”).</li>
            <li>Don’t be too granular. In a range slider, the relative value is more important than the specific value, so set the step attribute so it’s not too granular. By setting the step to a value of 10-20% of the total range you prevent unnecessary precision and cognitive strain in your users. For example, set <code class="language-plaintext highlighter-rouge">step="10"</code> in a total range of 100.</li>
          </ul>


        <h6>Accessibility</h6>
          <ul class="usa-content-list">
            <li>Customize form controls accessibly. If you customize this component, ensure that it continues to meet the <a href="/components/form">accessibility requirements that apply to all form controls</a>.</li>
          </ul>

        <h5>Examples</h5>
          <ul>
            <li>Example List Goes Here </li>
          </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="range-slider-spec">Specs</button>
    </h4>
    <div id="range-slider-spec" class="usa-accordion__content">
      <code>

                     .usa-label <br>
                ------------------- <br>

    font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;/ <br />
    font-size: 1.06rem; <br />
    line-height: 1.3; <br />
    display: block;<br />
    font-weight: 400; <br />
    margin-top: 1.5rem; <br />
    max-width: 30rem;

 <br><br>

                  .usa-range  <br>
                ------------------- <br>

    -webkit-appearance: none; <br />
    -moz-appearance: none; <br />
    appearance: none; <br />
    border: 0;<br />
    padding-left: 1px; <br />
    width: 100%; <br />
    height: 2.5rem; <br />
    border-radius: 0; <br />
    color: #1b1b1b; <br />
    display: block; <br />
    margin-top: 0.5rem; <br />
    max-width: 30rem; <br />
    padding: 0.5rem <br />
font-size: 1.06rem;<br />
    line-height: 1.3;<br />

      </code>


    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<form class="usa-form">
  <label class="usa-label" for="usa-range">Range slider</label>
  <input
    id="usa-range"
    class="usa-range"
    type="range"
    min=""
    max=""
    step=""
    value="20"
  />
</form>

Out of the Box - Search

Details and Specs

Requirements USWDS Specs Designs

Description

Search allows users to search for specific content if they know what search terms to use or can't find desired content in the main navigation

Guidance

Usability

Make the input at least 27 characters wide. Allow the search component to be as wide as possible, but a minimum of 27 characters wide. This allows users to enter multiple search terms and still be able to see all of them. The more users can see their search terms, the easier it is to review, verify, and submit their search query. Romance languages are about 20% longer than English, so account for text swell on multilingual websites.
The magnifying glass icon is effective. The magnifying glass has been shown to be almost universally recognized by users as an indicator of search, and doesn’t need to be visually paired with the word “Search” as long as it remains for screen readers.
Search terms should persist into search results. When displaying the search results, preload the search bar content with the original search terms.
Use a full search box on the home page. On a site's home page the search function should appear as a search box instead of a link so users can locate it easily.
Don't offer advanced search as the default. The majority of people will do a simple search with one or two search terms. If advanced search is offered, it increases the likelihood of mistakes.
Use a label even if it's visually hidden. The form field should include a label for screen reader users.
The search button should be a submit button. This reduces the number of keystrokes required to use the form.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Include the word “Search” in the button. Always include the word “search” inside the

Examples


        font-family: "Source Sans Pro",sans-serif; 

        font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-search 

        ----------------------- 

        display: flex; 

        font-size: 1.06rem; 

        line-height: 1.5; 

        position: relative; 



        .usa-search--small 

        ----------------------- 

        height: 2.5rem; 

        padding-left: 0.75rem; 

        padding-right: 0.75rem; 

        min-width: 3rem; 



        .usa-search--big 

        ----------------------- 

        height: 3rem; 

        padding-left: 1rem; 

        padding-right: 1rem; 

        position: relative;

Preview

Default

Small variant

<!-- CUSTOM STYLES  -->
<style>

</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--search">Details</button>
    </h4>
    <div id="templates-detail--search" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/browse/OCWT-7962" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/search/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>Search allows users to search for specific content if they know what search terms to use or can't find desired content in the main navigation</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Make the input at least 27 characters wide.</strong> Allow the search component to be as wide as possible, but a minimum of 27 characters wide. This allows users to enter multiple search terms and still be able to see all of them. The more users can see their search terms, the easier it is to review, verify, and submit their search query. Romance languages are about 20% longer than English, so account for text swell on multilingual websites.</li>
          <li><strong>The magnifying glass icon is effective.</strong> The magnifying glass has been shown to be almost universally recognized by users as an indicator of search, and doesn’t need to be visually paired with the word “Search” as long as it remains for screen readers.</li>
          <li><strong>Search terms should persist into search results.</strong> When displaying the search results, preload the search bar content with the original search terms.</li>
          <li><strong>Use a full search box on the home page.</strong> On a site's home page the search function should appear as a search box instead of a link so users can locate it easily.</li>
          <li><strong>Don't offer advanced search as the default.</strong> The majority of people will do a simple search with one or two search terms. If advanced search is offered, it increases the likelihood of mistakes.</li>
          <li><strong>Use a label even if it's visually hidden.</strong> The form field should include a label for screen reader users.</li>
          <li><strong>The search button should be a submit button.</strong> This reduces the number of keystrokes required to use the form.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the <a href="https://designsystem.digital.gov/components/form">accessibility requirements that apply to all form controls</a>.</li>
          <li><strong>Include the word “Search” in the button.</strong> Always include the word “search” inside the <button> element for screen readers. You can visually hide this text using the CSS class usa-sr-only or Sass mixin @include sr-only.</li>
        </ul>

 <h5>Examples</h5>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--search">Specs</button>
    </h4>
    <div id="templates-specs--search" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
        font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .usa-search <br />
        ----------------------- <br />
        display: flex; <br />
        font-size: 1.06rem; <br />
        line-height: 1.5; <br />
        position: relative; <br /><br />

        .usa-search--small <br />
        ----------------------- <br />
        height: 2.5rem; <br/>
        padding-left: 0.75rem; <br/>
        padding-right: 0.75rem; <br/>
        min-width: 3rem; <br/><br />

        .usa-search--big <br />
        ----------------------- <br />
        height: 3rem; <br />
        padding-left: 1rem; <br/>
        padding-right: 1rem; <br/>
        position: relative; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<h3 class="site-preview-heading">Default</h3>
<section aria-label="Big search component">
  <form class="usa-search usa-search--big" role="search">
    <label class="usa-sr-only" for="search-field-en-big">Search</label>
    <input
      class="usa-input"
      id="search-field-en-big"
      type="search"
      name="search"
    />
    <button class="usa-button" type="submit">
      <span class="usa-search__submit-text">Search </span
      ><img
        src="https://designsystem.digital.gov/assets/img/usa-icons-bg/search--white.svg"
        class="usa-search__submit-icon"
        alt="Search"
      />
    </button>
  </form>
</section>

<h3 class="site-preview-heading">Small variant</h3>
<section aria-label="Small search component">
  <form class="usa-search usa-search--small" role="search">
    <label class="usa-sr-only" for="search-field-en-small">Search</label>
    <input
      class="usa-input"
      id="search-field-en-small"
      type="search"
      name="search"
    />
    <button class="usa-button" type="submit">
      <img
        src="https://designsystem.digital.gov/assets/img/usa-icons-bg/search--white.svg"
        class="usa-search__submit-icon"
        alt="Search"
      />
    </button>
  </form>
</section>
<!-- Markup Ends  -->

Out of the Box - Select

Details and Specs

Requirements USWDS Specs Designs

Description

A select component allows users to choose one option from a temporary modal menu.

Guidance

Usability

Make sure to test. Test select menus 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 dependent options. Avoid making options in one select menu change based on the input to another. Users often don't understand how choosing an item in one impacts another.
Use a good default. When most users will (or should) pick a particular option, make it the default:
Avoid auto-submission. Don't use JavaScript to automatically submit the form (or do anything else) when an option is chosen. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Always use a label. Make sure your select element has a label. Don't replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).
Avoid auto-submission. 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.

Examples


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



       .usa-select 

        ------------------ 

        background-color: $white; /* #FFFFFF */ 

        border: 1px solid $smoke; /* #CDCDCD */ 

        border-radius: 0;

Preview

<!-- CUSTOM STYLES  -->
<style>
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--select">Details</button>
    </h4>
    <div id="templates-detail--select" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/browse/OCWT-7961" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/select/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>A select component allows users to choose one option from a temporary modal menu.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Make sure to test.</strong> Test select menus 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.</li>
          <li><strong>Avoid dependent options.</strong> Avoid making options in one select menu change based on the input to another. Users often don't understand how choosing an item in one impacts another.</li>
          <li><strong>Use a good default.</strong> When most users will (or should) pick a particular option, make it the default: <option selected="selected">Default</option></li>
          <li><strong>Avoid auto-submission.</strong> Don't use JavaScript to automatically submit the form (or do anything else) when an option is chosen. Offer a “submit” button at the end of the form instead. Users often change their choices multiple times. Auto-submission is also less accessible.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the <a href="https://designsystem.digital.gov/components/form"></a>accessibility requirements that apply to all form controls</a>.</li>
          <li><strong>Always use a label.</strong> Make sure your select element has a label. Don't replace it with the default menu option (for example, removing the “State” label and just having the menu read “Select a state” by default).</li>
          <li><strong>Avoid auto-submission.</strong> 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.</li>
        </ul>

 <h5>Examples</h5>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--select">Specs</button>
    </h4>
    <div id="templates-specs--select" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

       .usa-select <br />
        ------------------ <br />
        background-color: $white; /* #FFFFFF */ <br />
        border: 1px solid $smoke; /* #CDCDCD */ <br />
        border-radius: 0; <br /><br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<form class="usa-form">
    <label class="usa-label" for="options">Dropdown label</label>
    <select class="usa-select" name="options" id="options">
      <option value>- Select -</option>
      <option value="value1">Option A</option>
      <option value="value2">Option B</option>
      <option value="value3">Option C</option>
    </select>
  </form>
<!-- Markup Ends  -->

Out of the Box - Step Indicator

Details and Specs

Requirements USWDS Specs Designs

Description

A step indicator updates users on their progress through a multi-step process.

Guidance

Usability

Indicate where a user is in the process. Use a color and text treatment for the current step segment that is distinct from both the completed and pending step segments. The current segment should be the most visually prominent segment in the step indicator. Pending segments should be the least visually prominent of the segments, but should still maintain accessible contrast and not appear disabled.
Use short or single-word labels. If labelling the step indicators, stick to very short words.
Provide navigation separately. Use navigation like a button group to step forward and backward through a form.
Place a heading directly below the step indicator. Each step needs an explicit heading. The step indicator segments (even with labels and counters) are not sufficient as a heading for a page or screen.
Display step and total left of the heading. Using text like “[step] of [total]” next to the heading reinforces the number of total steps and helps users keep track of their location in the overall process.

Accessibility

Use semantic heading levels. Though our default code uses an
, use the correct heading level in your own implementation.
Use aria-label=”progress”. Placing this aria-label on the element with the class usa-step-indicator helps provide important context to screen readers.
Use visually hidden text on labels. Use visually hidden text make the completion status of each step explicit.
Indicate the current step. When using labeled segments, use aria-current="true" on the list item representing the current step.
Hide unlabeled segments. There is no content inside the segments when labels aren’t used, so it is safe to add aria-hidden="true" to the element with the class name usa-step-indicator__segments.

Examples


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .region--content ol 

        --------------------- 

        margin: 0; 



        .region--content li 

        --------------------- 

        list-style: none; 



        .usa-step-indicator__segment--complete:after 

        --------------------- 

        background-color: #162e51; 


        background-color: #162e51;

        .usa-step-indicator__segment--current:after 

        --------------------- 

        background-color: #005ea2; 



        .usa-step-indicator__segment--current usa-step-indicator__segment-label 

        --------------------- 

        color: #005ea2; 



        .usa-step-indicator__segment:after 

        --------------------- 

        background-color: #919101;

Preview

Default

Personal information completed
Household status completed
Supporting documents
Signature not completed
Review and submit not completed

No labels

Personal information completed
Household status completed
Supporting documents
Signature not completed
Review and submit not completed

Centered

Personal information completed
Household status completed
Supporting documents
Signature not completed
Review and submit not completed

Counters

Personal information completed
Household status completed
Supporting documents
Signature not completed
Review and submit not completed

Small counters

Personal information completed
Household status completed
Supporting documents
Signature not completed
Review and submit not completed

<!-- CUSTOM STYLES  -->
<style>

</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--step-indicator">Details</button>
    </h4>
    <div id="templates-detail--step-indicator" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/browse/OCWT-7960" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/step-indicator/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>A step indicator updates users on their progress through a multi-step process.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Indicate where a user is in the process.</strong> Use a color and text treatment for the current step segment that is distinct from both the completed and pending step segments. The current segment should be the most visually prominent segment in the step indicator. Pending segments should be the least visually prominent of the segments, but should still maintain accessible contrast and not appear disabled.</li>
          <li><strong>Use short or single-word labels.</strong> If labelling the step indicators, stick to very short words.</li>
          <li><strong>Provide navigation separately.</strong> Use navigation like a <a href="https://designsystem.digital.gov/components/button-group/"></a>button group</a> to step forward and backward through a form.</li>
          <li><strong>Place a heading directly below the step indicator.</strong> Each step needs an explicit heading. The step indicator segments (even with labels and counters) are not sufficient as a heading for a page or screen.</li>
          <li><strong>Display step and total left of the heading.</strong> Using text like “[step] of [total]” next to the heading reinforces the number of total steps and helps users keep track of their location in the overall process.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Use semantic heading levels.</strong> Though our default code uses an <h4>, use the correct heading level in your own implementation.</li>
          <li><strong>Use aria-label=”progress”.</strong> Placing this aria-label on the element with the class usa-step-indicator helps provide important context to screen readers.</li>
          <li><strong>Use visually hidden text on labels.</strong> Use visually hidden text make the completion status of each step explicit.</li>
          <li><strong>Indicate the current step.</strong> When using labeled segments, use aria-current="true" on the list item representing the current step.</li>
          <li><strong>Hide unlabeled segments.</strong> There is no content inside the segments when labels aren’t used, so it is safe to add aria-hidden="true" to the element with the class name usa-step-indicator__segments.</li>
        </ul>

 <h5>Examples</h5>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--step-indicator">Specs</button>
    </h4>
    <div id="templates-specs--step-indicator" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .region--content ol <br />
        --------------------- <br />
        margin: 0; <br /><br />

        .region--content li <br />
        --------------------- <br />
        list-style: none; <br /><br />

        .usa-step-indicator__segment--complete:after <br />
        --------------------- <br />
        background-color: #162e51; <br /><br />
        background-color: #162e51;

        .usa-step-indicator__segment--current:after <br />
        --------------------- <br />
        background-color: #005ea2; <br /><br />

        .usa-step-indicator__segment--current usa-step-indicator__segment-label <br />
        --------------------- <br />
        color: #005ea2; <br /><br />

        .usa-step-indicator__segment:after <br />
        --------------------- <br />
        background-color: #919101; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<h3 class="site-preview-heading">Default</h3>
<div class="usa-step-indicator" aria-label="progress">
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents</span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h4 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter"
        ><span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span> </span
      ><span class="usa-step-indicator__heading-text"
        >Supporting documents</span
      >
    </h4>
  </div>
</div>

<h3 class="site-preview-heading">No labels</h3>
<div
  class="usa-step-indicator usa-step-indicator--no-labels"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents</span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h4 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter"
        ><span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span> </span
      ><span class="usa-step-indicator__heading-text"
        >Supporting documents</span
      >
    </h4>
  </div>
</div>

<h3 class="site-preview-heading">Centered</h3>
<div
  class="usa-step-indicator usa-step-indicator--center"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents</span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h4 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter"
        ><span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span> </span
      ><span class="usa-step-indicator__heading-text"
        >Supporting documents</span
      >
    </h4>
  </div>
</div>

<h3 class="site-preview-heading">Counters</h3>
<div
  class="usa-step-indicator usa-step-indicator--counters"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents</span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h4 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter"
        ><span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span> </span
      ><span class="usa-step-indicator__heading-text"
        >Supporting documents</span
      >
    </h4>
  </div>
</div>

<h3 class="site-preview-heading">Small counters</h3>
<div
  class="usa-step-indicator usa-step-indicator--counters-sm"
  aria-label="progress"
>
  <ol class="usa-step-indicator__segments">
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Personal information <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--complete"
    >
      <span class="usa-step-indicator__segment-label"
        >Household status <span class="usa-sr-only">completed</span></span
      >
    </li>
    <li
      class="usa-step-indicator__segment usa-step-indicator__segment--current"
      aria-current="true"
    >
      <span class="usa-step-indicator__segment-label"
        >Supporting documents</span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Signature <span class="usa-sr-only">not completed</span></span
      >
    </li>
    <li class="usa-step-indicator__segment">
      <span class="usa-step-indicator__segment-label"
        >Review and submit <span class="usa-sr-only">not completed</span></span
      >
    </li>
  </ol>
  <div class="usa-step-indicator__header">
    <h4 class="usa-step-indicator__heading">
      <span class="usa-step-indicator__heading-counter"
        ><span class="usa-sr-only">Step</span>
        <span class="usa-step-indicator__current-step">3</span>
        <span class="usa-step-indicator__total-steps">of 5</span> </span
      ><span class="usa-step-indicator__heading-text"
        >Supporting documents</span
      >
    </h4>
  </div>
</div>
<!-- Markup Ends  -->

Out of the Box - Text Input

Details and Specs

Requirements USWDS Specs Designs

Description

A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.

Guidance

Usability

Use fields appropriate to the length of the input. The length of the text input 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 text area instead.
Consider the mobile context. Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.
Wait to validate. Only show error validation messages or stylings after a user has interacted with a particular field.
Avoid placeholder text. Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, 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.) .

Accessibility

Customize form controls accessibly. If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.
Avoid placeholder text. Most browsers' default rendering of placeholder text does not provide a high enough contrast ratio.
Avoid splitting numbers. Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.

Examples


        font-family: "Source Sans Pro",sans-serif; 

    font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-input 

        ------------------- 

        border-radius: 0; 

        border: 1px solid $silver; /* #DDDDDD */ 

        background-color: $white; /* #FFFFFF */ 

        box-sizing: border-box; 

        vertical-align: middle; 

        box-shadow: none; 

        height: 40px; 



        .usa-textarea

        ------------------- 

        border-radius: 0; 

        border: 1px solid $silver; /* #DDDDDD */ 

        background-color: $white; /* #FFFFFF */ 

        box-sizing: border-box; 

        vertical-align: middle; 

        box-shadow: none; 

        height: 100px;

Preview

Text input label Text area label

<!-- CUSTOM STYLES  -->
<style>

</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--text-input">Details</button>
    </h4>
    <div id="templates-detail--text-input" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/browse/OCWT-7958" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/text-input/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="#" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>A text input allows users to enter any combination of letters, numbers, or symbols. Text input boxes can span single or multiple lines.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li><strong>Use fields appropriate to the length of the input.</strong> The length of the text input 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 text area instead.</li>
          <li><strong>Consider the mobile context.</strong> Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users.</li>
          <li><strong>Wait to validate.</strong> Only show error validation messages or stylings after a user has interacted with a particular field.</li>
          <li><strong>Avoid placeholder text.</strong> Avoid using placeholder text that appears within a text field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, 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.) .</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li><strong>Customize form controls accessibly.</strong> If you customize this component, ensure that it continues to meet the <a href="https://designsystem.digital.gov/components/form"></a>accessibility requirements that apply to all form controls</a>.</li>
          <li><strong>Avoid placeholder text.</strong> Most browsers' default rendering of placeholder text does not provide a high enough contrast ratio.</li>
          <li><strong>Avoid splitting numbers.</strong> Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful.</li>
        </ul>

 <h5>Examples</h5>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--text-input">Specs</button>
    </h4>
    <div id="templates-specs--text-input" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br />
    font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .usa-input <br />
        ------------------- <br />
        border-radius: 0; <br />
        border: 1px solid $silver; /* #DDDDDD */ <br />
        background-color: $white; /* #FFFFFF */ <br />
        box-sizing: border-box; <br />
        vertical-align: middle; <br />
        box-shadow: none; <br />
        height: 40px; <br /><br />

        .usa-textarea<br />
        ------------------- <br />
        border-radius: 0; <br />
        border: 1px solid $silver; /* #DDDDDD */ <br />
        background-color: $white; /* #FFFFFF */ <br />
        box-sizing: border-box; <br />
        vertical-align: middle; <br />
        box-shadow: none; <br />
        height: 100px; <br /><br />
      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<label class="usa-label" for="input-type-text">Text input label</label>
    <input class="usa-input" id="input-type-text" name="input-type-text" />
<label class="usa-label" for="input-type-textarea">Text area label</label>
    <textarea class="usa-textarea" id="input-type-textarea" name="input-type-textarea"></textarea>
<!-- Markup Ends  -->

Out of the Box - Tooltips

Details and Specs

Requirements USWDS Specs Designs

Description

A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.

Guidance

Helpful, non-critical information. Use tooltips to strengthen an existing message.

Lengthy descriptions. Tooltips are microcopy, and should be brief. Don’t use a tooltip if you need a lot of text.

Redundant content. Don’t use a tooltip when its content is repetitive or if usability is obvious.

Usability

Use affordances. A hidden tooltip is unusable. Use tooltips only on elements that appear interactive, like buttons or links
Avoid collisions. Be careful not introduce conflicting hover or focus events.
Use consistently. If using tooltips in one context, use in all similar contexts.
Don’t block content. Use the data-position attribute to prevent the tooltip from covering other page elements.

Accessibility

Use as title attribute. Tooltips are progressive enhancements for the title attribute, and will display as the title attribute if the component doesn’t initialize.
Keyboard accessibility. Tooltips make title attributes keyboard accessible.

Examples

Example List Goes Here


            font-family: "Source Sans Pro",sans-serif; 


   font-color: $charcoal; /* #4A4A4A */ 
  DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



       .usa-tooltip 

        ------------------- 

         display: inline-block; 

         position: relative; 


        .usa-button 

        ------------------- 

         display: inline-block; 

         background-color: $teal; /* #1a6986 */ 

         border: $teal; /* #1a6986 */ 

         color: $white  /* #fff */ 

         cursor: pointer; 

         border-radius: 0.25rem; 

         line-height: .9; 

         padding: 0.75rem 1.25rem;  
 


        .usa-button.usa-tooltip__trigger

        ------------------- 

         border-radius: 0.25rem; 


       .usa-tooltip__body, .usa-tooltip__body--top

        ------------------- 

        transition: opacity .08s ease-in-out; 

        background-color: #1b1b1b; 

        border-radius: 0.25rem; 

        color: #f0f0f0; 

        display: none; 

        font-size: 1rem; 

        padding: 0.5rem; 

        pointer-events: none; 

       width: auto; 

       white-space: pre; 

       z-index: 100000; 

       position: absolute;

Preview

Standard tooltip

Tooltip with utility classes

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-details-tooltips">Details</button>
    </h4>
    <div id="templates-details-tooltips" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7956" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/tooltip/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>A tooltip is a short descriptive message that appears when a user hovers or focuses on an element.</p>

      <h5>Guidance</h5>
          <p>Helpful, non-critical information. Use tooltips to strengthen an existing message.</p>
<p>Lengthy descriptions. Tooltips are microcopy, and should be brief. Don’t use a tooltip if you need a lot of text.</p>
<p>Redundant content. Don’t use a tooltip when its content is repetitive or if usability is obvious.</p>
        <h6>Usability</h6>
        <ul>
          <li>Use affordances. A hidden tooltip is unusable. Use tooltips only on elements that appear interactive, like buttons or links </li>
<li>Avoid collisions. Be careful not introduce conflicting hover or focus events. </li>
<li>Use consistently. If using tooltips in one context, use in all similar contexts.</li>
<li>Don’t block content. Use the data-position attribute to prevent the tooltip from covering other page elements.</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Use as title attribute. Tooltips are progressive enhancements for the title attribute, and will display as the title attribute if the component doesn’t initialize. </li>
            <li>Keyboard accessibility. Tooltips make title attributes keyboard accessible.</li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs-tooltips">Specs</button>
    </h4>
    <div id="templates-specs-tooltips" class="usa-accordion__content">
      <code>
            font-family: "Source Sans Pro",sans-serif; <br />

   font-color: $charcoal; /* #4A4A4A */ <br />  DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

       .usa-tooltip <br />
        ------------------- <br />
         display: inline-block; <br />
         position: relative; <br />

        .usa-button <br />
        ------------------- <br />
         display: inline-block; <br />
         background-color: $teal; /* #1a6986 */ <br />
         border: $teal; /* #1a6986 */ <br />
         color: $white  /* #fff */ <br />
         cursor: pointer; <br />
         border-radius: 0.25rem; <br />
         line-height: .9; <br />
         padding: 0.75rem 1.25rem;  <br /> <br />

        .usa-button.usa-tooltip__trigger<br />
        ------------------- <br />
         border-radius: 0.25rem; <br />

       .usa-tooltip__body, .usa-tooltip__body--top<br />
        ------------------- <br />
        transition: opacity .08s ease-in-out; <br />
        background-color: #1b1b1b; <br />
        border-radius: 0.25rem; <br />
        color: #f0f0f0; <br />
        display: none; <br />
        font-size: 1rem; <br />
        padding: 0.5rem; <br />
        pointer-events: none; <br />
       width: auto; <br />
       white-space: pre; <br />
       z-index: 100000; <br />
       position: absolute; <br /><br />


      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- MARKUP Begins -->
<h3 class="site-preview-heading">Standard tooltip</h3>
<div class="padding-8">
  <div class="margin-4">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="top"
      title="Top"
    >
      Show on top
    </button>
  </div>
  <div class="margin-4">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="right"
      title="Right"
    >
      Show on right
    </button>
  </div>
  <div class="margin-4">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="left"
      title="Left"
    >
      Show on left
    </button>
  </div>
  <div class="margin-4">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="bottom"
      title="Bottom"
    >
      Show on bottom
    </button>
  </div>
</div>

<h3 class="site-preview-heading">Tooltip with utility classes</h3>
<div class="grid-row padding-8">
  <div class="tablet:grid-col-3 margin-top-2 text-center">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="top"
      data-classes="width-full tablet:width-auto"
      title="Top"
    >
      Show on top
    </button>
  </div>
  <div class="tablet:grid-col-3 margin-top-2 text-center">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="bottom"
      data-classes="width-full tablet:width-auto"
      title="Bottom"
    >
      Show on bottom
    </button>
  </div>
  <div class="tablet:grid-col-3 margin-top-2 text-center">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="right"
      data-classes="width-full tablet:width-auto"
      title="Right"
    >
      Show on right
    </button>
  </div>
  <div class="tablet:grid-col-3 margin-top-2 text-center">
    <button
      type="button"
      class="usa-button usa-tooltip"
      data-position="left"
      data-classes="width-full tablet:width-auto"
      title="Left"
    >
      Show on left
    </button>
  </div>
</div>
<!-- MARKUP Ends -->

Out of the Box - Validation

Details and Specs

Requirements USWDS Specs Designs

Description

Stating validation requirements up front, with live feedback, means users won’t be left guessing.

Guidance

When to use the validation component Provide helpful validation feedback. Use the validation component to give immediate feedback on which validation requirements have been successfully met, and which are not completed yet.

Usability

Validate on the server side as well. The validation component is intended primarily for usability, not as a robust security solution, since all the validation logic occurs on the client side. The validation should be “mirrored” on the server-side for security purposes.
Connect the input element to your validation checklist. Set the value of your input’s data-validation-element to the id of its related .usa-checklist. For example, if the .usa-checklist element has an id of validate-code, use data-validation-element="validate-code".

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .usa-form 

        ------------------- 

        max-width: 20rem;  /* 320px */ 


        .usa-fieldset 

        ------------------- 

        border: none;

         margin: 0;

         padding: 0;  



       .usa-legends 

        ------------------- 

         font-size:  $base-font-size; /*  1.125rem /18px */ 


        .usa-alert.usa-alert--info 

        ------------------- 

          background: $cerulean-20 ;  /* #daeaf6 */ 

          border-left-color: $cerulean;  /* #5191cd */ 


        .usa-input 

        ------------------- 


          border-width: 1px; 

          border-color: #565c65; 

         border-style: solid;

         appearance: none;

         border-radius: 0;

         color: #1b1b1b;

        display: block;

        height: 2.5rem;  /* 40*/

        margin-top: 0.5rem;

        padding: 0.5rem;

       width: 100%;

Preview

<!-- CUSTOM STYLES  -->
<style>

</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-details-validation">Details</button>
    </h4>
    <div id="template-details-validation" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7955" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/validation/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Stating validation requirements up front, with live feedback, means users won’t be left guessing.</p>

      <h5>Guidance</h5>
      <p>When to use the validation component
Provide helpful validation feedback. Use the validation component to give immediate feedback on which validation requirements have been successfully met, and which are not completed yet.</p>
        <h6>Usability</h6>
        <ul>
          <li>Validate on the server side as well. The validation component is intended primarily for usability, not as a robust security solution, since all the validation logic occurs on the client side. The validation should be “mirrored” on the server-side for security purposes.</li>
<li>Connect the input element to your validation checklist. Set the value of your input’s data-validation-element to the id of its related .usa-checklist. For example, if the .usa-checklist element has an id of validate-code, use data-validation-element="validate-code".</li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="template-specs-validation">Specs</button>
    </h4>
    <div id="template-specs-validation" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

        .usa-form <br />
        ------------------- <br />
        max-width: 20rem;  /* 320px */ <br />

        .usa-fieldset <br />
        ------------------- <br />
        border: none;<br />
         margin: 0;<br />
         padding: 0;  <br /><br />

       .usa-legends <br />
        ------------------- <br />
         font-size:  $base-font-size; /*  1.125rem /18px */ <br />

        .usa-alert.usa-alert--info <br />
        ------------------- <br />
          background: $cerulean-20 ;  /* #daeaf6 */ <br />
          border-left-color: $cerulean;  /* #5191cd */ <br />

        .usa-input <br />
        ------------------- <br /><br />
          border-width: 1px; <br />
          border-color: #565c65; <br />
         border-style: solid;<br />
         appearance: none;<br />
         border-radius: 0;<br />
         color: #1b1b1b;<br />
        display: block;<br />
        height: 2.5rem;  /* 40*/<br />
        margin-top: 0.5rem;<br />
        padding: 0.5rem;<br />
       width: 100%;<br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- MARKUP   Begins -->
<form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend usa-legend--large">Enter a code</legend>
    <div class="usa-alert usa-alert--info usa-alert--validation">
      <div class="usa-alert__body">
        <h3 class="usa-alert__heading">Code requirements</h3>
        <ul class="usa-checklist" id="validate-code">
          <li class="usa-checklist__item" data-validator="uppercase"> Use at least one uppercase character</li>
          <li class="usa-checklist__item" data-validator="numerical">  Use at least one number </li>
        </ul>
      </div>
    </div>
    <label class="usa-label" for="code">Code</label>
    <input
      class="usa-input"
      id="code"
      name="code"
      data-validate-uppercase="[A-Z]"
      data-validate-numerical="\\d"
      data-validation-element="validate-code"
    />
    <input class="usa-button" type="submit" value="Submit code" />
  </fieldset>
</form>
<!-- MARKUP Ends  -->

Sandbox - Button Group

Details and Specs

Requirements USWDS Specs Designs

Description

The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.

Guidance

Usability

Avoid burden of choice. Try not to present the user with too many options.

Accessibility

Convey relationship. If not using a list element, give the parent element role="group" in order to convey to screen readers that actions are part of a group. If using as part of a toolbar, use role="toolbar".

Examples


        font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        ul.usa-button-group 

        ------------------- 

         margin-left: 0; 



        li.usa-button-group__item 

        ------------------- 

         list-style: none; 



        .usa-button, back-btn 

        ------------------- 

        font-size: 1.125rem; /* 18px / $base-font-size */ 

        background-color: $teal;  /* #1a6986  */ 

        border: $teal ; /* #1a6986  */ 

        color: $white /* #fff;*/ 

        cursor: pointer; 



        .usa-button--outline, 

        ------------------- 

        color: #005ea2; 

        background-color: $white /* #fff;*/ 

        box-shadow: inset 0 0 0 2px #005ea2;

Preview

Back

<!-- CUSTOM STYLES  -->
<style>
.usa-button-group a:link {
    text-decoration: none;
}
ul.usa-button-group {
    margin-left: 0;
}
li.usa-button-group__item {
    list-style: none;
}
.usa-button-group .back-btn {
    font-size: 1.125rem;
    cursor: pointer;
    border: 1px solid #1a6986;
    color: #1a6986;
    box-shadow: none;
    font-weight: normal;
}
.usa-button-group .back-btn:hover {
  border: 1px solid #5f636a;
color: #5f636a;
}

.usa-button-group .back-btn a {
  color: #fff;
}
</style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-detail--button-group">Details</button>
    </h4>
    <div id="templates-detail--button-group" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/jira/software/c/projects/OCWT/boards/23?assignee=70121%3Ad9795668-422b-46e8-90c7-d763d54b411c&selectedIssue=OCWT-7952" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/button-group/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

        <h5>Description</h5>
        <p>The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically.</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Avoid burden of choice. Try not to present the user with too many options. </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>
                 Convey relationship. If not using a list element, give the parent element role="group" in order to convey to screen readers that actions are part of a group. If using as part of a toolbar, use
               role="toolbar".
         </li>
        </ul>

 <h5>Examples</h5>
<ul class="usa-button-group usa-button-group--segmented">
  <li class="usa-button-group__item">
    <button type="button" class="usa-button">Map</button>
  </li>
  <li class="usa-button-group__item">
    <button type="button" class="usa-button usa-button--outline">Hybrid</button>
  </li>
  <li class="usa-button-group__item">
    <button type="button" class="usa-button usa-button--outline">
      Satellite
    </button>
  </li>
</ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="templates-specs--button-group">Specs</button>
    </h4>
    <div id="templates-specs--button-group" class="usa-accordion__content">
      <code>
        font-family: "Source Sans Pro",sans-serif; <br>
            font-color: $charcoal; /* #4A4A4A */ <br>
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br>
            MOBILE: font-size: 1rem; /* 16px /  <br>
            line-height: 1.5; /* 25.44px */ <br>
            font-weight: 400; <br><br>

        ul.usa-button-group <br />
        ------------------- <br />
         margin-left: 0; <br /><br />

        li.usa-button-group__item <br />
        ------------------- <br />
         list-style: none; <br /><br />

        .usa-button, back-btn <br />
        ------------------- <br />
        font-size: 1.125rem; /* 18px / $base-font-size */ <br />
        background-color: $teal;  /* #1a6986  */ <br />
        border: $teal ; /* #1a6986  */ <br />
        color: $white /* #fff;*/ <br />
        cursor: pointer; <br /><br />

        .usa-button--outline, <br />
        ------------------- <br />
        color: #005ea2; <br />
        background-color: $white /* #fff;*/ <br />
        box-shadow: inset 0 0 0 2px #005ea2; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<!-- Markup Begins  -->
<ul class="usa-button-group">
  <li class="usa-button-group__item">
    <a href="#" class="usa-button back-btn usa-button--outline">Back</a>
  </li>
  <li class="usa-button-group__item">
    <button type="button" class="usa-button">Continue</button>
  </li>
</ul>
<!-- Markup Ends  -->

Sandbox - Template

Details and Specs

Requirements USWDS Specs Designs

Description

Description Goes Here

Guidance

Usability

Usability List Goes Here

Accessibility

Accessibility List Goes Here

Examples

Example List Goes Here


         font-family: "Source Sans Pro",sans-serif; 

            font-color: $charcoal; /* #4A4A4A */ 

            DESKTOP: font-size: 1.06rem; /* 16.96px /  

            MOBILE: font-size: 1rem; /* 16px /  

            line-height: 1.5; /* 25.44px */ 

            font-weight: 400; 



        .sampleclass 

        ------------------- 

        samplestyle: samplestyle;

Preview

Markup Goes Here

<!-- CUSTOM STYLES  -->
<style></style>

<!-- CUSTOM SCRIPTS  -->
<script></script>

<!-- DETAILS AND SPECS  -->
<div class="usa-accordion style-admin usa-accordion--bordered">
  <div class="grid-row margin-bottom-2">
    <div class="grid-col-6 usa-accordion-group-header">
      <h3>
        <p>Details and Specs</p>
      </h3>
    </div>
  </div>

  <!-- DETAILS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="details-tsg-template">Details</button>
    </h4>
    <div id="details-tsg-template" class="usa-accordion__content">
      <p style="text-align: center;">
        <a href="https://ocwebteam.atlassian.net/wiki/spaces/SAMHSAWCMS/pages/2828992548/Requirements+-+Components+-+Template" class="button primary-button-1" title="Link to Requiremnets Doc" aria-label="Link to Requiremnets Doc" target="_blank">Requirements</a>
        <a href="https://designsystem.digital.gov/components/overview/" class="button primary-button-1" title="Link To USWDS Specs" aria-label="Link To USWDS Specs" target="_blank">USWDS Specs</a>
        <a href="https://app.zeplin.io/project/613a6613b0b0fc28808c8878/dashboard?sid=613a66b1fc730d291b35da2a" class="button primary-button-1" title="Link to XD Designs" aria-label="Link XD Designs" target="_blank">Designs</a>
      </p>

      <h5>Description</h5>
        <p>Description Goes Here</p>

      <h5>Guidance</h5>
        <h6>Usability</h6>
        <ul>
          <li>Usability List Goes Here </li>
        </ul>

        <h6>Accessibility</h6>
        <ul>
          <li>Accessibility List Goes Here </li>
        </ul>

      <h5>Examples</h5>
        <ul>
          <li>Example List Goes Here </li>
        </ul>
    </div>
  </div>

  <!-- SPECS -->
  <div class="usa-accordion_panel_wrapper tablet:grid-col-12">
    <h4 class="usa-accordion__heading">
      <!-- NOTE - MAKE SURE THE ARIA-CONTROLS AND THE ID MATCH AND ARE UNIQUE  -->
      <button class="usa-accordion__button darker" aria-expanded="false" aria-controls="specs-tsg-template">Specs</button>
    </h4>
    <div id="specs-tsg-template" class="usa-accordion__content">
      <code>
         font-family: "Source Sans Pro",sans-serif; <br />
            font-color: $charcoal; /* #4A4A4A */ <br />
            DESKTOP: font-size: 1.06rem; /* 16.96px /  <br />
            MOBILE: font-size: 1rem; /* 16px /  <br />
            line-height: 1.5; /* 25.44px */ <br />
            font-weight: 400; <br /><br />

        .sampleclass <br />
        ------------------- <br />
        samplestyle: samplestyle; <br /><br />

      </code>
    </div>
  </div>
</div>
<br>
<hr>
<br>
<!-- MARKUP  -->
<h3>Preview</h3>
<div> Markup Goes Here </div>

Standards

Find Support

Guidelines

Need Review

In Development

Out of the Box

Sandbox

Standards

Find Support

Guidelines

Need Review

In Development

Out of the Box

Sandbox

SAMHSA Styleguide

Standards - Accordions

Details and Specs

Details

Description

Guidance

Usability

Accessibility

Examples

Specs

Preview - Borderless

First Amendment This is an internal link. This is an external link.

Second Amendment

Third Amendment

Fourth Amendment

Fifth Amendment

Preview - Bordered

First Amendment

Second Amendment

Third Amendment

Fourth Amendment

Fifth Amendment

Preview - Multiselectable

First Amendment

Second Amendment

Third Amendment

Fourth Amendment

Fifth Amendment

Standards - Alerts

Details and Specs

Details

Description

Guidance

Usability

Accessibility

Examples

Specs

Standard Alerts

Informative status

Warning status

Error status

Success status

Slim Alert

Alert with no icon

Urgent Contact Us Alerts

Standards - Banner Image

Details and Specs

Details

Description

Guidance

Usability

Accessibility

Examples

Specs

Banner Image

Standards - Base - Colors

Details and Specs

Details

Base Colors

Midnights

Primary Reds

Primary Blues

Accents

Social Media Colors

Standards - Base - Fonts

Details and Specs

H1 < h1> Heading With
Broken Text

H2 < h2> Heading With
Broken Text

H3 < h3> Heading With
Broken Text

H4 < h4> Heading With
Broken Text

H5 < h5> Heading With
Broken Text

H6 < h6> Heading With
Broken Text