Title
The Title system provides consistent text headings with different size variants. It helps maintain visual hierarchy and readability throughout the interface.
Base Structure
The Title system offers two primary variations: default and small. These base structures form the foundation for content headings.
Base
The title class without modifiers
and the title--base class both produce the same visual result,
creating a standard-sized heading. This is the most common usage for primary content headers.
Use title--base when you need to explicitly set the base size
in responsive contexts, such as title--small lg:title--base.
Title
Base
<span class="title">Base Title</span>
<!-- Or using the base modifier -->
<span class="title title--base">Base Title</span>
<!-- Responsive example -->
<span class="title title--small lg:title--base">Small by default, base on large screens</span>Small Title
Add title--small to create a more compact heading.
Useful for secondary headers or where space is limited.
Title
Small
<span class="title title--small">Small Title</span>