00
Video
Title
Text
Anonymous (not verified)
no
English
00
iframe
Title
TextCode
<div class="grid__wrapper">
<div class="grid grid--full grid--se-1-4 grid--as-middle">
<div class="">
<div class="heading--number"> 00 </div>
<div class="heading--sub">Sub Title</div>
<h3 class="heading--2">
<a class="" href="/"> Title </a>
</h3>
<p>Text</p>
<div class="button__wrapper">
<a class="
button button--4 " href="/" data-url=""> Link Text </a>
</div>
</div>
</div>
<div class="grid grid--full grid--se-5-13">
<div class="image-wrapper">
<picture>
<source srcset="/sites/default/files/styles/component_1024x576_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=_bTEPgcP 1x" media="all and (max-width: 1024px)" type="image/jpeg">
<source srcset="/sites/default/files/styles/component_768x432_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=OedJB9og 1x" media="all and (max-width: 768px)" type="image/jpeg">
<source srcset="/sites/default/files/styles/component_480x270_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=Tfbe2Liv 1x" media="all and (max-width: 480px)" type="image/jpeg">
<img src="/sites/default/files/styles/component_1024x576_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=_bTEPgcP" alt="" typeof="foaf:Image">
</picture>
</div>
</div>
</div>
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<div class="grid__wrapper">
<div class="grid grid--full {% if paragraph.field_media_position.value == 0 %}grid--se-10-13{% endif %} {% if paragraph.field_media_position.value == 1 %}grid--se-1-4{% endif %}">
<div class="va">
{% include '@fitch_master/paragraph/paragraph--number.html.twig' %}
{% include '@fitch_master/paragraph/paragraph--sub-title.html.twig' %}
{% include '@fitch_master/paragraph/paragraph--title.html.twig' %}
{% include '@fitch_master/paragraph/paragraph--text.html.twig' %}
{% include '@fitch_master/paragraph/paragraph--call-to-action.html.twig' %}
</div>
</div>
<div class="grid grid--full {% if paragraph.field_media_position.value == 0 %}grid--se-1-9{% endif %} {% if paragraph.field_media_position.value == 1 %}grid--se-5-13{% endif %}">
{% if content.field_image is not empty %}
<div class="image-wrapper">
{% 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_image }}
{% if content.field_link.0['#url'] is not empty %}
</a>
{% endif %}
</div>
{% endif %}
{% include '@fitch_master/paragraph/paragraph--video.html.twig' %}
{% if content.field_infogram.0 is not empty %}
<div class="iframe-wrapper--2">
{{ content.field_infogram.0 }}
</div>
{% endif %}
</div>
</div>
{% endblock paragraph %}
Fields
| Label | Machine name | Field type | Values | Character Limit | Required |
|---|---|---|---|---|---|
| CTA | field_cta | Link | N/A | No | |
| CTA Style | field_cta_style | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 |
N/A | No |
| Heading Level | field_heading_level | List (integer) | 0|2 1|3 2|4 3|5 4|6 |
N/A | No |
| Heading Style | field_heading_style | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 |
N/A | No |
| Image | field_image | Image | N/A | No | |
| Infogram | field_infogram | N/A | No | ||
| Media Position | field_media_position | Boolean | N/A | Yes | |
| Number | field_number | Text (plain) | TBC | No | |
| Sub Title | field_sub_title | Text (plain) | TBC | No | |
| Text | field_text | Text (formatted, long) | TBC | No | |
| Title | field_title | Text (formatted) | TBC | No | |
| Video | field_video | Entity reference | N/A | No |
Use Case
A showcase is mainly used for product offerings where the media needs to be bigger than a highlight with more whitespace.
Component Options
Media Position
Media Position is a boolean field that sets the media (image, video, infogram) to be shown on the left or right for two column layouts.
Heading Level
This sets the level between a h2 to a h6. To find out more on when to use the correct heading level please visit: https://www.w3schools.com/tags/tag_hn.asp
We don't allow H1s as this should be set either in the page header or the page template
Heading Style
This sets the style of the heading so a h2 can be made to look like a h5.
We do this to ensure the sites looks as good as possible whilst utilising the correct heading levels for SEO.
