This page shows every block in Ghost’s editor, styled by Stretch. Use it as a reference while you write, or to check how your content will look before you publish.
Typography
Headings use Playfair Display, body text uses Montserrat. Use one H1 per page (your title) and H2–H4 to structure a post.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs and inline styles
Good travel writing is specific. Instead of “cheap food”, name the stall, the price and the time it opens. Readers trust details they can check, and they come back for writers who give them.
Bold, italic, bold italic, underline, strikethrough, highlighted text, inline code, H2O and E = mc2.
Links look like this inline link, and they stay readable inside longer sentences.
Lists
Unordered list
- Book trains two weeks ahead
- Eat where the queue is local
- Carry a little cash for markets
Ordered list
- Pick the season
- Set a daily budget
- Plan one paid highlight per city
Nested list
- Vietnam
- Hanoi
- Hoi An
- Ho Chi Minh City
- Portugal
- Lisbon
- Porto
Quotes
Ghost has two quote styles. Press the quote button once for a standard quote and twice for the alternative style.
The cheapest trip is the one you plan around the season, not the sale.
Travel slower, spend less, see more.
Divider
A divider separates sections without a heading.
The text after a divider starts a new thought.
Images
Images come in three widths: regular, wide and full.
Gallery
Galleries hold up to nine images and arrange them in rows.
Video
Uploaded videos play inline and can be regular, wide or full width.
Audio
File
Embeds
Paste a link from YouTube, Vimeo, Spotify, X and many other services.
just setting up my twttr
— jack (@jack) March 21, 2006
Callouts
Callouts highlight a tip, a warning or a summary. Each colour can have an emoji or none.
Toggles
Toggles hide extra detail until the reader opens them. They work well for FAQs.
When is the cheapest time to visit Japan?
Late January to early March, outside the Lunar New Year week. Flights and hotels both drop.
Do I need cash in Vietnam?
Yes, for markets and street food. Cards work in hotels and most restaurants in the cities.
Buttons
Bookmarks
A bookmark turns a link into a preview card with title, description and image.
Products
Travel backpack, 30 litres
Fits under an airline seat and still takes a week of clothes.
Call to action
Calls to action promote a newsletter, a product or a sponsor.
Get Stretch — the editorial Ghost theme behind this demo.
This guide is sponsored by a travel insurance partner. Get 10% off your first policy.
Join 12,000 budget travellers who get the weekly deals email.
Header cards
Headers start a new section with a big title, a subtitle and a button.
Signup
Signup cards let readers subscribe without leaving the post.
Code
Inline code looks like npm run build. Code blocks keep their formatting:
.gh-content {
max-width: var(--reading);
margin-inline: auto;
}const budget = (days, perDay) => days * perDay;
console.log(budget(14, 45)); // 630<a class="kg-btn kg-btn-accent" href="#/portal/signup">Subscribe</a>Tables
Add tables with a Markdown or HTML card. Wide tables scroll sideways on small screens.
| City | Bed | Food | Transport | Daily total |
|---|---|---|---|---|
| Hanoi | €12 | €10 | €4 | €26 |
| Lisbon | €35 | €25 | €8 | €68 |
| Tokyo | €45 | €20 | €12 | €77 |
| Mexico City | €25 | €12 | €5 | €42 |
Markdown
Markdown cards are handy for pasting from other tools.
- Bold, italic and
code - A link
A quote written in Markdown.
HTML
HTML cards let you add custom markup.
This line is centred with a little inline HTML.
Transistor
The Transistor card shows a member’s private podcast feeds. It only appears to logged-in members, so it is empty on this page for visitors.