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.

Font 1

Font 1 Regular 400

Font 2

Font 2 Regular 400

Font 2 Medium 500

Font 2 Semi-Bold 600

Font 2 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

Brand Orange

var(--brand-orange)#FFB963

Brand Brown

var(--brand-brown)#C46C00

Brand Green

var(--brand-green)#51C05C

Brand Green Light

var(--brand-green-light)#73D77D

Brand Green Dark

var(--brand-green-dark)#03780F

Neutral Off White

var(--neutral-off-white)#ECE8DC

Neutral White

var(--neutral-white)#FFFFFF

Neutral Black

var(--neutral-black)#202020

Neutral Full Black

var(--neutral-full-black)#000000

Neutral Gray

var(--neutral-gray)#606060

Neutral Gray Light

var(--neutral-gray-light)#A6A49E

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

vc-bt-orange

BB Button

vc-bt-small

Outline

BB Button

vc-bt-outline

Text

BB Button

vc-bt-text

Solid

BB Button

Default  

button

BB Button

vc-bt-orange

BB Button

vc-bt-small

Outline

BB Button

vc-bt-outline vc-dark-bg

Text

BB Button

vc-bt-text vc-dark-bg

Custom CSS helpers

Remove <p> paragraph bottom margin

vc-text-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.

vc-list-no-margin-l

Text XXXL

vc-text-xxxl

Text XXL

vc-text-xxl

Text XL

vc-text-xl

Text L

vc-text-l

Text M

vc-text-m

Text S

vc-text-s

Text XS

vc-text-xs

Note

vc-note

Heading Display 1

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

vc-heading-display-1

Heading Display 2

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

vc-heading-display-2

Heading Display 3

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

vc-heading-display-3

Heading Display 4

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

vc-heading-display-4

Heading Display 5

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

vc-heading-display-5

Heading Display 6

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

vc-heading-display-6

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

vc-mobile-max-width
Limit item width on mobile

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

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

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

Local Icons

font-family
Icons-Set-Name

st-icon-search / e900

Accessibility Colour Matrix

Show Ratings
ColourBrand Orange
#FFB963		Brand Brown
#C46C00		Brand Green
#51C05C		Brand Green Light
#73D77D		Brand Green Dark
#03780F		Neutral Off White
#ECE8DC		Neutral White
#FFFFFF		Neutral Black
#202020		Neutral Full Black
#000000		Neutral Gray
#606060		Neutral Gray Light
#A6A49E
Brand Orange
#FFB963		GAAA9.6 : 1AAA12.4 : 1G
Brand Brown
#C46C00		GGGAA5.5 : 1
Brand Green
#51C05C		AAA7.0 : 1AAA9.0 : 1
Brand Green Light
#73D77D		GAAA9.1 : 1AAA11.7 : 1G
Brand Green Dark
#03780F		GGAA4.6 : 1AA5.7 : 1G
Neutral Off White
#ECE8DC		GAA4.6 : 1AAA13.3 : 1AAA17.1 : 1AA5.1 : 1
Neutral White
#FFFFFF		GAA5.7 : 1AAA16.3 : 1AAA21.0 : 1AA6.3 : 1
Neutral Black
#202020		AAA9.6 : 1GAAA7.0 : 1AAA9.1 : 1AAA13.3 : 1AAA16.3 : 1AA6.5 : 1
Neutral Full Black
#000000		AAA12.4 : 1AA5.5 : 1AAA9.0 : 1AAA11.7 : 1GAAA17.1 : 1AAA21.0 : 1GAAA8.4 : 1
Neutral Gray
#606060		GGAA5.1 : 1AA6.3 : 1G
Neutral Gray Light
#A6A49E		AA6.5 : 1AAA8.4 : 1