Styling Native HTML Elements

Environment

Property	Value
Product	Progress® ThemeBuilder Pro

Description

How can I style native HTML elements like H1-H4 and others by using ThemeBuilder?

Solution

To style native HTML elements with ThemeBuilder:

1. Open ThemeBuilder and load the HTML template (for example, H1).
2. Apply the custom styles, such as typographies, to the native HTML elements. You can find the complete list of supported elements on the ThemeBuilder Overview page.

These steps let you automatically apply styles to the native HTML element without needing additional CSS selectors.

Example:

Assume you want to reuse a typography style called $my-header-1.

1. In ThemeBuilder, go to Advanced Edit.
2. Scroll down and load the H1 template.
3. Set the custom $my-header-1 typography variable for the "Text" property of the H1 element.

After following these steps, the generated theme will contain a CSS like the following:

h1 {
    font-family: Roboto;
    font-size: 28px;
    font-weight: 300;
    line-height: 37.2400016785px;
}

After importing the SCSS/CSS theme in your end project, the styles will be applied to all H1 elements without using specific Kendo selectors.

Example usage:

<h1>Header 1 Title - will use the ThemeBuilder-generated styles</h1>