Metro Component Library Demo 2.0

State color utils 

<div class="padding-2 maxw-desktop">

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                error-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-error-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                warning-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-warning-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                success-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-success-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-lighter
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-lighter util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                info-darker
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-info-darker util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled-light
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled-light util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                disabled-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-disabled-dark util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                emergency
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-emergency util-test padding-205"></div>
        </div>
    </div>

    <div class="grid-row flex-align-center">
        <div class="tablet:grid-col-2">
            <div>
                emergency-dark
            </div>
        </div>
        <div class="tablet:grid-col-10">
            <div class="bg-emergency-dark util-test padding-205"></div>
        </div>
    </div>

</div>

No notes defined.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()
state_colors:
  - error-lighter
  - error-light
  - error
  - error-dark
  - error-darker
  - warning-lighter
  - warning-light
  - warning
  - warning-dark
  - warning-darker
  - success-lighter
  - success-light
  - success
  - success-dark
  - success-darker
  - info-lighter
  - info-light
  - info
  - info-dark
  - info-darker
  - disabled-light
  - disabled
  - disabled-dark
  - emergency
  - emergency-dark