<!-- SASS: src/stylesheets/_components/status-indicators.scss -->

<h6>Small</h6>
<span class="usa-label">New</span>

<h6>Large</h6>
<span class="usa-label-big">New</span>

<h6>Color Variations</h6>
<div>
    <span class="usa-label usa-label-primary-darker">New</span>
    <span class="usa-label usa-label-primary-darkest">New</span>
</div>
<div>
    <span class="usa-label usa-label-primary-alt">New</span>
    <span class="usa-label usa-label-primary-alt-dark">New</span>
    <span class="usa-label usa-label-primary-alt-darkest">New</span>
</div>
<div>
    <span class="usa-label usa-label-secondary">New</span>
    <span class="usa-label usa-label-secondary-dark">New</span>
    <span class="usa-label usa-label-secondary-darkest">New</span>
</div>
<div>
    <span class="usa-label usa-label-gray-dark">New</span>
    <span class="usa-label usa-label-gray">New</span>
    <span class="usa-label usa-label-gray-medium">New</span>
    <span class="usa-label usa-label-gray-warm-dark">New</span>
</div>
<div>
    <span class="usa-label usa-label-purple">New</span>
</div>
<div>
    <span class="usa-label usa-label-gold">New</span>
    <span class="usa-label usa-label-gold-light">New</span>
</div>
<div>
    <span class="usa-label usa-label-green">New</span>
    <span class="usa-label usa-label-green-light">New</span>
</div>
<div>
    <span class="usa-label usa-label-blue">New</span>
    <span class="usa-label usa-label-blue-light">New</span>
    <span class="usa-label usa-label-blue-lighter">New</span>
    <span class="usa-label usa-label-blue-lightest">New</span>
    <span class="usa-label usa-label-outline">New</span>
</div>

<style scoped>
    div {
        margin-bottom: 1rem;
    }
</style>
  • Handle: @status-indicators
  • Preview:
  • Filesystem Path: src/components/status-indicators/status-indicators.hbs