Alt text here.

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.
Written by: Posted on: Last updated on:

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

Text & typography | Layout | 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.

Watch now →

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, inherit

has-VALUE-font-size

Sets element’s font size.
Possible VALUE: xs, s, m, l, xl, xxl, xxxl

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, xs, s, m

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

add-space-top

Use on first element in page content to make space for site header. (In most cases this is not required when using WordPress block editor as the theme automatically applies the appropriate spacing. May be useful when using page builders, for example.)

has-phi-padding

Sets element’s padding to 1.618em.

has-VALUE-padding

Sets element’s padding size.
Possible VALUE: xs, s, m, l, xl

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.

Color classes

has-VALUE-color
has-VALUE-background-color
has-VALUE-border-color
has-initial-border-color

Applies colors on an element.
Possible VALUE: primary, secondary, tertiary, black, white, gray, gray-100, gray-900

has-inherit-link-color

Forces links to inherit text color from parent element.