Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email
Already have an account? Login

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>
Primary Colored Button