Gradients

Use to create areas of vibrant brand expression.

If you have a great image to work with, there is no need to add a gradient. However when brand is the key communication, a gradient-only design may be the most appropriate solution.

Css-generated graients can be two or three colours. Always use colours that are contiguous on the colour wheel. To add a gradients as a background colour, you can add the utility class, e.g.

 <div class="u-grad-red-orange">

Or you can add use the scss mixin, e.g.

@include sm-gradient($c-green $c-teal $c-blue);

2 colour:

red–orange

class: .u-grad-red-orange

orange–red

class: .u-grad-orange-red

orange–yellow

class: .u-grad-orange-yellow

yellow–orange

class: .u-grad-yellow-orange

yellow–green

class: .u-grad-yellow-green

green–yellow

class: .u-grad-green-yellow

green–teal

class: .u-grad-green-teal

teal–green

class: .u-grad-teal-green

teal–blue

class: .u-grad-teal-blue

blue–teal

class: .u-grad-blue-teal

blue–purple

class: .u-grad-blue-purple

purple–blue

class: .u-grad-purple-blue

purple–red

class: .u-grad-purple-red

red–purple

class: .u-grad-red-purple

3 colour:

red–orange–yellow

class: .u-grad-red-orange-yellow

yellow–orange–red

class: .u-grad-yellow-orange-red

orange–yellow–green

class: .u-grad-orange-yellow-green

green–yellow–orange

class: .u-grad-green-yellow-orange

yellow–green–teal

class: .u-grad-yellow-green-teal

teal–green–yellow

class: .u-grad-teal-green-yellow

green–teal–blue

class: .u-grad-green-teal-blue

blue–teal–green

class: .u-grad-blue-teal-green

teal–blue–purple

class: .u-grad-teal-blue-purple

purple–blue–teal

class: .u-grad-purple-blue-teal

blue–purple–red

class: .u-grad-blue-purple-red

red–purple–blue

class: .u-grad-red-purple-blue

purple–red–orange

class: .u-grad-purple-red-orange

orange–red–purple

class: .u-grad-orange-red-purple