background

Colors

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack's modular elements
at the Element Index Page ?

Theme Colors

Stack supports 3 theme colours in each preset scheme. Colors are referred to as 'primary', 'primary-1' and 'primary-2'. These colors can be used with the prefix bg-- followed by the name of the color to change the background color of an element.

<div class="bg--primary"><span>Primary</span></div>
<div class="bg--primary-1"><span>Primary 1</span></div>
<div class="bg--primary-2"><span>Primary 2</span></div>
<div class="bg--dark"><span>Dark</span></div>
<div class="bg--secondary"><span>Secondary</span></div>
					
Primary
Primary 1
Primary 2
Dark
Secondary

Typography Classes

Using the prefix color-- along with the name of the color (as described above) you can easily change the color of typography elements such as headings or paragrphs.

<span class="color--primary"></span>
					
I'm a primary colored heading I'm a primary-1 colored heading I'm a primary-2 colored heading

Button Classes

Using the prefix btn-- along with the name of the color (as described above) you can easily change the color of button elements.

Note: for more on buttons visit the buttons element page here.

<a class="btn btn--primary type--uppercase" href="#">
	<span class="btn__text">
		Primary Colored Button
	</span>
</a>