Type with Icon

Icon can be appended before and/or after a paragraph of text. The Icon element is recommended for appending icons. However, an <img> element is also acceptable.

Important Notes:

Icon added via icon_before or icon_after are rendered to flow with text, so its size will grow or shrink with text size. The size prop for the Icon element is not supported in this scenario.

Instead of adding icons before and after the entire paragraph of text, it can also be done to inline text. To create inline text within a paragraph, set tag to span.

When writing plain HTML, all white space must be eliminated to have the text and icon align correctly. The markup must be written all in one line and spaces between HTML elements must be removed.

When writing plain HTML, <span class="e-bolt-type__icon-before"> and <span class="e-bolt-type__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own.

Demo

Block Text

Eyebrow with an icon before

Headline with an icon after

Subheadline with an icon before and after

Inline Text

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.

Twig

{% 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 %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has ' ~ inline_text|spaceless ~ '. This inline text is a type element with its tag set to <code>span</code>.',
} only %}

HTML

<!-- Block Text -->
<h1 class="e-bolt-type e-bolt-type--headline e-bolt-type--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>