Sub Title
Title
Highlight Text
Sub Title
Title
Highlight Text
Sub Title
Title
Sub Title
Title
2016 business community finance fitch learning knowledge learning skills training Ad Supported
ngame
Code
<div class="column__two">
<div class="column order">
<div class="va">
<div class="heading--sub">Sub Title</div>
<h3 class="heading--2"> Title </h3>
<p>Highlight Text</p>
</div>
</div>
<div class="column">
<div class="image-wrapper">
<picture>
<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_768x432_/public/page-header/5199033681_d9c80c504f_k.jpg?itok=OedJB9og" 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="column__two">
<div class="column {% if paragraph.field_media_position.value == 1 %}order{% endif %}">
<div>
<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>
<div class="column {% if paragraph.field_media_position.value == 0 %}order{% endif %}">
<div>
{% if content.field_image.0 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 %}
{{ content.field_infogram.0 }}
{% endif %}
</div>
</div>
</div>
{% endblock paragraph %}
Fields
| Label | Machine name | Field type | Values | Character Limit | Required |
|---|---|---|---|---|---|
| CTA | field_cta | Link | 30 | 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 | Text (formatted, long) | N/A | No | |
| Media Position | field_media_position | Boolean | N/A | Yes | |
| Number | field_number | Text (plain) | 30 | No | |
| Sub Title | field_sub_title | Text (plain) | 30 | No | |
| Text | field_text | Text (formatted, long) | 500 | No | |
| Title | field_title | Text (formatted) | TBC | No | |
| Video | field_video | Entity reference | N/A | No |
Use Case
A Highlight is used to promote any type of content and the sub title can be used to help identify the content type.
When used one above each other we tend to alternate the media position but this is optional as it depends on the type of content.
A working example of this component can be found here - What we offer
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.
