Elements – Scrims & Overlays

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

Scrims & Overlays

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_1498220957857{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]

Overlays

Overlays are useful for ensuring that text overlaying an image will remain readable.

Elements using an image background can be overlayed with a tint by adding the data attribute data-overlay=»#». The strength of the tint can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light tint, 9 being a heavy tint.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»2/12″][/vc_column][vc_column width=»4/12″][stack_boxed_content padding=»boxed–lg» background=»imagebg» image=»227″][vc_column_text]

Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now[/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]

Scrims

Similar to overlays, scrims add a gradient tint to the bottom or top of an element to ensure that overlaying text remains readable — without tinting the entire image.

Elements using an image background can be scrimmed by adding the data attribute data-scrim-top=»#» or data-scrim-bottom=»#». The strength of the scrim can be controlled by assigning a number between 1 and 9 to the data attribute. 1 being a light ting, 9 being a heavy scrim.

[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»2/12″][/vc_column][vc_column width=»4/12″][stack_boxed_content padding=»boxed–lg» background=»imagebg» image=»228″ scrim_top=»8″][vc_column_text]

Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now[/vc_column_text][/stack_boxed_content][stack_boxed_content padding=»boxed–lg» background=»imagebg» image=»228″ scrim_bottom=»9″][vc_column_text]

Modern Aesthetic

Build a beautifully performant site with Stack’s vast collection of modular elements.

Build Now[/vc_column_text][/stack_boxed_content][/vc_column][/vc_row][/vc_section]