- UI Elements
- Colors
Clio's colors numerous variants for text and backgrounds. You can use gradiants too.
Main palette
.*-primary
.*-info
.*-success
.*-danger
.*-warning
.*-violet
Gray scale palette
.*-gray-clio-darker
.*-gray-clio-dark
.*-gray-clio
.*-gray-clio-light
.*-gray-clio-lighter
.*-white
Text colors
To change text colors simply add the .text- class followed by the color label. For example to color text in green apply the class .text-success.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Background colors
Like for the text colors, to use custom background colors simply add the .bg- class followed by the relative label. For example to color a background in green apply the class .bg-success.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Background gradients
It's possible to use gradients as background using the special class .gradient-*.
.gradient-green
.gradient-orange
.gradient-violet
.gradient-blue
.gradient-dark
.gradient-light
Background images
We also provide some basic images that can be placed as backgrounds simply using the class .background-*. Since they are backgrounds they will fit any size.
.background-san-francisco
.background-boat
.background-ny
.background-mountain
.background-surf
.background-tents
Mix gradients and images
It's possible to mix gradients with images to obtain some very cool effect.