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. It is useful to check typography and spacing after customizing the theme.

Headings

Heading level three

Paragraph text with bold, italic, a link and inline code. Body copy is set in Inter at a comfortable reading size, with headings in Golos Text.

Heading level four

A second paragraph to show the rhythm between blocks of text. Good typography is mostly about consistent spacing.

Lists

An unordered list item
Another item with a bit 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, used for short quotations inside the text.

An alternative blockquote, larger and centered, for pull quotes.

Images

A grey chaise beside a window — A standard width image. Photo by Roberto Nickson / Unsplash

Green field by a lake under a pale sky — A wide image. Photo by Pat Whelen / Unsplash

Layered mountain ranges at dusk — A full width image. Photo by Clarisse Meyer / Unsplash

Callout

💡

A callout card, useful for tips and side notes.

Toggle

Can I change the accent color?

Yes. The theme uses the accent color set in Settings > Design & branding.

Button

Code

.gz-card {
    border-radius: 14px;
    background: var(--gz-surface);
}

End of the styleguide.