Styles

h1 heading

h2 heading

h3 heading

h4 heading

h5 heading
h6 heading

This is a paragraph modipiciis2 dolupta2 dollatem quissi cumquassunte this is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

  • This is an unordered list utet unt.
  • Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
    • qui il mod quatusda
    • comnim volo et porum
    • quassimus re cusdani scitatiorrum reptio.
  • voluptatis evel et voluptia cumquam quia que con num aciam

This is a bold link Alit expersp edipicaepra sunt ullabor epeles endae in consedio ipiendam facea vent dolupti onsecest, sit labor sincia doluptam nis et alitat alistru ptibus nonempo ssimpore modi berestrum ius, nis ium ut rem nullendios cum nes qui conseru ptataspe pore dolorat ecest, te cones ditios istis dolorum res ne net dolor si nobitam.

  1. This is an ordered list Della sit il ereped utet unt.
  2. Event ut dest quassimus re cusdani scitatiorrum reptio. Et ea nonsequiam re dolupta spelendem solor aut harum
  3. voluptatis evel et voluptia cumquam quia que con num aciam

This is a blockquote Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

Bricolage Grotesque

Bricolage Grotesque Regular 200

Bricolage Grotesque Regular 300

Bricolage Grotesque Regular 400

Bricolage Grotesque Regular 500

Bricolage Grotesque Regular 600

Bricolage Grotesque Regular 700

Bricolage Grotesque Regular 800

Poppins

Poppins Bold 700

<h1> Lorem ipsum dolor sit amet

Modipiciis dolupta dollatem quissi cumquassunte This is a link ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

<h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

<h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

<h4> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modipiciis dolupta This is a link dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

<h5> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

<h6> Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

Fallback Image
This is a caption

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

Fallback Image

Modipiciis dolupta dollatem quissi cumquassunte lien doluptatet ut perum eos ese cum experitaqui atur, suntecati veratia erehent. Id mil et prorro esciendit assimol uptate dit hiciae nis ut quis vernatus.

Global Colour Palette

white

var(--white)#ffffff

primary

var(--primary)#141414

yellow

var(--yellow)#E4D21D

blue

var(--blue)#7ACFF1

turquoise

var(--turquoise)#10A99E

turquoise-light

var(--turquoise-light)#CFEEEB

green-apple

var(--green-apple)#A6CE38

green-apple-light

var(--green-apple-light)#ECF5D7

green

var(--green)#85A52C

green-forest

var(--green-forest)#31513C

cream

var(--cream)#E4DDC2

cream-light

var(--cream-light)#FCFAF3

gray-dark

var(--gray-dark)#525252

gray

var(--gray)#A3A3A3

gray-light

var(--gray-light)#D6DCD9

error

var(--error)#ff4e7a

Buttons

The buttons styles below are set globally in the style.css file.
They apply to the default button, and to alternative buttons via custom classes.
These global styles cannot or shouldn't be locally override via the BB Button UI.
It is recommended to use the global styles classes and leave the UI styles blank.

Solid

BB Button

Default  

button

BB Button

rsn-green-apple

BB Button

rsn-green-apple-light

BB Button

rsn-turquoise-light

Underline

BB Button

rsn-bt-underline

Solid

BB Button

Default  

button

BB Button

rsn-green-apple

BB Button

rsn-green-apple-light

BB Button

rsn-turquoise-light

Underline

BB Button

rsn-bt-underline rsn-dark-bg

Custom CSS helpers

BB Row page section global values

rsn-page-section

BB Row page section global values + larger top/bottom padding

rsn-page-section rsn-spacing-xl

Button

BB Button pinned at bottom of page section + visual effect

rsn-bt-pin-b

Remove <p> paragraph bottom margin

rsn-no-margin-b

  • Remove <ul> list left margin
  • Pariatur duis eu sint. In velit culpa occaecat voluptate non ut fugiat. Amet sint.
  • Incididunt ipsum elit ex voluptate quis pariatur est enim.

rsn-list-no-margin-l

Kicker

rsn-text-kicker

Text Align Right

rsn-text-right

Text XXL

rsn-text-xxl

Text XL

rsn-text-xl

Text L

rsn-text-l

Text M

rsn-text-m

Text S

rsn-text-s

Note

rsn-note

Heading Fake h1

Make other <hn> or <p> look like h1

rsn-heading-fake-h1

Heading Fake h2

Make other <hn> or <p> look like h2

rsn-heading-fake-h2

Heading Fake h3

Make other <hn> or <p> look like h3

rsn-heading-fake-h3

Heading Fake h4

Make other <hn> or <p> look like h4

rsn-heading-fake-h4

Heading Fake h5

Make other <hn> or <p> look like h5

rsn-heading-fake-h5

Heading Fake h6

Make other <hn> or <p> look like h6

rsn-heading-fake-h6

Limit width on mobile (either item itself or direct child) + center horizontally
Max width value is predefined in the global stylesheet

