Code
<div class="grid grid--span-6 grid--as-top ta--left grid--padding-1" style="background-color: #1a6bb4;" data-aos-delay="50">
<div class="grid__content grid--hover"></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
{% if content.field_grid.0 is not empty %}grid--span-{{ content.field_grid.0 }}{% endif %}
{% if content.field_grid_start.0 is not empty %}grid--se-{{ content.field_grid_start.0 }}-{{ content.field_grid_end.0 }}{% endif %}
{% if content.field_grid_row.0 is not empty %}grid--row-span-{{ content.field_grid_row.0 }}{% endif %}
{% if content.field_grid_row_start.0 is not empty %}grid--row-se-{{ content.field_grid_row_start.0 }}-{{ content.field_grid_row_end.0 }}{% endif %}
{% if content.field_layer_order.0 is not empty %}grid--layer-{{ content.field_layer_order.0 }}{% endif %}
{% if content.field_vertical_alignment.0 is not empty %}grid--as-{{ content.field_vertical_alignment.0 }}{% endif %}
{% if content.field_text_alignment.0 is not empty %}ta--{{ content.field_text_alignment.0 }}{% endif %}
{% if content.field_padding.0 is not empty %}grid--{{ content.field_padding.0 }}{% endif %}
{% if content.field_background_image.0 is not empty %}bg--img{% endif %}
{% if paragraph.field_background_blur.value == 1 %}bg--blur{% endif %}
{% if paragraph.field_gradient_overlay.value == 1 %}bg--blend{% endif %}
{% if content.field_color_overlay.0 is not empty %}bg--blend{% endif %}
{% if paragraph.field_border.value == 1 %}grid--bd{% endif %}
{% if paragraph.field_rounded_corners.value == 1 %}grid--bdrs{% endif %}
"
style="
{% if content.field_background_image.0 is not empty %}background-image: url('{{ file_url(content.field_background_image["#items"].entity.uri.value) }}'){% if paragraph.field_gradient_overlay.value == 1 %}, var(--gradient-background){% endif %};{% endif %}
{% if content.field_background_color.0 is not empty %}background-color: {{ content.field_background_color.0 }};{% endif %}
{% if content.field_color_overlay.0 is not empty %}background-color: {{ content.field_color_overlay.0 }};{% endif %}
{% if content.field_text_color.0 is not empty %}color: {{ content.field_text_color.0 }};{% endif %}
"
{% if content.field_animation_type.0 is not empty %}data-aos="{{ content.field_animation_type.0 }}"{% endif %}
{% if content.field_animation_duration.0 is not empty %}data-aos-duration="{{ content.field_animation_duration.0 }}"{% endif %}
{% if content.field_animation_delay.0 is not empty %}data-aos-delay="{{ content.field_animation_delay.0 }}"{% endif %}
>
{% include '@fitch_master/parts/video_background.html.twig' %}
<div class="
grid__content
{% if paragraph.field_hover_effect.value == 1 %}grid--hover{% endif %}
"
>
{{ content.field_paragraph_reference }}
</div>
{% if content.field_link.0['#url'] is not empty %}
<a
class="fill--link"
href="{{ content.field_link.0['#url'] }}"
{% if content.field_link.0['#title'] is not empty %}
title="{{ content.field_link.0['#title'] }}" {% endif %}
></a>
{% endif %}
</div>
{% endblock paragraph %}
Fields
| Label | Machine name | Field type | Values | Character Limit | Required |
|---|---|---|---|---|---|
| Animation Delay | field_animation_delay | Text (plain) | N/A | No | |
| Animation Duration | field_animation_duration | Text (plain) | N/A | No | |
| Animation Type | field_animation_type | List (integer) | 0|fade 1|fade-up 2|fade-down 3|fade-left 4|fade-right 5|fade-up-right 6|fade-up-left 7|fade-down-right 8|fade-down-left 9|flip-up 10|flip-down 11|flip-left 12|flip-right 13|slide-up 14|slide-down 15|slide-left 16|slide-right 17|zoom-in 18|zoom-in-up 19|zoom-in-down 20|zoom-in-left 21|zoom-in-right 22|zoom-out 23|zoom-out-up 24|zoom-out-down 25|zoom-out-left 26|zoom-out-right |
N/A | No |
| Background Blur | field_background_blur | Boolean | N/A | No | |
| Background Color | field_background_color | Color | N/A | No | |
| Background Image | field_background_image | Image | N/A | No | |
| Background Video | field_background_video | Entity reference | N/A | No | |
| Border | field_border | Boolean | N/A | No | |
| Color Overlay | field_color_overlay | Color | N/A | No | |
| Column | field_grid | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 11|12 |
N/A | No |
| Column End | field_grid_end | List (integer) | 0|3 1|4 2|5 3|6 4|7 5|8 6|9 7|10 8|11 9|12 10|13 |
N/A | No |
| Column Start | field_grid_start | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 |
N/A | No |
| Gradient Overlay | field_gradient_overlay | Boolean | N/A | No | |
| Hover Effect | field_hover_effect | Boolean | N/A | No | |
| Layer Order | field_layer_order | List (integer) | 0|0 1|1 2|2 3|3 4|4 5|5 6|6 7|7 8|8 9|9 10|10 11|11 12|12 |
N/A | No |
| Link | field_link | Link | N/A | No | |
| Padding | field_padding | List (integer) | 0|padding-1 1|padding-2 2|padding-3 |
N/A | No |
| Rounded Corners | field_rounded_corners | Boolean | N/A | No | |
| Row | field_grid_row | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 11|12 |
N/A | No |
| Row End | field_grid_row_end | List (integer) | 0|3 1|4 2|5 3|6 4|7 5|8 6|9 7|10 8|11 9|12 10|13 |
N/A | No |
| Row Start | field_grid_row_start | List (integer) | 0|1 1|2 2|3 3|4 4|5 5|6 6|7 7|8 8|9 9|10 10|11 |
N/A | No |
| Shadow | field_shadow | Boolean | N/A | No | |
| Text Alignment | field_text_alignment | List (integer) | 0|left 1|middle 2|right |
N/A | No |
| Text Color | field_text_color | Color | N/A | No | |
| This Column | field_paragraph_reference | Entity reference revisions | N/A | Yes | |
| Vertical Alignment | field_vertical_alignment | List (integer) | 0|top 1|middle 2|bottom |
N/A | No |
Use Case
Component Options
Background Image
This is an optional visual treatment but is the most commonly used for components.
Background Video
This can be used to add a background video that automatically play and loops.
The video is hosting locally and should be no longer than 10 seconds and no larger than 8MB.
Background Color
Background Color offers a selection of brand colours allowing a solid background colour for the component.
| #171721 | #3f3f5b | #ff2f63 | #ffd500 | #2d374e | #174174 | #2a8abf | #33ccff | #dbddf3 | #333333 | #1a6bb4 | #dde3f2 | #3b265e |
| #6c5c86 | #9d92ae | #5e6a71 | #868f94 | #aeb4b8 | #007a87 | #409ba5 | #80bcc3 | #005cb9 | #4085ca | #80addc | #bfd6ed | #f5f5f5 |
| #00b29b | #72cb5c | #6dc3ea | #ebce56 |
Background Blur
Background Blur can be used to blur the background image and background video.
Gradient Overlay
This applies a Gradient Overlay to the background image that is predefined as part of the theme css vars.
| Fitch Guidelines - linear-gradient(108deg, #683f3f 0%, #d0e7f0 100%) |
| Fitch Group - linear-gradient(108deg, #0F2027 0%, #203A43 33%, #2C5364 100%) |
| Fitch Ratings - linear-gradient(108deg, #3e5151 0%,#decba4 100%) |
| Fitch Solutions - linear-gradient(108deg, #afc0e7 0%, #dbddf3 100%) |
| Fitch Learning - linear-gradient(108deg, #7b797d 0%, #7e8687 100%) |
| Fitch Bohua - linear-gradient(135deg, #403b4a 0%, #e7e9bb 100%) |
| Sustainble Fitch - linear-gradient(108deg, #B0DAB9 0%, #DAD299 100%) |
| Fitch Credit Certificate - linear-gradient(108deg, #7b797d 0%, #c0ccf0 100%) |
| Quant Insights - linear-gradient(108deg, #888888 0%, #888888 100%) |
Color Overlay
This is used to apply a color overlay to the background image or background video.
The Grey is our default color overlay and is used with the opacity set at 1
The EVP colours should have an opacity between 0.6 and 0.4 depending on the image and colour used.
Opacity ranges from 1 - 0. A 50% opacity would be 0.5.
| #888888 | #9db6df | #fda926 | #0bb29d | #ae3f86 | #6dc3ea | #00b29b | #72cb5c | #6dc3ea | #ebce56 |
Padding
Preset padding options:
padding-1 = padding: 36px 24px 36px 24px;; - top, right, bottom, left
padding-2 = padding: 54px 48px 54px 48px; - top, right, bottom, left
padding-3 = padding: 0 24px 0 24px - top, right, bottom, left
Text Color
This can be set to Black or White (theme dependant) so the text colour is fixed for that component.
This is useful when placing text on a background image that needs to remain one or the other, even when Dark mode is enabled.
| #000000 | #FFFFFF |
Border
This adds a 1px border to the component and is pre-styled ready for dark mode.
Rounded Corners
Used to add rounded corners to a component.
This can be used with option styling options.
Shadow
Adds a predefined shadow to a component.
Hover Effect
When ticked this makes the component scale up when hovered over to give it more focus.
Vertical Alignment
Pick from top, middle or bottom alignment.
Text Alignment
Pick from left, centre or right aligned text.
Column
The default setup is a single column layout, that uses all 12 inner columns.
To make a two column layout add two Columns and set the Column count to 6 (50/50 layout).
You can use either Simple Layout or Advanced Layout. If you use both then Advanced Layout values will be used.
Rows
Set the total number of rows to be used for this section.<br />The default is 1 and the max is 12.
Column Start
This is where the column will start from.
Column End
The Column End option is where the grid should stop.
e.g. If you want a 6 column layout you will set Column Start to 1 and Column End to 7
This is because the column stops where 7 starts, not where 6 ends.
The end column needs to be at least 2 greater than the start e.g. start = 3, end = 5.
