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 →
PromoSimple is a simple online giveaway maker. Connect it to your Social Accounts and Email Tools. Kick back and watch your lists grow. Click here to get started.
[stack_hero image=”38″]
[/stack_hero]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
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.
[stack_boxed_content padding=”boxed–lg” background=”imagebg” image=”227″]
[/stack_boxed_content]
Modern Aesthetic
Build a beautifully performant site with Stack’s vast collection of modular elements.
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
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.
[stack_boxed_content padding=”boxed–lg” background=”imagebg” image=”228″ scrim_top=”8″]
[/stack_boxed_content][stack_boxed_content padding=”boxed–lg” background=”imagebg” image=”228″ scrim_bottom=”9″]
[/stack_boxed_content]
Modern Aesthetic
Build a beautifully performant site with Stack’s vast collection of modular elements.
Modern Aesthetic
Build a beautifully performant site with Stack’s vast collection of modular elements.