Background Colour utility classes

Background Colour utility classes to change any components background colour property.

Usage

Place the background colour utility class on an element that you want to change the background colour property for.

Adding -hover to any of the below modifiers will change the colour on the hover state only, for example slb-background-black-hover.

Each background colour has a breakpoint variation of small, medium, large, extra large, this is used to remove or change the background at different breakpoints, e.g. slb-background-blue slb-background-md-blue-alt will display background colour blue for screens up to the medium breakpoint and blue alt for screen sizes above the medium breakpoint.

Adding slb-background-inherit will inherit the value from its parent element. This is useful when nesting icons, text, buttons, etc.

Modifier selectors