Code
<div class="icon-teaser">
<div class="icon">
<img src="/sites/default/files/styles/icon_84x84_/public/icons/research_1.png?itok=ACFslyUb" width="84" height="84" alt="" loading="lazy" typeof="foaf:Image">
</div>
<h4 class="heading--5">Title</h4>
<p>
Text
</p>
</div>
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<div class="icon-teaser">
<div class="icon">
{% if content.field_link.0['#url'] is not empty %}
<a href="{{ content.field_link.0['#url'] }}" {% if content.field_link.0['#title'] is not empty %} title="{{ content.field_link.0['#title'] }}" {% endif %}>
{% endif %}
{{ content.field_icon }}
{% if content.field_link.0['#url'] is not empty %}
</a>
{% endif %}
</div>
<h4 class="heading--5">
{% if content.field_link.0['#url'] is not empty %}
<a href="{{ content.field_link.0['#url'] }}" {% if content.field_link.0['#title'] is not empty %} title="{{ content.field_link.0['#title'] }}" {% endif %}>
{% endif %}
{{ content.field_title }}
{% if content.field_link.0['#url'] is not empty %}
</a>
{% endif %}
</h4>
{% include '@fitch_master/paragraph/paragraph--text.html.twig' %}
</div>
{% endblock paragraph %}
.icon {
margin-bottom: var(--spacing-1);
&-teaser p {
margin-bottom: 0;
}
}
Fields
| Label | Machine name | Field type | Character Limit | Required |
|---|---|---|---|---|
| Icon | field_icon | Image | N/A | Yes |
| Link | field_link | Link | N/A | No |
| Text | field_text | Text (formatted, long) | TBC | No |
| Title | field_title | Text (formatted) | TBC | No |
Use Case
Icon teasers are used as high level calls outs to help inform a user about key features of a product or service.
The icon image is set at 84px square.
This component will be placed into a column or grid column depending on how many icon teasers are being shown.
The character limit of the text is about 370.
Component Options
There are no options for this component.
