Scrims & Overlays

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

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.