Backgrounds

Version: 0.9.0

Edit

Background colors, patterns, and images.

Whites

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L9

White

White Alt

<!-- bg white -->
<div class="u-bg-white">
  <p>White</p>
</div>

<!-- bg white alt -->
<div class="u-bg-white-alt">
  <p>White Alt</p>
</div>

Black

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L32

Black

<!-- bg black -->
<div class="u-bg-black">
  <p>Black</p>
</div>

Reds

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L46

Red

Red Dark 10

Red Dark 20

<!-- bg red -->
<div class="u-bg-red">
  <p>Red</p>
</div>

<!-- bg red dark 10 -->
<div class="u-bg-red-dark-10">
  <p>Red Dark 10</p>
</div>

<!-- bg red dark 20 -->
<div class="u-bg-red-dark-20">
  <p>Red Dark 20</p>
</div>

Blues

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L78

Blue

Blue Dark 10

Blue Dark 20

Light Blue

<!-- bg blue -->
<div class="u-bg-blue">
  <p>Blue</p>
</div>

<!-- bg blue dark 10 -->
<div class="u-bg-blue-dark-10">
  <p>Blue Dark 10</p>
</div>

<!-- bg blue dark 20 -->
<div class="u-bg-blue-dark-20">
  <p>Blue Dark 20</p>
</div>

<!-- bg light blue -->
<div class="u-bg-light-blue">
  <p>Light Blue</p>
</div>

Grays

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L119

Light Gray

Medium Gray

Gray

Dark Gray

<!-- bg light gray -->
<div class="u-bg-light-gray">
  <p>Light Gray</p>
</div>

<!-- bg medium gray -->
<div class="u-bg-medium-gray">
  <p>Medium Gray</p>
</div>

<!-- bg gray -->
<div class="u-bg-gray">
  <p>Gray</p>
</div>

<!-- bg dark gray -->
<div class="u-bg-dark-gray">
  <p>Dark Gray</p>
</div>

Black Overlays

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L160

Black Overlay 10

Black Overlay 20

Black Overlay 30

Black Overlay 40

Black Overlay 50

Black Overlay 60

Black Overlay 70

Black Overlay 80

Black Overlay 90

<!-- bg black overlays -->
<div class="u-bg-black-overlay-10">Black Overlay 10</div>
<div class="u-bg-black-overlay-20">Black Overlay 20</div>
<div class="u-bg-black-overlay-30">Black Overlay 30</div>
<div class="u-bg-black-overlay-40">Black Overlay 40</div>
<div class="u-bg-black-overlay-50">Black Overlay 50</div>
<div class="u-bg-black-overlay-60">Black Overlay 60</div>
<div class="u-bg-black-overlay-70">Black Overlay 70</div>
<div class="u-bg-black-overlay-80">Black Overlay 80</div>
<div class="u-bg-black-overlay-90">Black Overlay 90</div>

Blue Overlays

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L212

Blue Overlay 10

Blue Overlay 20

Blue Overlay 30

Blue Overlay 40

Blue Overlay 50

Blue Overlay 60

Blue Overlay 70

Blue Overlay 80

Blue Overlay 90

<!-- bg blue overlays -->
<div class="u-bg-blue-overlay-10">Blue Overlay 10</div>
<div class="u-bg-blue-overlay-20">Blue Overlay 20</div>
<div class="u-bg-blue-overlay-30">Blue Overlay 30</div>
<div class="u-bg-blue-overlay-40">Blue Overlay 40</div>
<div class="u-bg-blue-overlay-50">Blue Overlay 50</div>
<div class="u-bg-blue-overlay-60">Blue Overlay 60</div>
<div class="u-bg-blue-overlay-70">Blue Overlay 70</div>
<div class="u-bg-blue-overlay-80">Blue Overlay 80</div>
<div class="u-bg-blue-overlay-90">Blue Overlay 90</div>

Red Overlays

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L264

Red Overlay 10

Red Overlay 20

Red Overlay 30

Red Overlay 40

Red Overlay 50

Red Overlay 60

Red Overlay 70

Red Overlay 80

Red Overlay 90

