Styleguide

Every content element supported by the theme, on a single page.

This page shows how the theme styles each element available in the Ghost editor. Posts open with a topaze drop cap; pages like this one do not.

Headings

Heading level three

Paragraph text with bold, italic, a link and inline code. Headings use DM Serif Display, standfirsts and quotes Instrument Serif italic, body text Libre Franklin.

Heading level four

A second paragraph to show the rhythm between blocks of text.

Lists

An unordered list item
Another item with more text, to show how lines wrap when the content is longer than a single line
A third item

An ordered list item
Second step
Third step

Quotes

A standard blockquote, for short quotations inside the text.

An alternative blockquote, centered, for pull quotes.

Images

A trumpet player at night — A standard width image. Photo by Chris Bair / Unsplash

Tiers of balconies and red curtains in the Vienna State Opera — A wide image. Photo by Valentin Karisch / Unsplash

The Pont Alexandre III lit up at night in Paris — A full width image. Photo by Léonard Cotte / Unsplash

Callout

✶

A callout card, for tips and side notes.

Toggle

Can I use the dark scheme?

Yes. Choose Dark as the default color scheme, or let readers switch with the toggle.

Button

Separator

The separator below is a short sunset line.

Code

.vs-horizon {
    height: 3px;
    background: var(--vs-horizon);
}