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.

Recoleta Alt

Recoleta Alt Light 300

Recoleta Alt Regular 400

Libre Franklin

Libre Franklin Light 300

Libre Franklin Regular 400

Libre Franklin Semi-Bold 600

Libre Franklin Bold 700

Libre Franklin Light Italic 300

Libre Franklin Italic 400

Libre Franklin Semi-Bold Italic 600

Libre Franklin Bold Italic 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)#004C46

secondary

var(--secondary)#3C8064

tertiary

var(--tertiary)#38A570

green-alt

var(--green-alt)#3C8064

beige-dark

var(--beige-dark)#c4baa7

beige

var(--beige)#D9CFBC

beige-medium

var(--beige-medium)#e7e0d4

beige-light

var(--beige-light)#F5F0E8

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

BB Button

Default  

BB Button

Default  

button

BB Button

jr-bt-small

Underline

BB Button

jr-bt-underline

Solid

BB Button

jr-dark-bg

BB Button

jr-bt-white

button jr-dark-bg

BB Button

jr-bt-small jr-dark-bg

Underline

BB Button

jr-bt-underline jr-dark-bg

Custom CSS helpers

Layout

Page section container global styles

jr-page-section

Page Section container with large spacing

jr-page-section jr-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

jr-mobile-max-width

Limit item width on mobile (narrow)

jr-mobile-max-width-narrow

Limit item direct child width on mobile

jr-mobile-max-width-child

Limit item direct child width on mobile (narrow)

jr-mobile-max-width-child-narrow

Heading

Heading Display 1

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

jr-heading-display-1

Heading Display 2

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

jr-heading-display-2

Heading Display 3

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

jr-heading-display-3

Heading Display 4

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

jr-heading-display-4

Heading Display 5

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

jr-heading-display-5

Heading Display 6

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

jr-heading-display-6

Text

Text XXXL

jr-text-xxxl

Text XXL

jr-text-xxl

Text XL

jr-text-xl

Text L

jr-text-l

Text M

jr-text-m

Text S

jr-text-s

Text XS

jr-text-xs

Note

jr-note

Remove <p> paragraph bottom margin

jr-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.

jr-list-no-margin-l

  1. List Item
  2. List Item
  3. List Item

jr-list-custom-number

Misc

Alt Color

Local alternative text color

Local Icons

font-family
John-Rhind-2026-Icons

jr-icon-arrow-left / e900

jr-icon-arrow-right / e901

jr-icon-arrow-up-right / e902

jr-icon-download / e903

jr-icon-facebook / e904

jr-icon-minus / e905

jr-icon-plus / e906

jr-icon-star / e907

jr-icon-burial / e908

jr-icon-caskets / e909

jr-icon-catering / e90a

jr-icon-cremation / e90b

jr-icon-memorial / e90c

jr-icon-multimedia / e90d

jr-icon-repatriation / e90e

jr-icon-venues / e90f

jr-icon-compassionate / e910

jr-icon-facilities / e911

jr-icon-pricing / e912

jr-icon-trusted / e913

jr-icon-phone / e914

jr-icon-search / e915

Accessibility Colour Matrix

Show Ratings
Colourwhite
#ffffff		primary
#004C46		secondary
#3C8064		tertiary
#38A570		green-alt
#3C8064		beige-dark
#c4baa7		beige
#D9CFBC		beige-medium
#e7e0d4		beige-light
#F5F0E8		error
#ff4e7a
white
#ffffff		AAA9.9 : 1AA4.7 : 1GAA4.7 : 1G
primary
#004C46		AAA9.9 : 1GAA5.1 : 1AA6.4 : 1AAA7.5 : 1AAA8.7 : 1G
secondary
#3C8064		AA4.7 : 1GGG
tertiary
#38A570		GG
green-alt
#3C8064		AA4.7 : 1GGG
beige-dark
#c4baa7		AA5.1 : 1
beige
#D9CFBC		AA6.4 : 1GG
beige-medium
#e7e0d4		AAA7.5 : 1GG
beige-light
#F5F0E8		AAA8.7 : 1GG
error
#ff4e7a		GG

BB Components