Colours

Primary Dark
Primary Colour
Primary Light
Primary Lighter
Secondary Colour
Secondary Light
Accent Colour
Text Primary
Text Secondary
White (icons & text)

Elements

This standard paragraph features HTML elements in context. This is an example of a link and these are some of the most common inline styles such as strong and emphasis. It also shows examples of sub text and sup text. Here we can see some inline code. This is the ABBR element. This is the b element. This is the cite element. This is the code element. This is the del element. This is the dfn element. This is the em element. This is the i element. This is the ins element. This is the kbd element. This is the mark element. This is the samp element. This is the small element. This is the strong element. This is the sub element. This is the sup element. This is the var element.

This is a H1 heading

This first paragraph has an ‘intro’ class applied. The following paragraphs are simply to show the heading tags in context so use Lorem Ipsum filler text.

This is a H2 heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a H3 heading

cute kittenThis image has a class of ‘right’ applied and should be floated right. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

This piece of text has been wrapped in a <small> tag.

This is a H4 heading

I like to keep typography simple and limit headings to four sizes, so <H5> & <H6> often get styled the same as <H4>.

This is a H5 heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a H6 heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 1 with small text and a link

Heading 2 with small text and a link

Heading 3 with small text and a link

Heading 4 with small text and a link

Heading 5 with small text and a link
Heading 6 with small text and a link

This is a warning box
This is an information box
This is a success box
This is an error box

Lists

Definition List

Definition List Title 1
This is a definition list division.
Definition List Title 1
This is a definition list division.
Definition List Title 1
This is a definition list division.

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. Sub List Item 1
    2. Sub List Item 2
    3. Sub List Item 3
  4. List Item 4
  5. List Item 5
  6. List Item 6

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • Sub List Item 1
    • Sub List Item 2
    • Sub List Item 3
  • List Item 4
  • List Item 5
  • List Item 6

An example of a blockquote

“This is a real handy page of HTML elements”

-Author


Buttons



Forms

(markup from WordPress Gravity Forms plugin)

Example Form

We would love to hear from you! Please fill out this form and we will get in touch with you shortly.

  • A description for the form field, should you need it.

Tables

(markup from WordPress Tablepress plugin)

Column 1 Column 2 Column 3
Col 1 Footer Col 2 Footer Col 3 Footer
100 200 300
1000 2000 3000
AAAA BBBB CCCC

Instant online booking available 24/7. Choose your date, time and stylist.

Book your appointment

Products we use, and are available to buy, in the salon

dermalogicanioxinghd cnd-shellacsassoonsebastianmoroccanoil