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
Content cards
Ghost theme documentation
Everything about building a Ghost theme, from Handlebars helpers to the structure of a theme package.
💡
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.
Media cards
Membership cards
Sponsored
A call-to-action card with an image and a sponsor label.
Learn more
