Skip to main content

Background Colors

Version: 0.9.0
Edit

Utilities for setting background colors

Black

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L26

Background Color Black

Background Color Black Overlay 20

<!-- bg color black -->
<div class="u-bg-color-black">
  <p>Background Color Black</p>
</div>
<!-- bg color black overlay 20 -->
<div class="u-bg-color-black-overlay-20">
  <p>Background Color Black Overlay 20</p>
</div>

White

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L49

Background Color White

Background Color White Alt

Background Color White Overlay 75

<!-- bg color white -->
<div class="u-bg-color-white">
  <p>Background Color White</p>
</div>
<!-- bg color white alt -->
<div class="u-bg-color-white-alt">
  <p>Background Color White Alt</p>
</div>
<!-- bg color white overlay 75 -->
<div class="u-bg-color-white-overlay-75">
  <p>Background Color White Overlay 75</p>
</div>

Transparent

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L81

Background Color Transparent

<!-- bg color transparent -->
<div class="u-bg-color-transparent">
  <p>Background Color Transparent</p>
</div>

Gray

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L95

Background Color Light Gray

Background Color Medium Gray

Background Color Gray

Background Color Dark Gray

<!-- bg color light gray -->
<div class="u-bg-color-light-gray">
  <p>Background Color Light Gray</p>
</div>
<!-- bg color medium gray -->
<div class="u-bg-color-medium-gray">
  <p>Background Color Medium Gray</p>
</div>
<!-- bg color gray -->
<div class="u-bg-color-gray">
  <p>Background Color Gray</p>
</div>
<!-- bg color dark gray -->
<div class="u-bg-color-dark-gray">
  <p>Background Color Dark Gray</p>
</div>

Red

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L136

Background Color Red

Background Color Red Dark 10

Background Color Red Dark 20

Background Color Red Overlay 05

Background Color Red Overlay 15

<!-- bg color red -->
<div class="u-bg-color-red">
  <p>Background Color Red</p>
</div>
<!-- bg color red dark 10 -->
<div class="u-bg-color-red-dark-10">
  <p>Background Color Red Dark 10</p>
</div>
<!-- bg color red dark 20 -->
<div class="u-bg-color-red-dark-20">
  <p>Background Color Red Dark 20</p>
</div>
<!-- bg color red overlay 05 -->
<div class="u-bg-color-red-overlay-05">
  <p>Background Color Red Overlay 05</p>
</div>
<!-- bg color red overlay 15 -->
<div class="u-bg-color-red-overlay-15">
  <p>Background Color Red Overlay 15</p>
</div>

Blue

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L186

Background Color Blue

Background Color Blue Dark 10

Background Color Blue Dark 20

Background Color Blue Overlay 10

Background Color Blue Overlay 20

Background Color Light Blue

<!-- bg color blue -->
<div class="u-bg-color-blue">
  <p>Background Color Blue</p>
</div>
<!-- bg color blue dark 10 -->
<div class="u-bg-color-blue-dark-10">
  <p>Background Color Blue Dark 10</p>
</div>
<!-- bg color blue dark 20 -->
<div class="u-bg-color-blue-dark-20">
  <p>Background Color Blue Dark 20</p>
</div>
<!-- bg color blue overlay 10 -->
<div class="u-bg-color-blue-overlay-10">
  <p>Background Color Blue Overlay 10</p>
</div>
<!-- bg color blue overlay 20 -->
<div class="u-bg-color-blue-overlay-20">
  <p>Background Color Blue Overlay 20</p>
</div>
<!-- bg color light blue -->
<div class="u-bg-color-light-blue">
  <p>Background Color Light Blue</p>
</div>

Yellow

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L245

Background Color Yellow Overlay 10

Background Color Yellow Overlay 20

<!-- bg color yellow overlay 10 -->
<div class="u-bg-color-yellow-overlay-10">
  <p>Background Color Yellow Overlay 10</p>
</div>
<!-- bg color yellow overlay 20 -->
<div class="u-bg-color-yellow-overlay-20">
  <p>Background Color Yellow Overlay 20</p>
</div>

Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/background-colors.scss#L268

Background Color Danger Alert

Background Color Info Alert

Background Color Info Success

Background Color Info Warning

<!-- bg color danger -->
<div class="u-bg-color-danger">
  <p>Background Color Danger Alert</p>
</div>
<!-- bg color info -->
<div class="u-bg-color-info">
  <p>Background Color Info Alert</p>
</div>
<!-- bg color success -->
<div class="u-bg-color-success">
  <p>Background Color Info Success</p>
</div>
<!-- bg color warning -->
<div class="u-bg-color-warning">
  <p>Background Color Info Warning</p>
</div>