There are two types of modifiers in the template: module modifiers and global component modifiers. Module modifiers are specific to any component with a base class of 'module', while global modifiers can be applied to any HTML element.

Global Modifiers

Class name Description

Style Modifiers

These modifiers affect the aesthetic appearance of a component
dark Indicates that a module has a low-brightness background and sets all text elements to be white, and applies custom styling to buttons and links.
no-dark Forces a component to ignore styles applied via .dark
primary-color-bg Sets the background color of the component to the value of $color-accent-primary
secondary-color-bg Sets the background color of the component to the value of $color-accent-secondary
neutral-bg Sets the background color of the component to the value of $color-neutral
dark-bg Sets the background color of the component to #333
overlay For use with background images – adds a translucent overlay behind the component content. By default, the opacity and color matches $color-overlay, $overlay-opacity
primary-color-overlay Same as above, but uses $color-accent-primary to set the overlay color
secondary-color-overlay Same as above, but uses $color-accent-secondary to set the overlay color
no-overlay Forces a component to ignore styles applied by .overlay
background Applies basic background styles to cover the entirety of the element

Position Modifiers

These modifiers affect positioning and display values of the element
vertical-element Uses absolute positioning and CSS transforms to apply vertical centering to an element that's within a fixed-height container. Usually used alongside jQuery.matchHeight
center Applies text-align: center to an element

Module Modfiers

Class name Description
w-border Applies a 1px thick top border to the module
no-padding-bottom Removes the bottom padding from a module
no-padding-top Removes the top padding from a module
no-padding Removes all padding from a module
text-left Forces all text in the module to be left-aligned
padding-lg By default adds an extra 20px of padding to a module at larger sizes
padding-xl By default adds an extra 60px of padding to a module at larger sizes
12-col-layout Widens the columns in row-default from 8 to 12