Helper CSS Classes

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.