Typography

Typeface

Poppins

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
  1. Example Ordered List
  2. 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

Black
#000000
Dark Orchard
#9B2DCF
Violet
#672dcf
Violet Red
#EA597F
Green
#3dcbbf
Orange
#ffa75f
Gold
#FFD851
Grey
#9C9C9C
White
#FFFFFF

Buttons

Form elements

Thank you for your submission!

Oops! Something went wrong while submitting the form.

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

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;)
p-0 (padding: 0;)
pt-0 (padding-top: 0;)
pb-0 (padding-bottom: 0;)

Text

text-black
text-purple
text-violet
text-red
text-green
text-orange
text-gold
text-grey
text-white
bg-primary
bg-purple
bg-violet
bg-red
bg-green
bg-orange
bg-gold
bg-grey
bg-white
text-center
text-right
text-left
d-none

Other

overflow-hidden
overflow-visible
d-none
d-block
d-flex
sr-only
sr-only
sr-only
no-scroll
drop-shadow