Resources
Modifiers
Modifier is a global or combo-classes which brings you an additional layer of customization for your components and designs. Below you'll find available list of all available modifiers.
Modifiers List
Containers
Modifier
Full Screen
BG Image
Fill 25%
Fill 50%
Fill 75%
Fill 100%
Description
Sets container height to 100vh.
Adds Background-image to a selected container.
Sets container width to 25%.
Sets container width to 50%.
Sets container width to 75%.
Sets container width to 100%.
Alignment
Modifier
AHC
AVC
AVS
AVE
Space Between
Space Around
Description
Align horizontal center.
Align vertical center.
Align vertical start.
Align vertical end.
Distribute evenly from start to end.
Distribute evenly, with space around all children.
Elements display
Modifier
Display None
Display LG
Display MD
Display MDL
Display SM
Hide MD
Hide MDL
Hide SM
Description
Hide element from all resolutions.
Display element only at LG resolution.
Display element only at MD resolution.
Display element only at MDL resolution.
Display element only at SM resolution.
Hide element at MD resolution.
Hide element at MDL resolution.
Hide element at SM resolution.
Borders
Modifier
Border Around
Border Top
Border Bottom
Description
Adds 1px border around an element.
Adds 1px border at the top of an element.
Adds 1px border at the bottom of an element.
Plans
Modifier
Promo plan
Promo plan
Description
Helps to highlight preferred plan. Adds 2px outline around an element.
Helps to highlight preferred plan. Adds 2px outline around an element.
Images
Modifier
Image
Side Image
BG Image
Column Image
Description
Default image class. No spacings applied.
Adds 40px bottom margin on MВ and lower resolutions.
Adds Background-image to a selected container.
Adds 24px bottom margin