Background Patterns and Colors in Cosmic

Background and Pattern Examples with Class Names

These examples can be applied to many of our standard templates, such as Cards, Grids, and Envelopes. An example of a three-column grid with card items using a diagonal background on UO green might look like this in the code:

<div class="grid grid--3col">
  <div class="grid__item card--borders ">
    <div class="card card--borders card--background palette-bg-uo-green bg-pattern-diagonal">
      <div class="card__photo">IMAGE</div>
      <div class="card__title"><p>TEXT</p></div>
      <div class="card__teaser"><p>TEXT</p></div>
    </div>
  </div>
</div>

For background gradients, patterns, textures, and image classes, always apply a color class to the beginning. For example, use the two classes "palette-bg-uo-yellow bg-pattern-confetti" to add a confetti pattern on top of the UO yellow background.

Basic Colors

 

UO Green

Class:

palette-bg-uo-green

 

 

UO Yellow

Class:

palette-bg-uo-yellow

 

 

UO Legacy Green

Class:

palette-bg-uo-legacy-green

 

 

Grass Green

Class:

palette-bg-grass-green

 

 

Lime Green

Class:

palette-bg-lime-green

 

 

Chartreuse

Class:

palette-bg-chartreuse

 

 

Dark Blue

Class:

palette-bg-dark-blue

 

 

Light Blue

Class:

palette-bg-light-blue

 

 

Berry

Class:

palette-bg-berry

 

 

Dark Gray

Class:

palette-bg-dark-gray

 

 

Medium Gray

Class:

palette-bg-medium-gray

 

 

Light Gray

Class:

palette-bg-light-gray

 

 

Black

Class:

palette-bg-black

 

 

White

Class:

palette-bg-white

 

Gradient examples

 

Yellow to Green

Classes:

bg-yellow-green-gradient

context--foreground-light

 

 

Green to Yellow

Classes:

bg-green-gradient-1

context--foreground-light

 

 

Dark Green to Light Green

Classes:

bg-green-gradient-2

context--foreground-light

 

 

Light Green to Dark Green

Classes:

bg-green-gradient-3

context--foreground-light

 

Pattern examples

Our pattern examples below are using the UO Green background, however our patterns will also work with many of the other flat background colors shown in the first section of this page. 

 

Waves

Classes:

palette-bg-uo-green

bg-pattern-waves

 

 

Diagonal Lines

Classes:

palette-bg-uo-green

bg-pattern-diagonal

 

Geometric Prisms

Classes:

palette-bg-uo-green

bg-pattern-prisms

 

 

Molecules

Classes:

palette-bg-uo-green

bg-pattern-molecules

 

Circles

Classes:

palette-bg-uo-green

bg-pattern-circles

 

 

Topographic

Classes:

palette-bg-uo-green

bg-pattern-topo

 

 

Dots

Classes:

palette-bg-uo-green

bg-pattern-dots

 

 

Confetti

Classes:

palette-bg-uo-green

bg-pattern-confetti

 

Texture and Image Backgrounds

Green Textures


Green Texture 1

Classes:

bg-green-1

context--foreground-light
 


Green Texture 2

Classes:

bg-green-2

context--foreground-light
 


Green Texture 3

Classes:

bg-green-3

context--foreground-light
 


Green Texture 4

Classes:

bg-green-4

context--foreground-light
 

Green Leaves


Green Leaves 1

Classes:

bg-green-leaves-1

context--foreground-light
 


Green Leaves 2

Classes:

bg-green-leaves-2

context--foreground-light
 


Green Leaves 3

Classes:

bg-green-leaves-3

context--foreground-light
 


Green Leaves 4

Classes:

bg-green-leaves-4

context--foreground-light
 


Green Leaves 5

Classes:

bg-green-leaves-5

context--foreground-light
 

Green Trees


Green Trees 1

Classes:

bg-green-trees-1

context--foreground-light
 


Green Trees 2

Classes:

bg-green-trees-2

context--foreground-light
 


Green Trees 3

Classes:

bg-green-trees-3

context--foreground-light
 


Green Trees 4

Classes:

bg-green-trees-4

context--foreground-light
 


Green Trees 5

Classes:

bg-green-trees-5

context--foreground-light
 


Green Trees 6

Classes:

bg-green-trees-6

context--foreground-light
 

Green Grasses


Green Grasses 1

Classes:

bg-green-grass-1

context--foreground-light
 


Green Grasses 2

Classes:

bg-green-grass-2

context--foreground-light
 


Green Grasses 3

Classes:

bg-green-grass-3

context--foreground-light
 


Green Grasses 4

Classes:

bg-green-grass-4

context--foreground-light
 


Green Grasses 5

Classes:

bg-green-grass-5

context--foreground-light
 


Green Grasses 6

Classes:

bg-green-grass-6

context--foreground-light
 

Yellow Textures


Yellow Texture 1

Class:

bg-yellow-1
 


Yellow Texture 2

Class:

bg-yellow-2
 


Yellow Texture 3

Class:

bg-yellow-3
 


Yellow Texture 4

Class:

bg-yellow-4
 


Yellow Texture 5

Class:

bg-yellow-5
 


Yellow Texture 6

Class:

bg-yellow-6
 

Yellow Leaves


Yellow Leaves 1

Class:

bg-yellow-leaves-1
 


Yellow Leaves 2

Class:

bg-yellow-leaves-2
 


Yellow Leaves 3

Class:

bg-yellow-leaves-3
 


Yellow Leaves 4

Class:

bg-yellow-leaves-4
 

Gray Textures


Gray Textures 1

Classes:

bg-gray-1

context--foreground-light
 


Gray Textures 2

Classes:

bg-gray-2

context--foreground-light