Style guide


This blog is built with Eleventy and hosted with Netlify. I'm using a mix of Liquid and Nunjucks to write the templates.

Here's a link to the repo on GitHub.

Spotted an error or something that could be improved? Please create an issue.


I've chosen font families that use system fonts. System fonts are the fonts already installed on a device. Different operating systems have different defaults, but these lists should cover most of them. It's a little boring, but it's good for performance.

List of sample pages

  1. Home
  2. Style Guide
  3. About
  4. Blog
  5. List of blog categories
  6. Post: Accessible close buttons
  7. Post: A plan for accessible charts


Heading 1

Heading 2

Heading 3

Heading 4

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod * tempor incididunt ut labore et dolore magna aliqua.

An example link

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. This is the last list item

A blockquote is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation.
— Homer Simpson


HTML Entities – A List of HTML Space and other HTML Symbols and Special Character Codes from Quincy Larson


Images are full width by default. Don't forget alt text.

![Alt text goes here](/images/image.png)

Alt text goes here

Images with captions

Image captions aren't supported in standard Markdown so I've made an image-with-caption.html partial.

A yellow sticker with black text on a laptop
Co-op digital design principle sticker – We design for everyone
  include 'partials/image-with-caption.html'
  caption:"Co-op digital design principle sticker – We design for everyone"
  alt-text:"A yellow sticker with black text on a laptop"

SVG icons

Read more about SVGs in this blog post