<!-- bg red overlays -->
<div class="u-bg-red-overlay-10">Red Overlay 10</div>
<div class="u-bg-red-overlay-20">Red Overlay 20</div>
<div class="u-bg-red-overlay-30">Red Overlay 30</div>
<div class="u-bg-red-overlay-40">Red Overlay 40</div>
<div class="u-bg-red-overlay-50">Red Overlay 50</div>
<div class="u-bg-red-overlay-60">Red Overlay 60</div>
<div class="u-bg-red-overlay-70">Red Overlay 70</div>
<div class="u-bg-red-overlay-80">Red Overlay 80</div>
<div class="u-bg-red-overlay-90">Red Overlay 90</div>

Transparent

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L316

Transparent

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

Alerts

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L330

Danger

Info

Success

Warning

<!-- bg danger -->
<div class="u-bg-danger">
  <p>Danger</p>
</div>

<!-- bg info -->
<div class="u-bg-info">
  <p>Info</p>
</div>

<!-- bg success -->
<div class="u-bg-success">
  <p>Success</p>
</div>

<!-- bg warning -->
<div class="u-bg-warning">
  <p>Warning</p>
</div>

Gradients

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L371

Quarter Transparent to White

Half Black to Transparent

<!-- bg quarter transparent to white -->
<div class="u-bg-gradient-quarter-transparent-to-white">
  <p>Quarter Transparent to White</p>
</div>

<!-- bg half black to transparent -->
<div class="u-bg-gradient-half-black-to-transparent">
  <p>Half Black to Transparent</p>
</div>

Chevrons

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L400

Chevrons

Gradient over Chevrons

Blue over Chevrons

Red over Chevrons

Yellow over Chevrons

<!-- bg chevrons -->
<div class="u-bg-chevrons">
  <p>Chevrons</p>
</div>

<!-- bg gradient over chevrons -->
<div class="u-bg-gradient-over-chevrons">
  <p>Gradient over Chevrons</p>
</div>

<!-- bg blue over chevrons -->
<div class="u-bg-blue-over-chevrons">
  <p>Blue over Chevrons</p>
</div>

<!-- bg red over chevrons -->
<div class="u-bg-red-over-chevrons">
  <p>Red over Chevrons</p>
</div>

<!-- bg yellow over chevrons -->
<div class="u-bg-yellow-over-chevrons">
  <p>Yellow over Chevrons</p>
</div>

Pies

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L510

Pies

Gradient over Pies

Blue over Pies

Red over Pies

Yellow over Pies

<!-- bg pies -->
<div class="u-bg-pies">
  <p>Pies</p>
</div>

<!-- bg gradient over pies -->
<div class="u-bg-gradient-over-pies">
  <p>Gradient over Pies</p>
</div>

<!-- bg blue over pies -->
<div class="u-bg-blue-over-pies">
  <p>Blue over Pies</p>
</div>

<!-- bg red over pies -->
<div class="u-bg-red-over-pies">
  <p>Red over Pies</p>
</div>

<!-- bg yellow over pies -->
<div class="u-bg-yellow-over-pies">
  <p>Yellow over Pies</p>
</div>

Stars

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L619

Stars

Gradient over Stars

Blue over Stars

Red over Stars

Yellow over Stars

<!-- bg stars -->
<div class="u-bg-stars">
  <p>Stars</p>
</div>

<!-- bg gradient over stars -->
<div class="u-bg-gradient-over-stars">
  <p>Gradient over Stars</p>
</div>

<!-- bg blue over stars -->
<div class="u-bg-blue-over-stars">
  <p>Blue over Stars</p>
</div>

<!-- bg red over stars -->
<div class="u-bg-red-over-stars">
  <p>Red over Stars</p>
</div>

<!-- bg yellow over stars -->
<div class="u-bg-yellow-over-stars">
  <p>Yellow over Stars</p>
</div>

Black Stripe

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L728

Black Stripe

<!-- bg black stripe -->
<div class="u-bg-black-stripe">
  <p>Black Stripe</p>
</div>

Blue Stripe

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L744

Blue Stripe

<!-- bg blue stripe -->
<div class="u-bg-blue-stripe">
  <p>Blue Stripe</p>
</div>

Checkered

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L760

Checkered

<!-- bg checkered -->
<div class="u-bg-checkered">
  <p>Checkered</p>
</div>

Alumni

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L776

Image - Alumni

Gradient over Image - Alumni

Black over Image - Alumni

<!-- bg alumni image -->
<div class="u-bg-image-alumni">
  <p>Image - Alumni</p>
</div>

<!-- bg gradient over alumni image -->
<div class="u-bg-gradient-over-image-alumni">
  <p>Gradient over Image - Alumni</p>
