0113 815 4545
Our store

Our store

Read more

Search
Basket
Typography

Typography

Format your content with pre-defined styles for headings, paragraphs, lists and more.

Headings

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading.

Pro tip: Don’t use <h1> within the content area if there’s already a page title above.

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Paragraphs

The <p> tag defines a paragraph.

This is some text in a paragraph.

Lead

Make a paragraph stand out by adding the class lead.

Pro tip: Use the lead paragraph at the start of an article after a <h1> or <h2>.

This is some text in a lead paragraph.

Hyperlinks

The <a> tag defines a hyperlink, which is generally used to link from one page to another.

This is a hyperlink in a paragraph.

Use the following code if you would like the hyperlink to open in a new tab.

This is a hyperlink in a paragraph that opens in a new tab.

Lists

The <ul> tag defines an unordered (bulleted) list and the <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. Use either the <ul> or <ol> tag together with the <li> tag to create lists.

Default unordered list including nested example.

  • Item 1
    • Item 1
    • Item 2
  • Item 2
  • Item 3
  • Item 4

Unordered lists can be referenced with a style if required.

disc = bullet (default)
circle = circle
square = square
none = will not be marked

  • Item 1
    • Item 1
    • Item 2
  • Item 2
  • Item 3
  • Item 4

Default ordered list including nested example.

  1. Item 1
    • Item 1
    • Item 2
  2. Item 2
  3. Item 3
  4. Item 4

Ordered lists can be referenced by type if required.

type="1" = numbers (default)
type="A" = uppercase letters
type="a" = lowercase letters
type="I" = uppercase roman numbers
type="i" = lowercase roman numbers

  1. Item 1
    • Item 1
    • Item 2
  2. Item 2
  3. Item 3
  4. Item 4

Blockquotes

The <blockquote> tag specifies a section that is quoted from another source.

Basic HTML.

Content here

Use the following markup to centre the blockquote on the page.

Content here

For a styled left aligned blockquote use the following markup.

Content here

For a styled right aligned blockquote use the following markup.

Content here

Add a <footer> for identifying the author of the quote and wrap their name in the <strong> tag.

Content here

Joe Bloggs Title or company name

If you would like to define the title of a work (e.g. a book, a song, etc.) firstly add a <footer> and include the title within the <cite> tag as shown below.

Content here

Joe Bloggs Title or company name