Style Guide

This is a style guide page showcasing various design elements and typography used throughout the site.

Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies, and humors. - George Santayana.

---

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

---

• Ut at interdum nunc. Maecenas commodo turpis quis elementum gravida.
• Nunc ac sapien tellus. Quisque risus enim, tempus eget porttitor.
• Donec nibh massa, rutrum a sollicitudin eu, lacinia in lorem.

---

1. Ut at interdum nunc. Maecenas commodo turpis quis elementum gravida.
2. Nunc ac sapien tellus. Quisque risus enim, tempus eget porttitor in.
3. Donec nibh massa, rutrum a sollicitudin eu.

---

Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies, and humors. - George Santayana

---

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

---

Cras sed sodales enim. Duis nec erat magna. Sed scelerisque pretium mi et unsplash ullamcorper mauris aliquam ornare fringilla. In luctus commodo quam eget posuere.

---

---

---

---

See the Pen Referral Form by Kelly Harrop (@kharrop) on CodePen.

---

---

---

<button class='c-btn c-btn--small'>Button</button>
<button class='c-btn'>Button</button>
<button class='c-btn c-btn--full'>Button</button>