Lightest 1

Lightest 2

Light 1

Light 2

Bright 1

Headline 1

Content in here

Headline

A link to a page

Squarespace has a limited palette of colours and we want to use all of the HBB brand colours when constructing the site. Therefore we will override some of the squarespace defaults with our own definitions.

A Squarespace HTML page is constructed as a stack of <section> elements, each of which has attributes we can use to target according to the user-selected theme. This means we can override them.

The attributes we can target are: 

<section data-section-theme="" and class="">

The value is provided in both locations. The mapping between the UI colour

theme and the attribute is:

  • Lightest 1 = ""

  • Lightest 2 = "white-bold"

  • Light 1 = "light"

  • Light 2 = "light-bold"

  • Bright 1 = "bright-inverse"

  • Bright 2 = "bright"

  • Dark 1 = "dark"

  • Dark 2 = "dark-bold"

  • Darkest 1 = "black"

  • Darkest 2 = "black-bold"

Here is an ordered list

  1. sdfsdfsd

  2. sfdsdfsd

  3. fsfsd

Indented text test

here is some indentation

What about a blockquote?

dafsdfdsfsdfds

“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source
Video Block
Double-click here to add a video by URL or embed code. Learn more

  • Description text goes here

  • Description text goes here

  • Description text goes here

Hello, World!

Bright 2

Dark 1

Dark 2

Darkest 1

Headline

A link to a page

Squarespace has a limited palette of colours and we want to use all of the HBB brand colours when constructing the site. Therefore we will override some of the squarespace defaults with our own definitions.

A Squarespace HTML page is constructed as a stack of <section> elements, each of which has attributes we can use to target according to the user-selected theme. This means we can override them.

The attributes we can target are: 

<section data-section-theme="" and class="">

The value is provided in both locations. The mapping between the UI colour

theme and the attribute is:

  • Lightest 1 = ""

  • Lightest 2 = "white-bold"

  • Light 1 = "light"

  • Light 2 = "light-bold"

  • Bright 1 = "bright-inverse"

  • Bright 2 = "bright"

  • Dark 1 = "dark"

  • Dark 2 = "dark-bold"

  • Darkest 1 = "black"

  • Darkest 2 = "black-bold"

Here is an ordered list

  1. sdfsdfsd

  2. sfdsdfsd

  3. fsfsd

Indented text test

here is some indentation

What about a blockquote?

dafsdfdsfsdfds

“Whatever it is, the way you tell your story online can make all the difference.”
— Quote Source
Video Block
Double-click here to add a video by URL or embed code. Learn more

  • Description text goes here

  • Description text goes here

  • Description text goes here

Hello, World!

Darkest 2

Global artisans

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

High quality materials

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

Customized for you

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

  • It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more.

5

Curiosity

Quiant, omnihiliam simpe dolut quat dolorit ulla dolupta autatia ped molor sequi bea nime sitia vit quis volecte mporatem quis re non re vel iur adit ressimil inctecto cus esequatur, quam fugiania volum non et rem amus venit ut harum eos dolescide