A reference to all styles used througout the site

Styleguide

Colours and variables

Here you can see the different colours and variables that are used in this template. Learn more about variables here.

Typography— Headings and Text Styles

h1 heading

H1 heading

h2 heading

This is an H2 heading

h3 heading

This is an H3 heading

h4 heading

This is an H4 heading

h5 heading
This is an H5 heading
h6 heading
This is an H6 heading
Display 5xl
This is Display 5XL
Display 4xl
This is Display 4XL
Display 3XL
This is Display 3XL
Display 2xl
This is Display 2XL
Display xl
This is Display XL
Display large
This is Display Large
Display large
This is Display Large
Display Medium
This is Display Medium
Display small
This is Display Small
Paragraph
This is a paragraph
Small quote
This is a small quote

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote
Group of four Porte Mentors wearing casual t-shirts, standing side by side and looking happy.

Ordered list

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

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Different versions

All buttons in this template are created as components. Wrap them in a div to control the alignment in a grid and read more here.

Outline button
Contact
Contact
Light button
Contact
Contact
orange button
Contact
Dark button
Contact
Contact
Transparent outline button
Contact us
Contact us

Primary forms

And input fields

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.