<img>
element is also acceptable.
Eyebrow with an icon before
This is a paragraph of text. In the middle of it, it has inline text with icons. This inline text is a type element with its tag set to span
.
{% set icon_pega_thumbs_up %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-thumbs-up',
size: 'large',
} only %}
{% endset %}
{% set icon_pega_timer %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-timer',
} only %}
{% endset %}
{% set icon_arrow_left %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'arrow-left',
} only %}
{% endset %}
{# Block Text #}
{% include '@bolt-elements-type/type.twig' with {
content: 'Eyebrow with an icon before',
icon_before: icon_arrow_left,
hierarchy: 'eyebrow',
} only %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Headline with an icon after',
icon_after: icon_pega_thumbs_up,
hierarchy: 'headline',
tag: 'h1',
size: 'xxxlarge',
} only %}
{% include '@bolt-elements-type/type.twig' with {
content: 'Subheadline with an icon before and after',
icon_before: icon_pega_timer,
icon_after: icon_pega_thumbs_up,
hierarchy: 'subheadline',
tag: 'h2',
size: 'xlarge',
} only %}
{# Inline Text #}
{% set inline_text %}
{% include '@bolt-elements-type/type.twig' with {
content: 'inline text with icons',
icon_before: icon_pega_timer,
icon_after: icon_pega_thumbs_up,
tag: 'span',
} only %}
{% endset %}
{% set spaceless_inline_text %}{% apply spaceless %}{{ inline_text }}{% endapply %}{% endset %}
{% include '@bolt-elements-type/type.twig' with {
content: 'This is a paragraph of text. In the middle of it, it has ' ~ spaceless_inline_text ~ '. This inline text is a type element with its tag set to <code>span</code>.',
} only %}
<!-- Block Text -->
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--size-xxxlarge"><span class="e-bolt-type__icon-before"><!-- Icon or image markup --></span>Subheadline with an icon before and after<span class="e-bolt-type__icon-after"><!-- Icon or image markup --></span></h1>
<!-- Inline Text -->
<p class="e-bolt-type">This is a paragraph of text. In the middle of it, it has <span class="e-bolt-type"><span class="e-bolt-type__icon-before"><!-- Icon or image markup --></span>inline text with icons<span class="e-bolt-type__icon-after"><!-- Icon or image markup --></span></span>. This inline text is a type element with its tag set to <code>span</code>.</p>