Helper CSS Classes

Apply a custom helper CSS class listed below in block editor, in page builder, or directly in HTML code.
Text & typography | Layout | Widgets | Decorations

Text & typography classes

h1, h2, h3, h4

Styles the text the way H1, H2, H3 and H4 headings are 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

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: 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.

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-decoration

Apply on image block to display a dotted overlay decoration the theme provides.