Styleguide
Every element the theme styles, in one place.
Every block below is a native Ghost element, styled by the theme. Open this page in the editor to see how each one is built.
Headers
Headings carry the structure of a story. The article rail builds its contents list from every H2 on the page.
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Text
Body copy carries bold and italic emphasis, inline code, and links that pick up the accent colour.
Quotes
A quote sits against a rule, sized to read as a break in the argument rather than another paragraph.
A free press is the backbone of an informed public, and independent journalism is how that promise is kept.
The alternative style centres the quote and lets it carry its own marks.
Good journalism asks the questions others would rather avoid.
Lists
- Unordered lists take a square marker in the accent colour
- Items wrap against a hanging indent
- Spacing matches the body rhythm
- Numbered lists share the same measure
- The counter sits outside the text column
- Long items stay aligned
Tables
Tables come through an HTML card, and scroll inside their own container when a narrow screen cannot hold them.
| Desk | Editor | Stories |
|---|---|---|
| Cities | Mara Voss | 18 |
| Business | Nadia Cole | 12 |
| Culture | Lucia Marin | 9 |
Images
A gallery groups images into rows. Clicking one opens the lightbox scoped to that gallery, with arrows, keyboard control and swipe.
Callouts
A callout carries an aside that should not interrupt the sentence around it. Ghost offers a background colour for each one.
Toggles
A toggle hides detail until it is asked for
Useful for methodology notes, long caveats, or the full text of a quote that would otherwise break the flow of a story.
Several can sit together as a short FAQ
Each one opens on its own, so a reader can take only the part they came for.
Bookmarks
Audio
An audio card plays an uploaded file in the reader’s own player.
Files
A file card offers a download without sending the reader anywhere else.
Buttons and embeds
Code
Code blocks are highlighted by the theme, in whichever colour mode the reader is using.
{{#post}}
<h1 class="headline">{{title}}</h1>
{{content}}
{{/post}}.gh-content pre {
background: var(--muted);
color: var(--foreground);
}