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 padding
from 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
, has-decoration-accent
Apply on Image, Media & Text or Gallery block to decorate images with tilted text colored background.
If has-decoration-accent
class is used instead, the decoration will be colored with accent color.
has-item-style
Apply on column block to decorate the column with a border and padding.