Style Guide

This is a personal reference for the different types of content on my website, used to test for regressions when making updates to HTML templates or CSS.

Heading

Heading level 1

Consectetur eveniet alias quisquam tempora vero. Illum tempore rem suscipit fugiat quas ab Asperiores dolor magni qui saepe ipsa Velit culpa nobis omnis repellat quidem labore. Soluta ipsum quos atque.

Heading level 2

Dolor non aspernatur ipsum aliquam totam? Suscipit praesentium nobis eum beatae in Atque distinctio earum illo natus laborum? Modi ipsum ipsum blanditiis quam perspiciatis commodi cupiditate Voluptatem quos fugit expedita.

Heading level 3

Dolor illum animi facilis officia voluptatum Quo distinctio provident cupiditate at nisi, natus optio Minima sit dolorem est doloribus totam. Esse nam dolor culpa ullam obcaecati saepe? Dolorum voluptatem consequuntur.

Heading level 4

Amet quaerat autem nobis veniam consequatur ad ut Reiciendis nostrum nobis repudiandae laborum quaerat Officia aperiam quos dolores perferendis nulla doloribus doloremque Quo officia culpa odio quo illo ex!

Heading level 5

Sit numquam maiores deserunt molestiae nam veritatis. Laudantium sit sit blanditiis explicabo minus? Facilis consequuntur ducimus voluptatum nostrum perspiciatis Quia commodi sit amet harum quibusdam. Nemo quis adipisci nisi nulla.

Heading level 6

Amet placeat beatae veritatis ducimus laboriosam. Sunt dolorem optio fuga corporis impedit ullam? Voluptatum nisi vero blanditiis voluptate ex Deleniti quod qui aliquid iste aut Nam modi perspiciatis impedit natus.

Paragraph

Adipisicing soluta ab porro adipisci minima Eos consequuntur aperiam id cum nisi Earum sed tenetur magni cupiditate hic. Ipsa eos iusto aliquam id modi. Natus quidem eveniet quae mollitia labore.

Emphasis and importance

Adipisicing soluta ab porro adipisci minima Eos consequuntur aperiam id cum nisi Earum sed tenetur magni cupiditate hic. Ipsa eos iusto aliquam id modi. Natus quidem eveniet quae mollitia labore.

Hyperlink

Consectetur doloribus libero nemo suscipit natus Ex fugit est officiis illo vero Animi veniam necessitatibus magni accusamus eum perspiciatis Consectetur.

Hyperlink outlines on images

Table

Insertion

Lorem a ad inventore nobis ea Sapiente dicta quia cupiditate fugit voluptates!

Adipisicing consequatur similique delectus voluptatum illum maiores.

Aside

Ipsum consectetur quisquam praesentium minus nobis Modi aliquid maxime debitis dicta et! Iusto quasi porro et iusto voluptates Magni explicabo.

Dolor adipisicing ad impedit laudantium omnis Rem adipisci perspiciatis quasi architecto laudantium praesentium. Facilis consequuntur inventore assumenda.

Blockquote

Sit deserunt sit et dolor temporibus Itaque esse quos dolorem molestiae autem, molestias Saepe non odio molestias enim aut, alias?

Adipisicing eveniet voluptates earum perspiciatis reiciendis? Alias quasi deleniti cumque magni delectus? Ipsam magnam.

Unordered list

• Aliquam sollicitudin ex in tellus facilisis, eget laoreet enim accumsan.
• Duis lobortis massa at dui aliquet, nec ornare justo ullamcorper.
• Proin eget sem et nulla semper accumsan.

Ordered list

1. Aliquam sollicitudin ex in tellus facilisis, eget laoreet enim accumsan.
2. Duis lobortis massa at dui aliquet, nec ornare justo ullamcorper.
3. Proin eget sem et nulla semper accumsan.

Description list

Ipsum ipsum

Adipisicing autem placeat fugit officiis illo Corrupti enim fugiat minus.

Elit ducimus unde

Adipisicing consectetur voluptatum sunt sint iste fugit nulla.

Dolor ut

Elit pariatur facere pariatur consectetur repudiandae Fugiat ratione impedit facilis.

Figure

Ipsum maxime vero quod dolorem quos Consequatur corporis dolorem dolores fuga quasi Fugiat corrupti necessitatibus assumenda distinctio impedit voluptates, adipisci?

Sit ipsam magnam eum ducimus ipsam Facilis nemo tempora incidunt doloremque eum consectetur Quo sequi.

Inline code

Adipisicing error aperiam facere tempora accusantium. Quis illum pariatur ratione ipsum corporis? Totam ipsum maiores assumenda obcaecati blanditiis. Libero maiores quos Enter quia vitae harum, C-h + C-r Enter amet modi laboriosam eligendi. Saepe est?

Block code

Amet voluptate nemo nisi maiores cupiditate? Ut repudiandae excepturi quasi iusto quae Odio repellendus temporibus rerum vel natus suscipit.

// Store the SVG namespace for easy reuse.
var svgns = 'http://www.w3.org/2000/svg';

// Create <svg>, <defs>, <linearGradient> and <rect> elements using createElementNS to apply the SVG namespace.
// (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS)
var svg = document.createElementNS(svgns, 'svg');
var defs = document.createElementNS(svgns, 'defs');
var gradient = document.createElementNS(svgns, 'linearGradient');
var rect = document.createElementNS(svgns, 'rect');

Consectetur inventore quod fugit neque vitae Dolore minima ducimus atque voluptates minima Fuga praesentium.

Horizontal rule

Elit nostrum provident debitis reiciendis fuga eius Minima repellendus debitis eum nesciunt quis deleniti. Modi id sequi quod sit nulla impedit magnam Ducimus iusto vel?

Sit laudantium cupiditate quidem magnam quas sequi praesentium natus? Iure accusamus quod rem laboriosam ipsa. Iure blanditiis fuga perspiciatis at molestias libero. Deserunt voluptatem adipisicing.

Colour palette

• #55b742
• #303eb5
• with caption #EBBF28
• with caption #E6353D

Footnote

Dolor atque ullam quis id ipsa Magnam voluptas quisquam ullam aut excepturi. Reprehenderit consectetur quam autem maiores iusto, voluptatum fugit dolores¹. Temporibus fugit beatae perspiciatis dicta porro Impedit molestiae facilis.