UI Text

UI Text is a set of text styles that should be used for text in templates, components and applications.

Heading styles

<h1 class="env-ui-text-heading">Heading</h1>
<h2 class="env-ui-text-sectionheading">Section heading</h2>
<h3 class="env-ui-text-subheading">Subheading</h3>

Text styles

<p class="env-ui-text-overline">Overline</p>
<p class="env-ui-text-body">
   Body <span class="doc-badge doc-badge--info">2026.01.1</span>
</p>
<p class="env-ui-text-caption">Caption</p>

Usage example

Section heading

Subheading

Body

Caption

Navigation text styles 2026.11.1

The following text styles are used for navigation components such as Breadcrumb, Navigation and Pagination:

• env-ui-text-nav-01
• env-ui-text-nav-02
• env-ui-text-nav-03
• env-ui-text-nav-04

The default styling for navigation text is the same as for basic text but may be easily customized for a theme.

Navigation text may be used standalone or in combination with navigation components Breadcrumb, Navigation and Pagination.

When using in combination with a navigation component, navigation text style class name must be applied to the component’s root element.

<nav aria-label="Breadcrumb">
   <ol class="env-breadcrumb env-ui-text-nav-01">
      ...
   </ol>
</nav>

Examples

Examples of usage of Navigation text styles in combination with navigation components are shown below.

Note: A custom example theme is used for the following examples to demonstrate how navigation text styles can be customized.