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.

Domaine Display

Domaine Display Medium 500

Domaine Display Medium Italic 500

Manrope

Manrope ExtraLight 200

Manrope Light 300

Manrope Regular 400

Manrope Medium 500

Manrope Semi-Bold 600

Manrope Bold 700

Manrope ExtraBold 800

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.

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.

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.

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.

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.

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)#00587C

primary-light

var(--primary-light)#78B8D2

secondary

var(--secondary)#10A99E

secondary-dark

var(--secondary-dark)#0E877E

blue-navy

var(--blue-navy)#00345B

sand-extra-light

var(--sand-extra-light)#F5F3EB

blue-gray-light

var(--blue-gray-light)#D5E0E5

blue-gray

var(--blue-gray)#C3D7E6

gray-dark

var(--gray-dark)#4A4C49

error

var(--error)#ff4e7a

Buttons

Please use the BB Button Component all over the site and access its visual variations by using Style Options.
These are presets/custom classes located in the style.css file.
Some local settings stay accessible in the Component Instance UI such as: Text / Icon / Link / Visibility / Alignment / Style Options (presets).

Solid

Button

Default  

button

Button

Default  

Outline

Button

wv-bt-outline

Button

wv-bt-outline wv-bt-small

Underline

Button

wv-bt-underline

Solid

Button

wv-dark-bg

button wv-dark-bg

Button

wv-bt-white

Outline

Button

wv-bt-outline wv-dark-bg

Button

wv-bt-outline wv-bt-small wv-dark-bg

Underline

Button

wv-bt-underline wv-dark-bg

Custom CSS helpers

Layout

Page section container global styles

wv-page-section

Page Section container with large spacing

wv-page-section wv-spacing-xl

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

Limit item width on mobile

wv-mobile-max-width

Limit item width on mobile (narrow)

wv-mobile-max-width-narrow

Limit item direct child width on mobile

wv-mobile-max-width-child

Limit item direct child width on mobile (narrow)

wv-mobile-max-width-child-narrow

Heading

Heading Display 1

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

wv-heading-display-1

Heading Display 2

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

wv-heading-display-2

Heading Display 3

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

wv-heading-display-3

Heading Display 4

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

wv-heading-display-4

Heading Display 5

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

wv-heading-display-5

Heading Display 6

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

wv-heading-display-6

Text

Text Intro

wv-text-intro

Kicker

wv-text-kicker

Kicker Small

wv-text-kicker-small

Text XXL

wv-text-xxl

Text XL

wv-text-xl

Text L

wv-text-l

Text M

wv-text-m

Text S

wv-text-s

Link Alternative Big

wv-link-alt-big

Note

wv-note

Remove <p> paragraph bottom margin

wv-text-no-margin-b

  • Remove <ul> list left and bottom margin
  • List item
  • List item

wv-list-no-margin-l wv-list-no-margin-b

  • List Check Bullet
  • List Item
  • List Item

wv-list-bullet-check

  • List Diamond Bullet
  • List Item
  • List Item

wv-list-bullet-diamond

Icons

font-family
Lychgate-Icons

wv-icon-check / e900

wv-icon-diamond / e901

wv-icon-hamburger / e902

wv-icon-phone / e903

wv-icon-search / e904

wv-icon-long-arrow-right / e905

wv-icon-cross / e906

wv-icon-plus / e907

wv-icon-minus / e908

wv-icon-lychgate-symbol / e909

wv-icon-facebook / e909a

Accessibility Colour Matrix

Show Ratings
Colourwhite
#ffffff		primary
#00587C		primary-light
#78B8D2		secondary
#10A99E		secondary-dark
#0E877E		blue-navy
#00345B		sand-extra-light
#F5F3EB		blue-gray-light
#D5E0E5		blue-gray
#C3D7E6		gray-dark
#4A4C49		error
#ff4e7a
white
#ffffff		AAA7.8 : 1GAAA12.8 : 1AAA8.7 : 1G
primary
#00587C		AAA7.8 : 1GAAA7.0 : 1AA5.8 : 1AA5.3 : 1
primary-light
#78B8D2		GAA5.8 : 1G
secondary
#10A99E		G
secondary-dark
#0E877E		GGG
blue-navy
#00345B		AAA12.8 : 1AA5.8 : 1GAAA11.5 : 1AAA9.5 : 1AAA8.6 : 1G
sand-extra-light
#F5F3EB		AAA7.0 : 1GAAA11.5 : 1AAA7.8 : 1
blue-gray-light
#D5E0E5		AA5.8 : 1GAAA9.5 : 1AA6.5 : 1
blue-gray
#C3D7E6		AA5.3 : 1AAA8.6 : 1AA5.9 : 1
gray-dark
#4A4C49		AAA8.7 : 1GAAA7.8 : 1AA6.5 : 1AA5.9 : 1
error
#ff4e7a		GG