</div>

<!-- bg black over alumni image -->
<div class="u-bg-black-over-image-alumni">
  <p>Black over Image - Alumni</p>
</div>

BRMM

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L839

Image - BRMM

Gradient over Image - BRMM

Black over Image - BRMM

<!-- bg brmm image -->
<div class="u-bg-image-brmm">
  <p>Image - BRMM</p>
</div>

<!-- bg gradient over brmm image -->
<div class="u-bg-gradient-over-image-brmm">
  <p>Gradient over Image - BRMM</p>
</div>

<!-- bg black over brmm image -->
<div class="u-bg-black-over-image-brmm">
  <p>Black over Image - BRMM</p>
</div>

Career

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L902

Image - Career

Gradient over Image - Career

Black over Image - Career

<!-- bg career image -->
<div class="u-bg-image-career">
  <p>Image - Career</p>
</div>

<!-- bg gradient over career image -->
<div class="u-bg-gradient-over-image-career">
  <p>Gradient over Image - Career</p>
</div>

<!-- bg black over career image -->
<div class="u-bg-black-over-image-career">
  <p>Black over Image - Career</p>
</div>

Civic

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L965

Image - Civic

Gradient over Image - Civic

Black over Image - Civic

<!-- bg civic image -->
<div class="u-bg-image-civic">
  <p>Image - Civic</p>
</div>

<!-- bg gradient over civic image -->
<div class="u-bg-gradient-over-image-civic">
  <p>Gradient over Image - Civic</p>
</div>

<!-- bg black over civic image -->
<div class="u-bg-black-over-image-civic">
  <p>Black over Image - Civic</p>
</div>

Crowd

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1028

Image - Crowd

Gradient over Image - Crowd

Black over Image - Crowd

<!-- bg crowd image -->
<div class="u-bg-image-crowd">
  <p>Image - Crowd</p>
</div>

<!-- bg gradient over crowd image -->
<div class="u-bg-gradient-over-image-crowd">
  <p>Gradient over Image - Crowd</p>
</div>

<!-- bg black over crowd image -->
<div class="u-bg-black-over-image-crowd">
  <p>Black over Image - Crowd</p>
</div>

Dietz

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1091

Image - Dietz

Gradient over Image - Dietz

Black over Image - Dietz

<!-- bg dietz image -->
<div class="u-bg-image-dietz">
  <p>Image - Dietz</p>
</div>

<!-- bg gradient over dietz image -->
<div class="u-bg-gradient-over-image-dietz">
  <p>Gradient over Image - Dietz</p>
</div>

<!-- bg black over dietz image -->
<div class="u-bg-black-over-image-dietz">
  <p>Black over Image - Dietz</p>
</div>

Diversity

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1154

Image - Diversity

Gradient over Image - Diversity

Black over Image - Diversity

<!-- bg diversity image -->
<div class="u-bg-image-diversity">
  <p>Image - Diversity</p>
</div>

<!-- bg gradient over diversity image -->
<div class="u-bg-gradient-over-image-diversity">
  <p>Gradient over Image - Diversity</p>
</div>

<!-- bg black over diversity image -->
<div class="u-bg-black-over-image-diversity">
  <p>Black over Image - Diversity</p>
</div>

Diversity 2

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1217

Image - Diversity 2

Gradient over Image - Diversity 2

Black over Image - Diversity 2

<!-- bg diversity 2 image -->
<div class="u-bg-image-diversity-2">
  <p>Image - Diversity 2</p>
</div>

<!-- bg gradient over diversity 2 image -->
<div class="u-bg-gradient-over-image-diversity-2">
  <p>Gradient over Image - Diversity 2</p>
</div>

<!-- bg black over diversity 2 image -->
<div class="u-bg-black-over-image-diversity-2">
  <p>Black over Image - Diversity 2</p>
</div>

Hand

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1280

Image - Hand

Gradient over Image - Hand

Black over Image - Hand

<!-- bg hand image -->
<div class="u-bg-image-hand">
  <p>Image - Hand</p>
</div>

<!-- bg gradient over hand image -->
<div class="u-bg-gradient-over-image-hand">
  <p>Gradient over Image - Hand</p>
</div>

<!-- bg black over hand image -->
<div class="u-bg-black-over-image-hand">
  <p>Black over Image - Hand</p>
</div>

