Code
Without wrapper or alignment set
<div class="column__two">
</div>
With wrapper and alignment set
<div class="wrapper--1">
<div class="column__two grid--as-middle">
</div>
</div>
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<div
class="
{% if content.field_wrapper.0 is not empty %}{{ content.field_wrapper.0 }}{% endif %}
{% if content.field_padding.0 is not empty %}section--{{ 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_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_wrapper.0 is not empty %}
<div class="{{ content.field_wrapper.0 }}">
{% endif %}
<div
class="
column__{{ content.field_columns.0 }}
{% if content.field_vertical_alignment.0 is not empty %}grid--as-{{ content.field_vertical_alignment.0 }}{% endif %}
{% if paragraph.field_section_overflow.value == 1 %}section__overflow{% endif %}
"
>
{{ content.field_paragraph_reference }}
</div>
{% if content.field_wrapper.0 is not empty %}
</div>
{% endif %}
</div>
{% endblock paragraph %}
Fields
| Label | Machine name | Field type | Values | Character Limit | Required |
|---|---|---|---|---|---|
| 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 | |
| Color Overlay | field_color_overlay | Color | N/A | No | |
| Columns | field_columns | List (integer) | 0|two 1|three 2|four 3|five 4|six |
N/A | Yes |
| Gradient Overlay | field_gradient_overlay | Boolean | N/A | No | |
| Padding | field_padding | List (integer) | 0|padding-1 1|padding-2 2|padding-3 |
N/A | No |
| Section Overflow | field_section_overflow | Boolean | 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 |
| Wrapper | field_wrapper | List (integer) | 0|wrapper--full 1|wrapper--1 2|wrapper--2 3|wrapper--3 |
N/A | No |
Use Case
The column wrapper is a layout component that forms the basis to many parts of the site.
The number of columns can be changed as needed without having to reorder the components as they will automatically drop to the next row or can be set to overflow off the page.
The wrapper is an optional field and it used when the section is full width with a background colour or image and the column wrapper needs to remain within a fixed width.
Component Options
Columns
This is used to set the number of columns ranging between 2-6.
This can be changed as needed after being set and automatically adjusts for mobile.
Section Overflow
This option is used to make the columns flow past the visible viewport and adds a scroll bar and controls (TBC). This option is useful when there is a lot of the same information that needs to be presented without taking up lots of page real estate.
Wrapper
wrapper--full = Full Width
wrapper--1 = Wide (1320px)
wrapper--2 = Medium (1020px)
wrapper--3 = Small (720px)
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
Vertical Alignment
Pick from top, middle or bottom alignment.
Text Alignment
Pick from left, centre or right aligned text.
