Colors

Color helpers allow you to modify the colors of HTML elements via CSS class.

Background colors

The following helpers, starting with .ms-bg-***, allow you to modify the background of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-bg-main">.ms-bg-main</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-light">.ms-bg-light</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-primary">.ms-bg-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-secondary">.ms-bg-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-action">.ms-bg-action</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-action2">.ms-bg-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-white">.ms-bg-white</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-black ms-text-white">.ms-bg-black</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-yellow">.ms-bg-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-green">.ms-bg-green</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-red">.ms-bg-red</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-purple">.ms-bg-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-orange">.ms-bg-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-brown">.ms-bg-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-navy ms-text-white">.ms-bg-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-bluesky">.ms-bg-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-bg-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-main">.ms-bg-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-light">.ms-bg-light</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-primary">.ms-bg-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-secondary">.ms-bg-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-action">.ms-bg-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-action2">.ms-bg-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-white">.ms-bg-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-black ms-text-white">.ms-bg-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-yellow">.ms-bg-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-green">.ms-bg-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-red">.ms-bg-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-purple">.ms-bg-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-orange">.ms-bg-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-brown">.ms-bg-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-navy ms-text-white">.ms-bg-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-bluesky">.ms-bg-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-bg-pink">.ms-bg-pink</div>
</div>

Result

Loading...

Text colors

The following helpers, starting with .ms-text-***, allow you to modify the text color of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-text-main">.ms-text-main</div> <div class="ms-alert ms-border ms-fullwidth ms-text-light">.ms-text-light</div> <div class="ms-alert ms-border ms-fullwidth ms-text-primary">.ms-text-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-text-secondary">.ms-text-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-text-action">.ms-text-action</div> <div class="ms-alert ms-border ms-fullwidth ms-text-action2">.ms-text-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-text-white ms-bg-black">.ms-text-white</div> <div class="ms-alert ms-border ms-fullwidth ms-text-black ms-text-white">.ms-text-black</div> <div class="ms-alert ms-border ms-fullwidth ms-text-yellow">.ms-text-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-text-green">.ms-text-green</div> <div class="ms-alert ms-border ms-fullwidth ms-text-red">.ms-text-red</div> <div class="ms-alert ms-border ms-fullwidth ms-text-purple">.ms-text-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-text-orange">.ms-text-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-text-brown">.ms-text-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-text-navy ms-text-white">.ms-text-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-text-bluesky">.ms-text-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-text-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-main">.ms-text-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-light">.ms-text-light</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-primary">.ms-text-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-secondary">.ms-text-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-action">.ms-text-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-action2">.ms-text-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-white ms-bg-black">.ms-text-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-black ms-text-white">.ms-text-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-yellow">.ms-text-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-green">.ms-text-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-red">.ms-text-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-purple">.ms-text-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-orange">.ms-text-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-brown">.ms-text-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-navy ms-text-white">.ms-text-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-bluesky">.ms-text-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-text-pink">.ms-bg-pink</div>
</div>

Result

Loading...

Border colors

The following helpers, starting with .ms-border-***, allow you to modify the border color of an HTML element.

Live Editor

<div> <div class="ms-alert ms-border ms-fullwidth ms-border-main">.ms-border-main</div> <div class="ms-alert ms-border ms-fullwidth ms-border-primary">.ms-border-primary</div> <div class="ms-alert ms-border ms-fullwidth ms-border-secondary">.ms-border-secondary</div> <div class="ms-alert ms-border ms-fullwidth ms-border-action">.ms-border-action</div> <div class="ms-alert ms-border ms-fullwidth ms-border-action2">.ms-border-action2</div> <div class="ms-alert ms-border ms-fullwidth ms-border-white">.ms-border-white</div> <div class="ms-alert ms-border ms-fullwidth ms-border-black">.ms-border-black</div> <div class="ms-alert ms-border ms-fullwidth ms-border-yellow">.ms-border-yellow</div> <div class="ms-alert ms-border ms-fullwidth ms-border-green">.ms-border-green</div> <div class="ms-alert ms-border ms-fullwidth ms-border-red">.ms-border-red</div> <div class="ms-alert ms-border ms-fullwidth ms-border-purple">.ms-border-purple</div> <div class="ms-alert ms-border ms-fullwidth ms-border-orange">.ms-border-orange</div> <div class="ms-alert ms-border ms-fullwidth ms-border-brown">.ms-border-brown</div> <div class="ms-alert ms-border ms-fullwidth ms-border-navy">.ms-border-navy</div> <div class="ms-alert ms-border ms-fullwidth ms-border-bluesky">.ms-border-bluesky</div> <div class="ms-alert ms-border ms-fullwidth ms-border-pink">.ms-bg-pink</div> </div>

<div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-main">.ms-border-main</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-primary">.ms-border-primary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-secondary">.ms-border-secondary</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-action">.ms-border-action</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-action2">.ms-border-action2</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-white">.ms-border-white</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-black">.ms-border-black</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-yellow">.ms-border-yellow</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-green">.ms-border-green</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-red">.ms-border-red</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-purple">.ms-border-purple</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-orange">.ms-border-orange</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-brown">.ms-border-brown</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-navy">.ms-border-navy</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-bluesky">.ms-border-bluesky</div>
    <div class="ms-alert ms-border ms-fullwidth ms-border-pink">.ms-bg-pink</div>
</div>

Result

Loading...

Invert color

It is possible to reverse the colors with the .ms-invert-color class.

Live Editor

<div class="ms-alert ms-fullwidth ms-primary ms-invert-color">.ms-invert-color</div>

<div class="ms-alert ms-fullwidth ms-primary ms-invert-color">.ms-invert-color</div>

Result

Loading...