Style guide
Every editor card, styled by the theme.
This page shows every kind of content the Ghost editor can make, styled by the theme. Use it to check your fonts, colours and spacing after you change the brand settings in Settings → Design & branding.
Headings and text
Body text is set for long reading. It supports bold, italic, links, and inline code. Paragraphs have generous spacing so a 2,000-word essay stays comfortable to read on a phone.
A third-level heading
Use third-level headings to break long sections into smaller parts. They sit closer to the text that follows.
- Unordered lists are good for loose collections
- Each item can wrap onto a second line when the text is long enough to need it
- Keep items parallel in shape
- Ordered lists suit steps
- The numbers use the theme's accent colour
- Nested ideas are better as separate paragraphs
A quote stands out from the text around it. Use it for a line worth pausing on.
The editor
💡
A callout card highlights a tip, a warning or a short aside without breaking the reading flow.
📌
This callout uses the accent colour. Change the accent colour in Design & branding and it follows.
What is a toggle card?
A toggle card hides its answer until the reader opens it. It is ideal for FAQs, spoilers and long footnotes.
Can I put more than one?
Yes. Stack as many as you like; each opens on its own.
/* Code blocks keep their formatting */
:root { --accent: #ff4f2b; }
That is everything. Happy publishing.
Tables
| Card | Use it for | Width |
|---|---|---|
| Image | A single photo with a caption | Normal, wide or full |
| Gallery | Two to nine photos in rows | Wide |
| Callout | A tip or an aside | Normal |
| Toggle | Questions and answers | Normal |