Title
The Title system provides consistent text headings with different size variants. It helps maintain visual hierarchy and readability throughout the interface.
#
Size Variations
The Title system offers five size variants: small, base (default), large, xlarge, and xxlarge.
Small Title
Base Title
Large Title
Extra Large Title
XXL Title
Title
Size Variations
<!-- Small: compact headings for secondary content -->
<span class="title title--small">Small Title</span>
<!-- Base: default size, most common usage -->
<span class="title">Base Title</span>
<span class="title title--base">Base Title</span>
<!-- Large: prominent headers -->
<span class="title title--large">Large Title</span>
<!-- Extra Large: hero sections -->
<span class="title title--xlarge">Extra Large Title</span>
<!-- Extra Extra Large: maximum impact -->
<span class="title title--xxlarge">XXL Title</span>
<!-- Responsive example -->
<span class="title title--small lg:title--base">Small by default, base on large screens</span>#
Responsive Titles
The Title system supports responsive variants using breakpoint prefixes.
#
Breakpoint Prefixes
Use breakpoint prefixes like sm:,
md:, lg:
to apply different sizes at different screen widths.
Responsive Title
Small by default, xlarge on lg screens
Title
Responsive
<!-- Small by default, xlarge on lg screens -->
<span class="title title--small lg:title--xlarge">
Responsive Title
</span>
<!-- Caption describing the responsive behavior (optional) -->
<span class="label">Base by default, xlarge on lg screens</span>#
Orientation and Size+Orientation
Title sizes can adapt to orientation with portrait: and can be combined
with size breakpoints (e.g., md:portrait:).
Orientation Variant
Large by default, small in portrait.
Title
Orientation
<!-- Large by default, small in portrait -->
<span class="title title--large portrait:title--small">Orientation Variant</span>
<!-- Caption describing the responsive behavior (optional) -->
<span class="label">Large by default, small in portrait.</span>