Skip to main content

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 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.

Content

Paragraphs

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.

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

Tables

Dolor nihil Elit blanditiis Dolor quae
Elit atque veritatis quaerat. Elit harum magnam quia. Dolor dolorem nostrum incidunt!
Consectetur exercitationem doloremque. Elit voluptatum omnis neque. Amet fuga nobis fugit!
Elit in tenetur commodi? Sit explicabo aliquam consequatur? Sit commodi debitis iusto.

Insertions

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

Added on 4 February 2018
Adipisicing rem vero consequuntur error impedit ratione. Repellat esse tempora quas ab inventore blanditiis? Impedit minus hic dolore id odit.

Adipisicing consequatur similique delectus voluptatum illum maiores.

Asides

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.

Blockquotes

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

Adipisicing maiores adipisci perferendis ea nihil. Commodi magni animi quo quis expedita.
Author name, 2009

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

Unordered list

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.

Definition 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.

Figures

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

A photograph of the Milky Way.
Praesent ut bibendum velit, vel.

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 rules

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.

Footnotes

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


  1. Lorem mollitia quam amet vel excepturi quibusdam quisquam Blanditiis atque! ↩︎