Typography

Headings

Typeface

Playfair

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Gill Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Playfair Display - 4.79EM / 1.3 / Semi-Bold

Heading 1

Playfair Display - 3.02EM / 1.3 / Medium

H2

Playfair Display - 2.0em / 1.4 / Medium

H3

Playfair Display - 1.88em / 1.4 / Medium

H4

Playfair Display - 1.25em / 1.4 / Medium

H5

Playfair Display - 1EM / 1.4 / Medium

H6

Paragraph Big (p-big) - 22px / 1.5 / Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph - 18px / 1.45 / regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ordered List - 1rem / 1.5 / Normal

Example Ordered List
Example Ordered List

Unordered List - 1rem / 1.5 / Normal

Example Unordered List
Example Unordered List

Rich Text Element

Heading 1

Paragraph to demonstrate spacing.

Heading 2

Paragraph to demonstrate spacing.

Heading 3

Paragraph to demonstrate spacing.

Heading 4

Paragraph to demonstrate spacing.

Heading 5

Paragraph to demonstrate spacing.

Heading 6

Paragraph to demonstrate spacing.

Bullet points

Dimond also has a range of material options available, from unpainted zinc, copper, and aluminium, to pre-painted steel that carries a 15-year warranty, meaning that Dimond can offer a suitable cladding solution for every environment.

This
That
And this

Dimond can offer a suitable cladding solution for every environment. www.visitthislist.co.nz

Color

Primary

Sky Black

#24272A

Cardrona Gold

#d09a5a

Sheet Grey

#f4f4f4

Glacier White

#ffffff

Buttons

Light Background

Large Button Small Button

Dark Background

Large Button Small Button

Form elements

Light Background

Responsive 12 Grid

Our 12-col responsive grid.

col

col

col

col

col

col

col

col

col

col

Remove Gutters

To remove all padding from columns, use the "no-gutters" class preceded by the initial class of "col".

no-gutters

no-gutters

no-gutters

no-gutters

Full Width Container

Use the class of "container-fluid" for full width.

col

col

col

col

Footer ↓

Spacing

Margin

mb-1 (margin-bottom: 12px;)

mb-2 (margin-bottom: 24px;)

mb-3 (margin-bottom: 48px;)

mb-4 (margin-bottom: 64px;)

m-0 (margin: 0;)

mt-3 (margin-top: 48px;)

mt-2 (margin-top: 28px;)

mt-1 (margin-top: 16px;)

Padding

p-0 (padding: 0;)

pt-0 (padding-top: 0;)

pb-0 (padding-bottom: 0;)

Text

Color

text-primary

text-secondary

text-white

Background

bg-primary

bg-secondary

bg-secondary

bg-white

Alignment

text-center

text-right

text-left

Other

Overflow

overflow-hidden

overflow-visible

Display

d-block

d-flex

Prevent Style Clean Up

sr-only

no-scroll

drop-shadow