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 →

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.

Modern Aesthetic

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

Build Now

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.

Modern Aesthetic

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

Build Now

Modern Aesthetic

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

Build Now

Si continuas utilizando este sitio aceptas el uso de cookies. Más información

Los ajustes de cookies de esta web están configurados para «permitir cookies» y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar» estarás dando tu consentimiento a esto.

Cerrar