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 Color Palette

white

var(--white)#ffffff

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-bt-small

Outline

BB Button

rsn-bt-outline

Solid

BB Button

rsn-dark-bg

button rsn-dark-bg

BB Button

rsn-bt-small rsn-dark-bg

Outline

BB Button

rsn-bt-outline rsn-dark-bg

Custom CSS helpers

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

Text XXXL

rsn-text-xxxl

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
Icons-Reset-Network

rsn-icon-search / e900

Accessibility Colour Matrix

Show Ratings
Colourwhite
#ffffff		error
#ff4e7a
white
#ffffff		G
error
#ff4e7a		G