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 Caslon drop cap; pages like this one do not.

Headings

Heading level three

Paragraph text with bold, italic, a link and inline code. Headlines use Libre Caslon Display, standfirsts, quotes and captions Libre Caslon Text in italic, and body text Jost.

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

Hands covered in wet clay shaping the rim of a bowl — A standard width image. Photo by Anne Nygård / Unsplash

Tall coloured houses and a church on the seafront of a Ligurian town at dusk — A wide image. Photo by Chris Weiher / Unsplash

A viewing platform above a deep blue fjord between steep mountains — A full width image. Photo by Robert Bye / Unsplash

Callout

🌿

A callout card, for tips and side notes.

Toggle

Is there a dark scheme?

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

Button

Separator

The separator below is a thin line with a small ring.

Code

.eg-feed::before {
    left: 50%;
    width: 1px;
    background: var(--eg-label-ink);
}