typography

Style Guide for all headings, titles, subtitles, paragraphs, links and button text

H1

H2

H3

H4

H5
H6

‍

  • one
  • two
  • three

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

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

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

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

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

headings
Hero

Inter / 5.16 Rem Font-Size / 1.2- Line-Height

Heading H1

Inter / 3.583125 Rem Font-Size / 1.2- Line-Height

Heading H2

Inter / 2.98625 Rem Font-Size / 1.2- Line-Height

Heading H3

Inter / 2.488125 Rem Font-Size / 1.15- Line-Height

Heading H4

Inter / 2.488125 Rem Font-Size / 1.15-  Line-Height

Heading H5

Inter / 1.728125 Rem Font-Size / 1.12-  Line-Height

Heading H6

Inter / 1.44 Rem Font-Size / 1.12-  Line-Height

title headings
title heading big

Inter / 1.44 Rem Font-Size / 1.2- Line-Height

title heading small

Inter / 1.2 Rem Font-Size / 1.15-  Line-Height

sub headings
Sub Heading Big

Inter / 1.44 Rem Font-Size / 1.4- Line-Height

Sub Heading Small

Inter / 1.2 Rem Font-Size / 1.35- Line-Height

paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1.2 Rem Font-Size / 1.75- Line-Height / Body Large Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1.2 Rem Font-Size / 1.6- Line-Height / Body Large Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1 Rem Font-Size / 1.6- Line-Height / Body Medium Regular ( Base Size )

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 1 Rem Font-Size / 1.5- Line-Height / Body Medium Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 0.833125 Rem Font-Size / 1.45- Line-Height / Body Small Regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Inter / 0.833125 Rem Font-Size / 1.4- Line-Height / Body Small Bold

links
Link Large

Inter / 1.2 Rem Font-Size / 100% Line-Height

Link Small

Inter / 1 Rem Font-Size / 100% Line-Height

Inter / 1 Rem Font-Size / 100% Line-Height

buttons

Style Guide for buttons square, button radius, buttons rounded, buttons with icons **fontawesome - FA 900 Solid

Button LargeButton Large_4px RadiusButton Large_8px RadiusButton Large_Round

Button Large Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Medium

Button Medium Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button Small

Button Small Solid- Square Corners, 4px Radius, 8px Radius, 32px Radius

Button MediumButton Medium_4px RadiusButton Medium_8px RadiusButton Medium_Round

Button Medium Outline - Square Corners, 4px Radius, 8px Radius, 32px Radius

Button
Button
Button
Button
Button
Button

Buttons Solid with icons- Square Corners **fontawsome - FA 900 Solid

Buttons Solid with icons- 32px Radius **fontawsome - FA 900 Solid

Button
Button
Button
Button
Button
Button

Buttons Outline with icons- Square Corners **fontawsome - FA 900 Solid

Auto Electrical

At All Truck Repairs, our Auto Electric division is staffed by fully trained and trade-certified technicians with extensive experience in the transport industry.

PRICE
£
Horse Trucks

At All Truck Repairs we specialise in top-tier paint and panel repairs on horse trucks and floats.

PRICE
£
Motor Homes

Specialised and comprehensive services tailored to meet the unique needs of your motorhome at All Truck Repairs.

PRICE
£
Brands

We only use brands you know and love. this way, if anything ever goes wrong, you know who to go to, and how to get it fixed.

Handmade

We don't make out of the box campers. We take great care in delivering bespoke homes that get you on an adventure.

Quality

Using quality materials for all of our designs, our campers are built to the highest spec, so you have less worry about things going wrong.

Assurance

Pick up or drop-off, you choose. We're based in South Wales, but for the right place are happy to deliver for you.

You’re in good hands

Torquatos nostros? quos dolores eos, qui dolorem ipsum per se texit, ne ferae quidem se repellere, idque instituit docere sic: omne animal, simul atque integre iudicante itaque aiunt hanc quasi involuta aperiri, altera occulta quaedam et voluptatem accusantium doloremque.

Work with us

Discover how we can find your dream property.

Torquatos nostros? quos dolores eos, qui dolorem ipsum per se texit, ne ferae quidem se repellere, idque instituit docere sic: omne animal, simul atque integre iudicante itaque aiunt hanc quasi involuta aperiri, altera occulta quaedam et voluptatem accusantium doloremque.

Learn more

You’re in good hands

Torquatos nostros? quos dolores eos, qui dolorem ipsum per se texit, ne ferae quidem se repellere, idque instituit docere sic: omne animal, simul atque integre iudicante itaque aiunt hanc quasi involuta aperiri, altera occulta quaedam et voluptatem accusantium doloremque.

Learn more