Background Patterns & Images

Flat Colors

Tip

To set a container's background color, use a palette-bg- class instead of a flat color class.

The Color Palettes & Contexts page explains why and how to use them.

Green 1

Class: .bg-green-flat-1 & .context--foreground-light

Green 2

Class: .bg-green-flat-2 & .context--foreground-light

Yellow 1

Class: .bg-yellow-flat-1

Yellow 2

Class: .bg-yellow-flat-2

Gray 1

Class: .bg-gray-flat-1

Gray 2

Class: .bg-gray-flat-2

Gray 3

Class: .bg-gray-flat-3 & .context--foreground-light

Gray 4

Class: .bg-gray-flat-4 & .context--foreground-light

Patterns

Waves

Class: .bg-pattern-waves

Diagonal

Class: .bg-pattern-diagonal

Prisms

Class: .bg-pattern-prisms

Molecules

Class: .bg-pattern-molecules

Circles

Class: .bg-pattern-circles

Topo

Class: .bg-pattern-topo

Images

Green

1

Class: .bg-green-1 & .context--foreground-light

2

Class: .bg-green-2 & .context--foreground-light

3

Class: .bg-green-3 & .context--foreground-light

4

Class: .bg-green-4 & .context--foreground-light

Green Leaves

1

Class: .bg-green-leaves-1 & .context--foreground-light

2

Class: .bg-green-leaves-2 & .context--foreground-light

3

Class: .bg-green-leaves-3 & .context--foreground-light

4

Class: .bg-green-leaves-4 & .context--foreground-light

5

Class: .bg-green-leaves-5 & .context--foreground-light

Green Trees

1

Class: .bg-green-trees-1 & .context--foreground-light

2

Class: .bg-green-trees-2 & .context--foreground-light

3

Class: .bg-green-trees-3 & .context--foreground-light

4

Class: .bg-green-trees-4 & .context--foreground-light

5

Class: .bg-green-trees-5 & .context--foreground-light

6

Class: .bg-green-trees-6 & .context--foreground-light

Green Grass

1

Class: .bg-green-grass-1 & .context--foreground-light

2

Class: .bg-green-grass-2 & .context--foreground-light

3

Class: .bg-green-grass-3 & .context--foreground-light

4

Class: .bg-green-grass-4 & .context--foreground-light

5

Class: .bg-green-grass-5 & .context--foreground-light

6

Class: .bg-green-grass-6 & .context--foreground-light

Yellow

1

Class: .bg-yellow-1

2

Class: .bg-yellow-2

3

Class: .bg-yellow-3

4

Class: .bg-yellow-4

5

Class: .bg-yellow-5

6

Class: .bg-yellow-6

Yellow Leaves

1

Class: .bg-yellow-leaves-1

2

Class: .bg-yellow-leaves-2

3

Class: .bg-yellow-leaves-3

4

Class: .bg-yellow-leaves-4

Gray

1

Class: .bg-gray-1 & .context--foreground-light

2

Class: .bg-gray-2 & .context--foreground-light