rsn-mobile-max-width
Limit item width on mobile

rsn-mobile-max-width-narrow
Limit item width on mobile (narrow)

rsn-mobile-max-width-child
Limit item direct child width on mobile

rsn-mobile-max-width-child-narrow
Limit item direct child width on mobile (narrow)

Local Icons

font-family
Reset-Network-Icons

rsn-icon-caret-down / e900

rsn-icon-dropdown-arrow / e901

rsn-icon-placeholder / e902

rsn-icon-search / e903

rsn-icon-plus / e904

rsn-icon-minus / e905

rsn-icon-facebook / e906

rsn-icon-linkedin / e907

rsn-icon-vimeo / e908

rsn-icon-youtube / e909

rsn-icon-case-study / e90a

rsn-icon-dataset / e90b

rsn-icon-evaluation / e90c

rsn-icon-fact-sheet / e90d

rsn-icon-media-article / e90e

rsn-icon-media-release / e90f

rsn-icon-newsletter-alt / e910

rsn-icon-newsletter / e911

rsn-icon-paper / e912

rsn-icon-policy-brief / e913

rsn-icon-presentation / e914

rsn-icon-report / e915

rsn-icon-video / e916

rsn-icon-webinar / e917

rsn-icon-advisors / e918

rsn-icon-blog / e919

rsn-icon-collaboration-partners / e91a

rsn-icon-contact-us / e91b

rsn-icon-country-profiles / e91c

rsn-icon-energy-modeling / e91d

rsn-icon-events / e91e

rsn-icon-funding / e91f

rsn-icon-main / e920

rsn-icon-news / e921

rsn-icon-our-members / e922

rsn-icon-policy-dialogue / e923

rsn-icon-pricing-instruments / e924

rsn-icon-strategy / e925

rsn-icon-success-stories / e926

rsn-icon-clipping / e927

rsn-icon-project-updates / e928

rsn-icon-releases / e929

rsn-icon-check-circle / e92a

rsn-icon-check-filled / e92b

rsn-icon-check / e92c

rsn-icon-close / e92d

rsn-icon-date / e92e

rsn-icon-download / e92f

rsn-icon-external-link / e930

rsn-icon-location / e931

rsn-icon-next / e932

rsn-icon-sparkles / e933

rsn-icon-time / e934

rsn-icon-upload / e935

rsn-icon-camera / e936

Accessibility Colour Matrix

Show Ratings
Colourwhite
#ffffff		primary
#141414		yellow
#E4D21D		blue
#7ACFF1		turquoise
#10A99E		turquoise-light
#CFEEEB		green-apple
#A6CE38		green-apple-light
#ECF5D7		green
#85A52C		green-forest
#31513C		cream
#E4DDC2		cream-light
#FCFAF3		gray-dark
#525252		gray
#A3A3A3		gray-light
#D6DCD9		error
#ff4e7a
white
#ffffff		AAA18.4 : 1AAA8.9 : 1AAA7.8 : 1G
primary
#141414		AAA18.4 : 1AAA11.9 : 1AAA10.5 : 1AA6.3 : 1AAA15.0 : 1AAA10.1 : 1AAA16.3 : 1AA6.5 : 1AAA13.5 : 1AAA17.6 : 1AAA7.3 : 1AAA13.2 : 1AA5.8 : 1
yellow
#E4D21D		AAA11.9 : 1AA5.7 : 1AA5.0 : 1
blue
#7ACFF1		AAA10.5 : 1AA5.1 : 1G
turquoise
#10A99E		AA6.3 : 1G
turquoise-light
#CFEEEB		AAA15.0 : 1AAA7.2 : 1AA6.4 : 1
green-apple
#A6CE38		AAA10.1 : 1AA4.8 : 1G
green-apple-light
#ECF5D7		AAA16.3 : 1AAA7.8 : 1AA6.9 : 1
green
#85A52C		AA6.5 : 1G
green-forest
#31513C		AAA8.9 : 1AA5.7 : 1AA5.1 : 1GAAA7.2 : 1AA4.8 : 1AAA7.8 : 1GAA6.5 : 1AAA8.5 : 1GAA6.4 : 1
cream
#E4DDC2		AAA13.5 : 1AA6.5 : 1AA5.7 : 1
cream-light
#FCFAF3		AAA17.6 : 1AAA8.5 : 1AAA7.5 : 1G
gray-dark
#525252		AAA7.8 : 1AA5.0 : 1GAA6.4 : 1GAA6.9 : 1AA5.7 : 1AAA7.5 : 1GAA5.6 : 1
gray
#A3A3A3		AAA7.3 : 1GG
gray-light
#D6DCD9		AAA13.2 : 1AA6.4 : 1AA5.6 : 1
error
#ff4e7a		GAA5.8 : 1G
Subscribe with your email

Join our newsletter

Sign Up