Banner V2

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px
Background Iimage Background Video Logo Split

Climate Vulnerability Scores

A long-term outlook to 2050 that ranks the relative vulnerability of sectors’ and entities’ financial profiles to a realistic stress scenario for climate-related market developments.

View Announcement View Primer

Sign up for product updates and our monthly newsletter

Thank you for your request. One of our specialists will be in touch shortly.

Introducing ESG Ratings
from Sustainable Fitch

The first global ESG Ratings solution for all asset classes at an entity and instrument level built from the ground up to exclusively help the ESG focused financial community make smarter decisions.

Start Here View Announcement

Sign up for product updates and our monthly newsletter

Thank you for your request. One of our specialists will be in touch shortly.

ESG Ratings

Define the ESG quality of financial instruments and entities with purpose-built ESG Ratings. Whether you’re an issuer looking to highlight your sustainability achievements or an investor looking to differentiate your fixed income investment strategy, our ESG Ratings are the answer.

FOR ISSUERS

Define the ESG quality of financial instruments and entities with purpose-built ESG Ratings. Whether you’re an issuer looking to highlight your sustainability achievements or an investor looking to differentiate your fixed income investment strategy, our ESG Ratings are the answer.

FOR INVESTORS

Code

HTML CSS SCSS 
<section class="section section--scroll section--spacing-below" style="margin-bottom: 124px;" data-aos-delay="50">
  <div class="page-header page-header__grid">
    <div class="wrapper--1">
      <div class="page-header__grid-inner grid__wrapper grid--as-middle grid--offset-1 bg--img bg--blend bg--shadow grid--bdrs" style="background-image: url('https://images.ctfassets.net/03fbs7oah13w/3mB1tAOQ12K2sIVdJvAPoX/cfb197da274dc42670eb09a9cff09627/esg-bg-001.jpg?w=1632&amp;q=80'); background-color: rgba(90,107,113,0.6);">
        <div class="grid grid--se-2-7 grid--as-middle">
          <p class="heading--1">Climate Vulnerability Scores</p>
          <p>A long-term outlook to 2050 that ranks the relative vulnerability of sectors’ and entities’ financial profiles to a realistic stress scenario for climate-related market developments.</p>
          <div class="button__wrapper">
            <a class="button button--2" href="https://www.fitchratings.com/research/corporate-finance/fitch-ratings-publishes-climate-vulnerability-scores-for-corporate-sectors-25-04-2022" target="_blank">View Announcement</a>
            <a class="button button--2" href="https://www.sustainablefitch.com/insights/inevitable-policy-response-2021-25-04-2022" target="_self">View Primer</a>
          </div>
        </div>
        <div class="grid grid--se-9-12 grid--as-middle">
          <div class="bg--blend bg--blur bg--shadow grid--bdrs grid--padding-1" style="background: rgba(94,107,113,0.3)">
            <div class="grid__content">
              <div class="embedded-form">
                <div class="form-form">
                  <h3 class="heading--5" style="color: var(--inverted-text-color); font-weight: 300;">
                    <span>
                      <b>Sign up</b>
                    </span>
                    <span>for product updates and our monthly newsletter </span>
                  </h3>
                  <form id="mktoForm_4339" novalidate="novalidate" class="mktoForm mktoLayoutLeft" data-once="form-updated" data-drupal-form-fields="FirstName,LastName,Email,Company,Country,Has_Accepted_Privacy_Policy_Terms__c"></form>
                </div>
                <div class="form-thankyou">
                  <p> Thank you for your request. One of our specialists will be in touch shortly. </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

 

.page-header {
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  max-height: var(--banner-max-height);
  margin: var(--banner-margin);
  color: var(--inverted-text-color);
  overflow: hidden;
  transition: height 360ms ease;
  z-index: 1;
}

.page-header .wrapper--1 {
  height: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  display: -ms-flexbox;
  display: flex;
}

.page-header__text {
  width: 100%;
  max-width: var(--banner-text-max-width);
  transition: width 360ms ease, margin 360ms ease;
  margin: var(--banner-text-margin);
  padding: var(--banner-text-padding);
  z-index: 1;
}

.page-header .heading--1 {
  margin-bottom: var(--banner-heading-margin);
  font-size: var(--banner-heading-size);
  transition: font-size 360ms ease;
}

.page-header .heading--1 + .button__wrapper {
  padding-top: 0.9rem;
}

.page-header .heading--sub {
  margin-bottom: var(--banner-heading-sub-margin);
  font-size: var(--banner-heading-sub-size);
  text-transform: uppercase;
}

