Design doc

This design doc is here for me to review how styles look on this site.

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

  1. Ordered list.
  2. Ordered list.
  3. Ordered list.
  4. Ordered list.

Callout box without title. Some text goes here.

Callout box without title. Some text goes here.

A div goes here.
A second div goes here.
  • Item one.
  • Item two.
  • Item three.
We're gonna end with...
two divs!
Callout box with title.

Some text goes here.

Some text goes here.

A div goes here.
A second div goes here.
  • Item one.
  • Item two.
  • Item three.
We're gonna end with...
two divs!

Images and figures

A caption to one image.

A caption to one image.

Two images with one caption beneath them.Two images with one caption beneath them.

Two images with one caption beneath them.

I'm over here!

I'm over here!

And then some text to go alongside a marginal image, I guess?

Buttons and button groups

Buttons can either exist on their own, or be grouped together in `.button-group` divs. They are centred and coloured according to our accent colours.

Buttons get a title, subtitle, and icon. They only need a title, the other two parts are optional. If they just have a title, they don't need any child elements. If they have a subtitle or icon, we need to class the child elements with `.button-title`, `.button-caption`, and `.button-icon`.

Individual buttons.

Button with a title

Button with a title and a captionHere is the caption

Button with a title and an icon

Button with a title, icon, and captionHere is the caption

Button groups

Code

This paragraph contains some inline code, and some longer inline code here I guess, let's make it nice and long so it goes over a line break most of the time, and some more content to ensure it does that. Note that we can't do inline syntax-highlighted code right yet.

Here's some un-syntax-highlighted block code:

Something goes here I guess.

And some syntax highlighted code:

const j = 3;
const k = 4; // Comments!