Carousel Slide

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px

Code

HTML Twig

<div class="carousel__slide section--half section--padding-1 slick-slide" style="background-color: rgb(255, 213, 0); width: 1299px;" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide01" aria-describedby="slick-slide-control01">
         <div class="wrapper--1">
         </div>
</div>

{%
    set classes = [
      'paragraph',
      'paragraph--type--' ~ paragraph.bundle|clean_class,
      view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    ]
  %}
{% block paragraph %}
  <div
    class="
      carousel__slide
      {% if content.field_section_size.0 is not empty %}section--{{ content.field_section_size.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 %}
    "
    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_title.0 is not empty %}data-title="{{ content.field_title.0 }}"{% endif %}      
  >
  {% if content.field_font_awesome_icon.0 is not empty %}<div class="carousel__pager-icon">{{ content.field_font_awesome_icon.0 }}</div>{% endif %}
    <div class="{{ content.field_wrapper.0 }}">
      {{ content.field_carousel_section }}
    </div>
  </div>

{% endblock paragraph %}

Design Files

Figma

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
Carousel Section	field_carousel_section	Entity reference revisions		N/A	Yes
Color Overlay	field_color_overlay	Color		N/A	No
Font Awesome Icon	field_font_awesome_icon	Font Awesome Icon		N/A	No
Gradient Overlay	field_gradient_overlay	Boolean		N/A	No
Icon	field_icon	Image		N/A	No
Padding	field_padding	List (integer)	0\|padding-1 1\|padding-2 2\|padding-3	N/A	No
Section Size	field_section_size	List (integer)	0\|full 1\|half	N/A	No
Text Color	field_text_color	Color		N/A	No
Title	field_title	Text (formatted)		TBC	No
Wrapper	field_wrapper	List (integer)	0\|wrapper--full 1\|wrapper--1 2\|wrapper--2 3\|wrapper--3	N/A	No

Use Case

A carousel slide has many styling options to help create rich and interesting carousels.

Each slide can be created with certain pre defined components, or the content author can create custom layouts using grid column or column components.

NOTE: The creation of carousels takes up a lot of paragraph references so we advise that once the carousel has been created it should be promoted to a library item.

Component Options

Component Options Section Wrapper Section Styling

Title

The title is used for the pager card title when the card option is selected.

Icon

This sets a custom icon via an image upload to be used by the pager card.

Font Awesome Icon

This allows the content author to pick and icon from the font awesome library.

Wrapper

wrapper--full = Full Width
wrapper--1 = Wide (1320px)
wrapper--2 = Medium (1020px)
wrapper--3 = Small (720px)

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.

Padding

Preset padding options:

padding-1 = padding: 108px 0 108px 0; - top, right, bottom, left
padding-2 = padding: 54px 48px 54px 48px; - top, right, bottom, left
padding-3 = padding: 36px 24px 36px 24px; - top, right, bottom, left

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

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

Component