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
Soaring and Swimming Ducks
Soaring Ducks Green
Classes:
bg-soaring-ducks-green
Soaring Ducks Yellow
Classes:
bg-soaring-ducks-yellow
Soaring Ducks White
Classes:
bg-soaring-ducks-white
Swimming Ducks Green
Classes:
bg-swimming-ducks-green
Swimming Ducks Yellow
Classes:
bg-swimming-ducks-yellow
Swimming Ducks White
Classes:
bg-swimming-ducks-white
Soaring and Swimming Ducks (Edge Style)
Soaring Ducks (Edges) Green
Classes:
bg-soaring-ducks-edges-green
Soaring Ducks (Edges) Yellow
Classes:
bg-soaring-ducks-edges-yellow
Soaring Ducks (Edges) Yellow (Alt)
Classes:
bg-soaring-ducks-edges-yellow-alt
Soaring Ducks (Edges) White
Classes:
bg-soaring-ducks-edges-white
Soaring Ducks (Edges) Green (Alt)
Classes:
bg-soaring-ducks-edges-green-alt
Swimming Ducks (Edges) Green
Classes:
bg-swimming-ducks-edges-green
Swimming Ducks (Edges) Yellow
Classes:
bg-swimming-ducks-edges-yellow
Swimming Ducks (Edges) Yellow (Alt)
Classes:
bg-swimming-ducks-edges-yellow-alt
Swimming Ducks (Edges) White
Classes:
bg-swimming-ducks-edges-white