.page-header p {
  margin-bottom: var(--banner-paragraph-margin);
  font-size: var(--banner-paragraph-size);
}

.page-header p:last-of-type {
  margin-bottom: 0;
}

.page-header p:last-of-type + .button__wrapper {
  padding-top: 2.9rem;
}

.page-header .button__wrapper {
  margin-top: -0.6rem;
}

.page-header .button__wrapper a {
  margin: 0.6rem 1.8rem 0 0;
}

.page-header__logo .logo {
  margin: 0 0 1rem;
}

.page-header__ratings {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--spacing-2) 0;
  width: 100%;
  min-width: auto;
  height: 12rem;
  white-space: nowrap;
  background: rgba(33, 33, 33, 0.44);
}

@media print {
  .page-header__ratings {
    display: none;
  }
}

.page-header .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-header__grid {
  width: initial;
  height: initial;
  max-height: initial;
  margin: initial;
  color: var(--inverted-text-color);
  overflow: initial;
  background-color: var(--sf-color-1);
  color: var(--inverted-text-color);
}

.page-header__grid-inner {
  height: 60rem;
  /* iPad Portrait  */
  /* iPhone 6 onwards */
}

@media only screen and (max-width: 768px) {
  .page-header__grid-inner {
    padding: 0 4.8rem;
  }
}

@media only screen and (max-width: 480px) {
  .page-header__grid-inner {
    height: auto;
    min-height: 60rem;
    padding: 3.6rem 2.4rem;
  }
}

[data-brand="fitch-learning"] .page-header .heading--1:after,
[data-brand="fitch-credit-certificate"] .page-header .heading--1:after {
  content: '';
  width: 8.4rem;
  margin-bottom: 3.6rem;
  padding-top: 3.6rem;
  border-bottom: 0.2rem solid var(--white);
  display: block;
}

/* FTICH */
@media only screen and (max-width: 1368px) {
  .page-header {
    min-height: 60rem;
  }
  .page-header__text {
    margin: 3.6rem 0 0 0;
    padding: 0 0 0 2.4rem;
  }
}

/* iPad Pro Portrait - iPad Landscape */
@media only screen and (max-width: 1024px) {
  .page-header {
    min-height: 50rem;
  }
  .page-header__text .heading--1 {
    font-size: 5.4rem;
  }
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .page-header .wrapper--1 {
    padding: 0;
  }
  .page-header__text {
    margin: 4.4rem 0 0;
    padding-right: 2.4rem;
  }
  .page-header__text .heading--1 {
    font-size: 4.8rem;
  }
  .page-header__image {
    display: none;
  }
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .page-header {
    height: 84vh;
    max-height: initial;
    min-height: initial;
  }
  .page-header__text {
    width: 100%;
  }
  .page-header__text .heading--1 {
    font-size: 4.4rem;
  }
  .page-header__ratings {
    display: none;
  }
}

/* iPhone 5 */
@media only screen and (max-width: 320px) {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: 60rem;
  }
  .page-header__text {
    width: 100%;
    margin: 10.8rem 0 0;
  }
  .page-header__text .heading--1 {
    font-size: 3.6rem;
  }
}

/* Print */
@media print {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: initial;
    color: var(--black);
  }
  .page-header .video {
    display: none;
  }
  .page-header .wrapper--1 {
    display: block;
  }
  .page-header__text {
    width: 100%;
    margin: 4.4rem 0 0;
    padding-right: 0;
  }
  .page-header__text .heading--1 {
    font-size: 4.8rem;
  }
  .page-header__image {
    display: none;
  }
}

 

@import '../abstracts/_mixins';

