Use this template as a base for your project's front end or for taking snippets of HTML5 markup.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Small

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Images & Content

Images in this section are using a Javascript plugin called Picturefill that enables the developer to specify multiple image files for a single picture. This is very useful with regards to responsive design.

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

A view of the pulpit rock in Norway
FIG. 1 - A view of the pulpit rock in Norway.

Here is a section heading in H2 size

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

A view of the pulpit rock in Norway
FIG. 2 - A view of the pulpit rock in Norway.

Here is a section heading in H3 size

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

A view of the pulpit rock in Norway
FIG. 3 - A view of the pulpit rock in Norway.

Here is a section heading in H4 size

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Margin Test Heading

Donec porttitor tortor in velit malesuada sag * ittis. Donec ultricies, metus * ut porta feugiat, libero nisl laoreet elit, at hendrerit turpis elit eget nulla. Pellentesque condimentum dolor vestibulum hendrerit posuere. Nam molestie lacus augue, et condimentum tortor condimentum id. Suspendisse magna augue, vestibulum at consectetur ut, scelerisque vel dolor. Morbi varius varius auctor. Nulla auctor ornare odio.

Lists (Displayed in grid-columns)

Unordered List

  • United Kingdom
    • London
    • Birmingham
    • Manchester
    • Leeds
  • France
  • Germany
  • Italy
  • Spain
    1. Madrid
    2. Barcelona
    3. Seville
    4. Valencia
  • Greece
  • Netherlands
  • Sweden

Ordered List

  1. Manchester City
  2. Liverpool
  3. Chelsea
    1. Diego Costa
    2. Fabregas
    3. Terry
    4. Hazard
  4. Arsenal
  5. Everton
    • Mirallas
    • Lukaku
    • Baines
    • Coleman
  6. Manchester United
  7. Tottenham Hotspur

Description List (HTML4: Definition List)

Default layout

Mercury
Tiny moon-like planet which is closest to the sun. Very hot, day time temperature exceeds 300°.
Venus
Hot, densely cloud-wrapped planet with a runaway greenhouse effect and toxic environment.
Earth
You are there, it's quite nice.
Mars
Red desert planet with an atmosphere and water in the ice caps. We may go there one day.

Lined-up layout

Jupiter
A large pinky-orange gas giant, the largest planet in our solar system. Has lots of moons.
Saturn
Another large gas giant, this time a yellowish-beige colour with large distinctive rings around the planet.
Uranus
Medium sized green gas giant with an amusing name (actually is the name of the ancient Greek god of the heavens). Also has rings but they are smaller than Saturn's.
Neptune
Another gas giant slightly smaller than Uranus. This time a deep blue colour (hence the name).
Pluto
Tiny rocky planet on the edge of the solar system. Astronomers have declassified this as a planet because of its small size. It's now considered a 'planetoid' (large asteroid).

Article Feed

Published on

News article one headline

A view of the pulpit rock in Norway

Here is an example of a news article feed containing three articles, each with a date, headline, author name, image and summary.

Published on

News article two headline

A view of the pulpit rock in Norway

To cope with varying potential image sizes, each image is contained within a viewport that only shows the desired dimensions without changing the aspect ratio of the image.

Published on

News article three headline

A view of the pulpit rock in Norway

This makes sure all the articles in the feed have the same overall dimensions, allowing them to line up in a uniform fashion.

Buttons

Form Elements

Fieldset Legend
Some saved data
 

Here is a validation message

1
Partially Supported Inputs (October 2014)
 

Any fields not supported in your current browser will appear as a standard text input.

Not supported in
  • IE < 10
  • Safari
Not supported in
  • IE < 10
  • Safari
Not supported in
  • IE
  • Safari
Not supported in
  • IE
  • Firefox
Not supported in
  • IE
  • Firefox
Not supported in
  • IE
  • Firefox
  • Chrome
Not supported in
  • IE
  • Firefox
Not supported in
  • IE
  • Firefox
Not supported in
  • IE
  • Firefox
Not supported in
  • IE
  • Firefox
  • Opera
Not supported in
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera

Tables

 

Buttons displayed below are made from several different elements to show how each can be constructed to get the same result.

First Name Last Name Score Date Inputs
This is table footer
Jill Smith 50 01/02/2014
Eve Jackson 94 25/02/2014  Anchor
Charlie Thomas 100 30/01/2014
David Jennings 64 21/03/2014
Sandra Saladin 91 11/04/2014  Anchor
Sakis Papadopoulos 83 28/02/2014
Farrah El Gendy 88 20/02/2014
Stephania Mendes 76 16/02/2014
Yoshi Katsumoto 100 04/02/2014
Vitaly Kasperov 97 04/02/2014

Table (& off-canvas block in mobile view)

When in mobile resolution, press the green chevron to see the off-canvas content for that row. This is a good alternative to using pop-ups which are undesirable for mobile users.

First Name Last Name Score Date Actions
This is table footer
Jill Smith 50 01/02/2014

Off-canvas box one

A view of the pulpit rock in Norway

Here is some off-canvas content for row 1.
Eve Jackson 94 25/02/2014

Off-canvas box two

A view of the pulpit rock in Norway

Here is some more off-canvas content, this time for row 2.
Charlie Thomas 100 30/01/2014

Off-canvas box three

A view of the pulpit rock in Norway

Just for good measure, here is yet more off-canvas content, this time for row 3.