Title
Text
Code
<section class="section section--spacing-above section--spacing-below">
<div class="section--padding-1 section--full bg--img bg--blend" style="background-image: url('/sites/default/files/page-header/5199033681_d9c80c504f_k.jpg'); background-color: rgba(136,136,136,0.66); color: #ffffff;">
<div class="wrapper--1">
<div class="heading--number">
00
</div>
<div class="heading--sub">Sub Title</div>
<h3 class="heading--1">
Title
</h3>
<p>Text</p>
</div>
</div>
</section>
{% if paragraph.field_background_parallax.value == 1 %}{{ attach_library('fitch_master/parallax') }}{% endif %}
{%
set classes = [
'paragraph',
'paragraph--type--' ~ paragraph.bundle|clean_class,
view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}
{% block paragraph %}
<section
{% if content.field_section_name.0 is not empty %}id="{{ content.field_section_name.0 }}"{% endif %}
class="
section
{% if content.field_section_name.0 is not empty %}section--scroll{% endif %}
{% if content.field_section_spacing.0 is not empty %}section--{{ content.field_section_spacing.0 }}{% endif %}
{% if content.field_section_spacing.1 is not empty %}section--{{ content.field_section_spacing.1 }}{% endif %}
"
>
<div
class="
section--padding-1
{% if content.field_section_size.0 is not empty %}section--{{ content.field_section_size.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_background_fixed.value == 1 %}bg--fixed{% endif %}
{% if paragraph.field_background_parallax.value == 1 %}bg--parallax{% 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 %}
"
>
{% include '@fitch_master/parts/video_background.html.twig' %}
<div class="wrapper--1">
{% 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' %}
{% include '@fitch_master/paragraph/paragraph--block-reference.html.twig' %}
</div>
</div>
</section>
{% include '@fitch_master/parts/has_header.html.twig' %}
{% 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 Fixed | field_background_fixed | Boolean | N/A | No | |
| Background Image | field_background_image | Image | N/A | No | |
| Background Parallax | field_background_parallax | Boolean | N/A | No | |
| Background Video | field_background_video | Entity reference | N/A | No | |
| Block Reference | field_block_reference | Entity reference | N/A | No | |
| Color Overlay | field_color_overlay | Color | N/A | No | |
| 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 |
| Gradient Overlay | field_gradient_overlay | Boolean | 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 |
| Invert Header | field_invert_header | Boolean | N/A | No | |
| Number | field_number | Text (plain) | TBC | No | |
| Page Banner | field_page_banner | Boolean | N/A | No | |
| Section Name | field_section_name | Text (plain) | N/A | No | |
| Section Size | field_section_size | List (integer) | 0|full 1|half |
N/A | No |
| Section Spacing | field_section_spacing | List (integer) | 0|spacing-above 1|spacing-below 2|spacing-above-double 3|spacing-below-double |
N/A | No |
| Sub Title | field_sub_title | Text (plain) | TBC | No | |
| Text | field_text | Text (formatted, long) | TBC | 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 | |
| Title | field_title | Text (formatted) | TBC | No | |
| Vertical Alignment | field_vertical_alignment | List (integer) | 0|top 1|middle 2|bottom |
N/A | No |
Use Case
This is a promotion component that should keep the text within three to four columns of the grid wrapper.
The main focus is the background image or video as this will grab the users focus before hopefully converting them.
The text can be placed in 9 different preset places using the alignment options.
Component Options
Page Banner
This can be checked if it's the first component on the page and you need the logo to be white and sit on top to match how a Page Header (Banner) works.
If this is checked make sure the spacing above is turned off.
Invert Header
This field works in partnership with Page Banner. It should be checked if the header (logo, nav etc) should be white.
Spacing Above / Below
Spacing above adds 42px of padding above this section.
Spacing below adds 42px of padding below this section.
Double spacing above adds 84px of padding above this section.
Double spacing below adds 84px of padding below this section.
The values shown here are the default for FG, FR, FS and FB.
By default these are turned on but should be turned off for the following reasons:
- Two images are touching
- A coloured section is next to an image
- A coloured section is next to another coloured section
- It's the first or last section on the page
Section Size
This allows the component to have two fixed heights options that adjust for smaller screens.
Full = It will use the full height of the viewport with a maximum height of 840px.
Half = Half the height of the viewport with a minimum height set for smaller screens.
Section Name
This is used for anchor links directly to the section. The name needs to be lowercase with no punctuation and spaces replaced with - e.g. featured-blog-posts
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 Fixed
This is used to keep the background image static whilst scrolling on the page.
Background Parallax
This is used to add a parallax effect to the background image.
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 |
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 |
Vertical Alignment
Pick from top, middle or bottom alignment.
Text Alignment
Pick from left, centre or right aligned text.