.page-header {
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  max-height: var(--banner-max-height);
  margin: var(--banner-margin);
  color: var(--inverted-text-color);
  overflow: hidden;
  transition: height 360ms ease;
  z-index: 1;

  .wrapper--1 {
    height: 100%;
    align-items: center;
    flex-flow: row nowrap;
    display: flex;
  }

  &__text {
    width: 100%;
    max-width: var(--banner-text-max-width);
    transition: width 360ms ease, margin 360ms ease;
    margin: var(--banner-text-margin);
    padding: var(--banner-text-padding);
    z-index: 1;
  }

  .heading--1 {
    margin-bottom: var(--banner-heading-margin);
    font-size: var(--banner-heading-size);
    transition: font-size 360ms ease;

    & + .button__wrapper {
      padding-top: 0.9rem;
    }
  }

  .heading--sub {
    margin-bottom: var(--banner-heading-sub-margin);
    font-size: var(--banner-heading-sub-size);
    text-transform: uppercase;
  }

  p {
    margin-bottom: var(--banner-paragraph-margin);
    font-size: var(--banner-paragraph-size);

    &:last-of-type {
      margin-bottom: 0;

      & + .button__wrapper {
        padding-top: 2.9rem;
      }
    }
  }
  
  .button__wrapper {
    margin-top: -0.6rem;

    a {
      margin: 0.6rem 1.8rem 0 0;
    }
  }

  &__logo .logo {
    margin: 0 0 1rem;
  }

  &__ratings {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: var(--spacing-2) 0;
    width: 100%;
    min-width: auto;
    height: 12rem;
    white-space: nowrap;
    background: rgba(33, 33, 33, 0.44);
    @include no-print;
  }  

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__grid {
    width: initial;
    height: initial;
    max-height: initial;
    margin: initial;
    color: var(--inverted-text-color);
    overflow: initial;
    background-color: var(--sf-color-1);
    color: var(--inverted-text-color);

    &-inner {
      height: 60rem;
      
      @include mq-3 {
          padding: 0 4.8rem;
      }
      @include mq-4 {
          height: auto;
          min-height: 60rem;
          padding: 3.6rem 2.4rem;
      }
    }
  }
}

[data-brand="fitch-learning"],
[data-brand="fitch-credit-certificate"] { 
  .page-header {
    .heading--1:after {
      content: '';
      width: 8.4rem;
      margin-bottom: 3.6rem;
      padding-top: 3.6rem;
      border-bottom: 0.2rem solid var(--white);
      display: block;
    }
  }
}

@include mq-0 {
  .page-header {
    min-height: 60rem;

    &__text {
      margin: 3.6rem 0 0 0;
      padding: 0 0 0 2.4rem;
    }
  }
}
@include mq-2 {
  .page-header {
    min-height: 50rem;

    &__text {
      .heading--1 {
        font-size: 5.4rem;
      }
    }
  }
}
@include mq-3 {  
  .page-header {
    .wrapper--1 {
      padding: 0;
    }
    
    &__text {
      margin: 4.4rem 0 0;
      padding-right: 2.4rem;

      .heading--1 {
        font-size: 4.8rem;
      }
    }
    &__image {
      display: none;
    }
  }
}
@include mq-4 {
  .page-header {
    height: 84vh;
    max-height: initial;
    min-height: initial;

      &__text {
        width: 100%;

        .heading--1 {
          font-size: 4.4rem;
        }
      }
      &__ratings {
        display: none;
      }
    }
}
@include mq-5 {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: 60rem;

      &__text {
        width: 100%;
        margin: 10.8rem 0 0;

        .heading--1 {
          font-size: 3.6rem;
        }
      }
    }
}
@include print {
  .page-header {
    height: auto;
    max-height: initial;
    min-height: initial;
    color: var(--black);

    .video {
      display: none;
    }

    .wrapper--1 {
      display: block;
    }
    
    &__text {
      width: 100%;
      margin: 4.4rem 0 0;
      padding-right: 0;

      .heading--1 {
        font-size: 4.8rem;
      }
    }
    &__image {
      display: none;
    }
  }
}

 

Design Files

Figma

Fields

Label Machine name Field type Character Limit Required
Columns field_grid_columns 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
Even Row Height field_grid_row_height Boolean   N/A No
Rows field_grid_rows 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
This Column field_paragraph_reference Entity reference revisions   N/A No
Vertical Alignment field_vertical_alignment List (integer) 0|top
1|middle
2|bottom		 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
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
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
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) N/A No
Gradient Overlay field_gradient_overlay Boolean N/A No
Image field_image Image N/A No
Invert Header field_invert_header Boolean N/A No
Page Banner field_page_banner Boolean N/A No
Section Spacing field_section_spacing List (integer) N/A No
Sub Title field_sub_title Text (plain) TBC No
Text field_text Text (formatted, long) TBC No
Title field_title Text (formatted) TBC No

Use Case

The page header (banner) can only be used once per page and it should come at the top.

Component Options

Section Wrapper Section Spacing Section Styling

Wrapper

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

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.

Fixed Header

This option creates a fixed (sticky) header that scrolls with the user.

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

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

 

Component
Background Image
Background Video
Background Colour
Background Fixed
Background Parallax
Background Blur
Gradient Overlay
Colour Overlay
Text Colour
Rounded Corners
Shadow
Grid Columns
Grid Rows
Even Row Height
Grid Column
Grid Row
Grid Column Start
Grid Column End
Grid Row Start
Grid Row End
Layer Order
Form
Page Banner
Invert Header
Section Spacing
Logo
Sub Title
Title
Text
Call to Action
Copyright © 2024 GAMEWORK | Nicholas Game
How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions