Style Guide

Ghost has a powerful visual editor with familiar formatting options, as well as the ability to seamlessly add dynamic content.

Headings

When creating a header, all you need to do is add a # before your header or use the contextual toolbar. You can keep adding up to six # in a row to make the headers smaller.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


If you paste in a URL, like https://ghost.org - it'll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here's a link to the Ghost website.



Buttons

Add call to action buttons to your posts using button cards. Buttons can be center or left aligned, include custom button text, and link to any URL.



Quoting

If you want to add a quote, you just need to add a > to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.

Minimal Quote

Ghost is a fully open source, adaptable platform for building and running a modern online publication. We power blogs, magazines and journalists from Zappos to Sky News.

Bold Quote

The only impossible journey is the one you never begin — Tony Robbins


Bookmarks

With the Bookmark card you can present links in a much richer format. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.

macOS Big Sur Preview
macOS Big Sur elevates Mac to a new level of power and beauty with a refined new design, major app updates, and more transparency around your privacy.


Audio

It's now possible to upload audio files directly to your posts!
This means you can share audio content with your audience, with a beautiful media player that nests into your posts and emails seamlessly.

audio-thumbnail
Jingle Bells
0:00
/2:32


File Uploads

Following audio and video cards, now you can add downloadable files to your posts in Ghost. File uploads can be used to share multiple types of content with your audience. Files display in your content with a custom name and caption, like this:



Headers

Add visual headers to your content to create bold, attention-grabbing section headers.

Buy Firma Now

Modern and beautiful multipurpose Ghost theme for business and startups.

Buy Firma


Images

You can upload images using the Image card. Once inserted you can display images beautifully into your content at different sizes (normal, full, and wide) and add captions if needed.

Normal Format

Gaining a deep understanding the problems that customers face is how you build products that provide value and grow. It all starts with a conversation. You have to let go of your assumptions so you can listen with an open mind and understand what’s actually important to them. That way you can build something that makes their life better. Something they actually want to buy.
Photo by Headway / Unsplash

Full Format

I saw some palm trees. I took a picture.
Photo by Corey Agopian / Unsplash

Wide Format

An iPhone with dark wallpaper and a black headphone.
Photo by Ryan Yao / Unsplash

Ghost supports image galleries for up to 9 images at a time, all of which are responsively optimised and organised to look their best no matter how many images you add or remove.

GIFs

If a picture is worth a thousand words then a GIF is worth a thousand pictures. Express yourself with moving cats and talking dogs in Ghost.



Video

As a follow up from audio cards, you can now upload videos to your content in Ghost. Once uploaded, your video content renders in a beautiful video player:

0:00
/


Embed



Product Cards

Display products beautifully with custom content including an image, description, button or rating, so you can add your favorite recommendations to any post.

Shield Women's Trail Running Jacket

The Nike Shield Jacket has a water-resistant design to keep you dry, and tons of pockets to hold your essentials.

$71.97 on Nike


NFT Cards

Ghost just got a new embed. Just like when you share links from YouTube, Soundcloud, and Spotify, OpenSea links now get a beautiful card to make it easier for you to showcase your digital art.



Callouts

Ever find yourself wanting to add extra styling to important information in your posts? Well, now you can with callout cards.

💡
Check out our library of resources to help you grow your audience, and build an independent subscription business.
👻
Each callout card can include an emoji, any length of text with styles and links, and a custom background colour.


Toggles

Use the new Toggle cards to create collapsible sections of text in your posts and pages. Great for creating distinct sections in your content, or adding an FAQ section.

When should I use Toggles?

Toggles allow you to create collapsible sections of content which is a great way to make your content less overwhelming and easy to navigate. A common example is an FAQ section, like this one.

Where can I take Ghost for a spin?

Start a free 14-day trial here. You won't be billed at the end, and you'll have access to all features.



List Types

Unordered list

  • Item number one
  • Item number two
    • Nested item one
    • Nested item two
  • Item number three

Ordered list

  1. Item number one
  2. Item number two
    1. Nested item one
    2. Nested item two
  3. Item number three


Highlighting

Highlighting text can help bring important information immediately to the reader's attention. When creating a highlighting text, all you need to do is add a == before and after your text in a Markdown card.



Tables

This theme supports responsive tables that will display a horizontal scroll bar if the screen is too small to display the full content.

# Heading Heading Heading Heading
1 Cell Cell Cell Cell
2 Cell Cell Cell Cell
3 Cell Cell Cell Cell
4 Cell Cell Cell Cell
5 Cell Cell Cell Cell


Code

If you’re a technical writer, you may want to use example snippets of code to teach your readers a particular syntax. Using a single backtick (`) around a word in a sentence, you can show a quick code snippet. three backticks (```) will turn an entire paragraph into a code block.

.awesome-thing {
  display: block;
  width: 100%;
}


Forms








Spread the word