Homecoming

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1343

Image - Homecoming

Gradient over Image - Homecoming

Black over Image - Homecoming

<!-- bg homecoming image -->
<div class="u-bg-image-homecoming">
  <p>Image - Homecoming</p>
</div>

<!-- bg gradient over homecoming image -->
<div class="u-bg-gradient-over-image-homecoming">
  <p>Gradient over Image - Homecoming</p>
</div>

<!-- bg black over homecoming image -->
<div class="u-bg-black-over-image-homecoming">
  <p>Black over Image - Homecoming</p>
</div>

Homecoming Royalty

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1406

Image - Homecoming Royalty

Gradient over Image - Homecoming Royalty

Black over Image - Homecoming Royalty

<!-- bg homecoming royalty image -->
<div class="u-bg-image-homecoming-royalty">
  <p>Image - Homecoming Royalty</p>
</div>

<!-- bg gradient over homecoming royalty image -->
<div class="u-bg-gradient-over-image-homecoming-royalty">
  <p>Gradient over Image - Homecoming Royalty</p>
</div>

<!-- bg black over homecoming royalty image -->
<div class="u-bg-black-over-image-homecoming-royalty">
  <p>Black over Image - Homecoming Royalty</p>
</div>

Preview

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1469

Image - Preview

Gradient over Image - Preview

Black over Image - Preview

<!-- bg preview image -->
<div class="u-bg-image-preview">
  <p>Image - Preview</p>
</div>

<!-- bg gradient over preview image -->
<div class="u-bg-gradient-over-image-preview">
  <p>Gradient over Image - Preview</p>
</div>

<!-- bg black over preview image -->
<div class="u-bg-black-over-image-preview">
  <p>Black over Image - Preview</p>
</div>

Quad

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1532

Image - Quad

Gradient over Image - Quad

Black over Image - Quad

<!-- bg quad image -->
<div class="u-bg-image-quad">
  <p>Image - Quad</p>
</div>

<!-- bg gradient over quad image -->
<div class="u-bg-gradient-over-image-quad">
  <p>Gradient over Image - Quad</p>
</div>

<!-- bg black over quad image -->
<div class="u-bg-black-over-image-quad">
  <p>Black over Image - Quad</p>
</div>

Quad 2

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1595

Image - Quad 2

Gradient over Image - Quad 2

Black over Image - Quad 2

<!-- bg quad 2 image -->
<div class="u-bg-image-quad-2">
  <p>Image - Quad 2</p>
</div>

<!-- bg gradient over quad 2 image -->
<div class="u-bg-gradient-over-image-quad-2">
  <p>Gradient over Image - Quad 2</p>
</div>

<!-- bg black over quad 2 image -->
<div class="u-bg-black-over-image-quad-2">
  <p>Black over Image - Quad 2</p>
</div>

Red Alert

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1658

Image - Red Alert

Gradient over Image - Red Alert

Black over Image - Red Alert

<!-- bg redalert image -->
<div class="u-bg-image-redalert">
  <p>Image - Red Alert</p>
</div>

<!-- bg gradient over redalert image -->
<div class="u-bg-gradient-over-image-redalert">
  <p>Gradient over Image - Red Alert</p>
</div>

<!-- bg black over redalert image -->
<div class="u-bg-black-over-image-redalert">
  <p>Black over Image - Red Alert</p>
</div>

Seal

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1721

Image - Seal

Gradient over Image - Seal

Black over Image - Seal

<!-- bg seal image -->
<div class="u-bg-image-seal">
  <p>Image - Seal</p>
</div>

<!-- bg gradient over seal image -->
<div class="u-bg-gradient-over-image-seal">
  <p>Gradient over Image - Seal</p>
</div>

<!-- bg black over seal image -->
<div class="u-bg-black-over-image-seal">
  <p>Black over Image - Seal</p>
</div>

Uptown

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/backgrounds.scss#L1775

Image - Uptown

Gradient over Image - Uptown

Black over Image - Uptown

<!-- bg uptown image -->
<div class="u-bg-image-uptown">
  <p>Image - Uptown</p>
</div>

<!-- bg gradient over uptown image -->
<div class="u-bg-gradient-over-image-uptown">
  <p>Gradient over Image - Uptown</p>
</div>

<!-- bg black over uptown image -->
<div class="u-bg-black-over-image-uptown">
  <p>Black over Image - Uptown</p>
</div>