Text & typography classes
h1, h2, h3, h4
Styles the text the way H1, H2, H3 and H4 headings are styled.
has-widget-title-style
Styles the heading the way widget title is styled.
has-left/center/right-text-align
Apply on any element. Forces text alignment.
has-uppercase-text-transform
Transforms elements text to uppercase letters.
has-SIZE-font-size
Sets element’s font size.
Possible SIZE values: extra-small, small, smaller, regular, large, extra-large, huge
has-100/200.../900-font-weight
Applies specific font weight on an element.
has-italic/normal-font-style
Applies specific font style on an element.
has-SIZE-line-height
Sets element’s line height.
Possible SIZE values: 1, extra-small, small, regular
Layout classes
has-half/phi/full-screen-min-height
Sets the minimum height of the element as a portion of browser window height (50%, 61.8%, 100%). Best applied on full width Cover block, for example.
has-wide-content-width
Apply on Cover or Group block to make the block content wider.
has-phi/no-padding
Sets element’s padding (1.618em, 0). Can be applied on Column block to force a specific column padding.
has-SIZE-padding
Sets element’s padding size.
Possible SIZE values: extra-small, small, regular, large, extra-large
has-no-padding, has-no-padding-left/right/top/bottom/vertical/horizontal
Removes any paddingfrom an element.
has-regular-margin-bottom
Applies theme’s default bottom margin on the element.
has-no-margin, has-no-margin-left/right/top/bottom/vertical/horizontal
Removes any margin from an element.
force-overlaid-header,
force-overlaid-header-light,
force-overlaid-header-dark
When using “No intro” page template, the overlaid header set in theme options is not applied. However, you can force the overlaid header even in this case using one of these classes on your HTML BODY element (you can use Custom Body Class plugin for that).
The force-overlaid-header class will apply default theme overlaid style. The force-overlaid-header-light/dark class will apply transparent header with light or dark text color. (See example →)
hide-when-header-not-overlaid,
show-when-header-is-overlaid
When forcing overlaid header, you can use this class (choose the one that fits your naming preference) on a block that you wish to hide when header is no longer being overlaid on smaller screens.
Probably most useful to apply on a Spacer block in custom created page intro section.
Widget classes
has-2/3/4/5/6-flex-grow
As the theme uses CSS flexbox layout in its horizontal widgetized areas you can control the width of widgets displayed there with these classes.
For setting up a widget CSS class we recommend using Widget CSS Classes plugin (the theme integrates the classes to the plugin’s interface automatically for your convenience and ease of use).
Decorative classes
has-item-style
Apply on column block to decorate the column with a shaded background and padding.