Style Guide

Headings

Write all headings in title case.

Use heading tags, such as <h1>, <h2> and so on, to tag the headings on a page. Apply a heading class, such as t-heading-l, to style them visually. Style headings consistently to create a clear content structure throughout your service.

Headings with Captions

Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading with a caption above it - currently set to 50% of the corresponding heading size.

Paragraph Styles

Body Text

The default paragraph font size is a minimum of 16px on small screens, scaling up on bigger screens.

Lead Paragraph

A lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content. Lead paragraphs use 24px type on desktop and should only be used once per page if needed.

Body Small

You can use the .t-small-text class sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.

The majority of your body copy should use the standard 19px paragraph size on desktop.

Links

Links are underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.

Emphasis, bold, and strikethrough

Text can be styled in otherways, for example using <em>, <strong> and <s>

Lists

Use lists to make blocks of text easier to read, and to break information into manageable chunks.

If a list is hard to read because the items run across multiple lines you can add extra spacing.

Tables

Tiles

Tiles are

Cards

Cards are pieces of bite sized information displayed; spaced out from each other, on top of a graphic element other than the background. Cards are useful for reading quick information because the design clearly directs you to the content.

Bold text lorem ipsum dolor sit amet, consectetur adipisicing elit, italics sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text link excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

---

Lists (H3)

• Unordered list item 1
• Unordered list item 2

1. Ordered list item 1
2. Ordered list item 2

Hello World! padding-top: 70px;

The Front Of House staff all believe that the wayfinding in place is working as intended, encouraging visitors into the galleries on the upper floors.

Definition Lists (H4)

Definition List

Text

Longer Label

Text

Label

Longer text Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Label

Dolore magna aliqua.

Table (h4)

Table col 1 Title	Table col 2 Title	Table col 3 Title
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

Input label *

Textarea label

Multiple select Volvo Saab Fiat Audi

Region

Select London Up North Yorkshire & Humber

Datalist

Checkboxes Value 1 Value 2 Value 3

Radio buttons Value 1 Value 2 Value 3

We would like to send you regular updates on our products and services. We won't sell your personal details to anyone else. You can unsubscribe at any time. Would you like to recieve these emails?

Yes, please No, thanks

Primary Button (send) Secondary Button (reset)

Download file - £4.99 Download file - £9.99

Accessibility options

Closing p tag