Apply rules to elements
In the Component builder, after you have added basic colors, fonts, graphics, and breakpoints to your Styles library, and bundled them into style rules, you must define which style rules can be applied to specific elements. This lets you only have on-brand and curated style choices available in the Styles library that is incorporated in the Component builder.
You can also add custom CSS styles to elements. Adding custom CSS to an element will propagate that styling feature to the themes built using the customized element.
Elements are organized into text elements, block elements, and inline elements.
-
Text elements include different headings, paragraph text, and lists. All text elements can take on typographies and color settings.
-
Block elements include sections, cards, and containers. A block element occupies the entire horizontal space of its parent element (Section), and the vertical space is equal to the height of its contents. Block elements can take on fills, decorations, and spacing settings.
-
Inline elements include buttons, badges, and chips. Inline elements are non-text elements that only occupy the space defined by their content. Similar to block elements, inline elements can also take on fills, decorations, and spacing settings. Inline elements can also take on typography and link settings.
Limit style rules
Each element has its unique list of style rules that you can apply. Within each style rule, a selector lets you limit which rules can be applied to the element.
To select which style rules are available, click:
-
Allow all - to remove all limitations of style rules.
-
Only selected - to allow only selected elements.
-
None - to be able to use your custom CSS.
Add a text element style and tag
Text elements come with six default collections: heading 1, heading 2, heading 3, heading 4, heading 5, and paragraph.
Text elements created in each collection receive the corresponding element tag. For example, adding a text element in Heading 1 automatically gives the text element an H1 tag, and so on.
To add a text element style:
-
In the Styles builder, in the left pane, click Text elements.
-
Click Add style for the type of text element you want to add.
-
Enter a name for the text element. Optionally, enter a description.
-
On the Typography and Color and link style tabs, select the styles you want to have available for this text element.
-
Click Save.
Add an inline element style
Inline elements include button, badges and links.
To add a style to an inline element:
-
In the Styles builder, in the left pane, click Inline elements.
-
Scroll to the element type you want to add a style to.
-
Click Add style.
-
Enter a name for your element style. Optionally, add a description.
-
On the Typography, Spacing, Decoration, Fill, and Text color tabs, select only the styles you want to have availale for this inline element.
-
Click Save.
Add a block element style
Block elements include sections, cards, and containers. Containers are unstyled and hold content.
Sections are considered the most top-level block. Often a section can be a full-width panel within a website or the first container within a column.
Cards are nestable boxes used within sections to provide visual framing for content.
To add a style to a section or card:
-
In the Styles builder, in the left pane, click Block elements.
-
Scroll to the element type you want to add a style to.
-
Click Add style.
-
Enter a name for your block element. Optionally, add a description.
-
On the Fill, Decoration, and Spacing tabs, select only the styles you want to have available for this block element.
-
Click Save.
Create custom inline and block elements
By default, inline elements come with default Buttons, Badges, and Links collections. Block elements come with default Sections and Cards collections. For both inline and block elements, it is possible to create your own custom block element.
To create your own custom block type:
-
In the top-right corner of the Styles builder, click Add custom type.
-
Enter a name for your custom block element. Optionally, add a description.
-
Save the custom element type.
You can then add styles to the custom inline or block element.