Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Slider Masthead Block

This is the slider masthead block, used on the homepage.

Button 1

Play/Pause Carousel

Pattern Library

Masthead Block

Simple Masthead Block – used on internal pages.

Heading 1

Colour: #000000
Font Family: Roboto
Font Size: clamp(32px, 5.6vw, 80px)
Font Weight: 400

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Heading 2

Colour: #000000
Font Family: Roboto
Font Size: clamp(30px, 4vw, 50px)
Font Weight: 300

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Heading 3

Colour: #000000
Font Family: Roboto
Font Size: clamp(32px, 3.35vw, 35px)
Font Weight: 400

Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui rhoncus.

Heading 4

Colour: #000000
Font Family: Roboto
Font Size: clamp(16px, 2.05vw, 25px)
Font Weight: 400

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Heading 5

Colour: #000000
Font Family: Roboto
Font Size: clamp(16px, 1.8vw, 20px)
Font Weight: 400

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

Heading 6

Colour: #000000
Font Family: Roboto
Font Size: 13px
Font Weight: 400

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.

• Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
• Vivamus elementum semper nisi.
• Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
• Cras dapibus. Vivamus elementum semper nisi.

1. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
2. Vivamus elementum semper nisi.
3. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
4. Cras dapibus. Vivamus elementum semper nisi.

Button Styling

Button Styling

Primary Button

Outline Button

Secondary Button

Tertiary Button

Justification

Justify Left

Justify Center

Justify Right

Space Between

Orientation Down

Button Sizes