Style guide

Typography

Body copy sets the baseline for everything else. A paragraph should be comfortable at the theme's content width, with a measure somewhere near sixty to seventy-five characters. This sentence exists to give the line length something to be judged against, and to show how an inline link, bold text, italic text and inline code sit inside running prose.

Third-level heading

Headings need enough space above them to read as a break rather than as a shouted line of the previous paragraph.

Fourth-level heading

Ghost's editor offers headings down to level four. A theme that styles only h2 and h3 leaves this one at the browser default.

An unordered list item
A second item, long enough to wrap onto a second line so the hanging indent is visible at the theme's content width
A third item

An ordered list item
A second item
A third item

A standard blockquote. Ghost also offers an alternate style, shown next.

The alternate blockquote, which Ghost styles as a large centred pull-quote.

function greet(name) {
  return `Hello, ${name}`;
}

Column	Another column	Value
First row	Some text	1
Second row	More text	2

Image cards

A wide image with a caption. Wide images break out past the content column.

Content cards

💡

An accent callout. Ghost offers nine colours — grey, white, blue, green, yellow, red, pink, purple and accent — and a theme should style every one.

📘

A blue callout, to check that the non-accent colours resolve too.

A collapsed toggle

Content that stays hidden until the heading is clicked. If this text is visible on load, the theme is missing the CSS rule that keys on data-kg-toggle-state.

An accent button

An outline button, left aligned