Labelled Icon

{{ design.patterns.renderPattern('labelled-icon', {}) | safe }}

Source (Nunjucks)

<p class="labelled-icon {{ data.utilities }}">
  {{ data.text }}
  {% include "icons/arrow-down.svg" %}
</p>

Information

This block is mainly structural because the visuals will be controlled by a wider page context. Therefore, colour is inherited by default.

It's recommended to use utilities for specific styling, just like this variant.

<p class="labelled-icon text-light text-step-2">…</p>

{{ design.patterns.renderPattern('labelled-icon/Styled with utilities', {}) | safe }}

Source (Nunjucks)

<p class="labelled-icon {{ data.utilities }}">
  {{ data.text }}
  {% include "icons/arrow-down.svg" %}
</p>