Eyebrow
Body text (basic type element).
This is size auto headline
This is size tiny headline
This is size xsmall headline
This is size small headline
This is size regular headline
This is size medium headline
This is size large headline
This is size xlarge headline
This is size xxlarge headline
This is size xxxlarge headline
This is size display headline
This is size largedisplay headline
This is size xlargedisplay headline
This is size auto subheadline
This is size tiny subheadline
This is size xsmall subheadline
This is size small subheadline
This is size regular subheadline
This is size medium subheadline
This is size large subheadline
This is size xlarge subheadline
This is size xxlarge subheadline
This is size xxxlarge subheadline
This is size display subheadline
This is size largedisplay subheadline
This is size xlargedisplay subheadline
This is an eyebrow
This is size auto body text
This is size tiny body text
This is size xsmall body text
This is size small body text
This is size regular body text
This is size medium body text
This is size large body text
This is size xlarge body text
This is size xxlarge body text
This is size xxxlarge body text
This is size display body text
This is size largedisplay body text
This is size xlargedisplay body text
{# Teaser Text Group #}
{% include '@bolt-elements-type/type.twig' with {
content: 'Eyebrow',
hierarchy: 'eyebrow',
attributes: {
'aria-label': 'Eyebrow',
},
} only %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Headline (size xxxlarge and h1)',
hierarchy: 'headline',
tag: 'h1',
size: 'xxxlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Subheadline (size xlarge and h2)',
hierarchy: 'subheadline',
tag: 'h2',
size: 'xlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Paragraph (basic type element).',
} only %}
{# Mixed-weight Headlines #}
{% include '@bolt-elements-type/type.twig' with {
content: 'This entire sentence is a subheadline <strong>but part of it is bold</strong>',
hierarchy: 'subheadline',
tag: 'h1',
size: 'xxxlarge',
} only %}
<!-- Teaser Text Group -->
<p class="e-bolt-type e-bolt-type--eyebrow" aria-label="Eyebrow">
Eyebrow
</p>
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge">
Headline (size xxxlarge and h1)
</h1>
<h2 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--xlarge">
Subheadline (size xlarge and h2)
</h2>
<p class="e-bolt-type">
Paragraph (basic type element).
</p>
<!-- Mixed-weight Headlines -->
<h1 class="e-bolt-type e-bolt-type--subheadline e-bolt-type--size-xxxlarge">
This entire sentence is a subheadline <strong>but part of it is bold</strong>
</h1>