Helper CSS classes

This theme predefines some useful modifier CSS classes for you. You can use them in block editor, in page builder, or however you find useful. These classes modify appearance of your website elements and blocks.

Apply a custom helper CSS class listed below in block editor, in page builder, or directly in HTML code.

Text & typography | Layout | Decorations | Color

Video Tutorial

Instructions on how to apply helper CSS classes in block editor are conveniently available also as a short, but to the point, video tutorial.

Text & typography classes

h1, h2, h3, h4

Styles the text the way H1, H2, H3 and H4 headings are styled.

has-VALUE-text-align

Apply on any element. Forces text alignment responsively – the right aligned text is aligned to left on mobile devices (vice versa for RTL languages).
Possible VALUE: left, center, right

has-uppercase-text-transform

Transforms elements text to uppercase letters.

has-VALUE-font-family

Sets element’s font family to what you’ve set in theme options in customizer. Or inherits the font family from parent element.
Possible VALUE: global, headings, site-title, inherited

has-VALUE-font-size

Sets element’s font size.
Possible VALUE: extra-small, small, regular, large, extra-large, huge, gigantic

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-VALUE-line-height

Sets element’s line height.
Possible VALUE: 1, extra-small, small, regular

has-VALUE-text-shadow

Sets element’s text shadow.
Possible VALUE: dark, light

Layout classes

megamenu

Use on primary navigation top level menu item (how to?) to style the submenu as megamenu.

has-VALUEvh-min-height
has-VALUEvmin-min-height
has-VALUEvmax-min-height

Sets the minimum height of an element in viewport relative units.
Possible VALUE: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100

has-wide-content-width

Apply on Cover or Group block to make the block content wider.

has-narrow-max-width

Apply on element within a container to narrow the element’s max width.

has-phi-padding

Sets element’s padding to 1.618em.

has-VALUE-padding

Sets element’s padding size.
Possible VALUE: extra-small, small, regular, large, extra-large

has-no-padding
has-no-padding-DIRECTION

Removes any padding from an element.
Possible DIRECTION: left, right, top, bottom, horizontal, vertical

has-regular-margin-bottom

Applies theme’s default bottom margin on an element.

has-no-margin
has-no-margin-DIRECTION

Removes any margin from an element.
Possible DIRECTION: left, right, top, bottom, horizontal, vertical

has-VALUE-z-index

Sets z-index CSS value for an element. (Note that it does not set element’s CSS position, which should be non-static for z-index to work.)
Possible VALUE: from 1 to 10

is-sticky-within-container

Use on a block that should stick while scrolling within its container. Best used on a Group block within a column block while other column(s) in the row contain high/long content. The Group block will stay stuck to the top of the screen while scrolling through the long content in other column(s).
Works on large screens only.

Decorative classes

has-VALUE-shadow

Applies shadow on an element.
Possible VALUE: inner, drop

Color classes

has-VALUE-background-color
has-VALUE-text-color
has-VALUE-border-color

Applies colors on an element.
Possible VALUE: accent, palette-1, palette-2, palette-3

has-inherit-link-color

Forces links to inherit text color from parent element.