Elements – Colors

[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]

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 →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section css=”.vc_custom_1498220798445{padding-top: 0px !important;}” ebor_docs=””][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][stack_boxed_content background=”bg–primary”][vc_column_text]Primary[/vc_column_text][/stack_boxed_content][stack_boxed_content background=”bg–primary-1″][vc_column_text]Primary 1[/vc_column_text][/stack_boxed_content][stack_boxed_content background=”bg–primary-2″][vc_column_text]Primary 2[/vc_column_text][/stack_boxed_content][stack_boxed_content background=”bg–dark”][vc_column_text]Dark[/vc_column_text][/stack_boxed_content][stack_boxed_content background=”bg–secondary”][vc_column_text]Secondary[/vc_column_text][/stack_boxed_content][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][vc_column_text]

I’m a primary colored heading

I’m a primary 1 colored heading

I’m a primary 2 colored heading

[/vc_column_text][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][vc_column_text]Primary Colored Button[/vc_column_text][/vc_column][/vc_row][/vc_section]