Style Guide

Style Guide

Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators

Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do.


Headers

Make a statement with bold section headers in your posts and pages. Insert a header card to add a full width divider that can include a title, subheading, accent color or image background, and a button.

Build your audience

We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.

Get Kutak

Build your audience

We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.

Get Kutak

Build your audience

We've crammed the most important information to help you get started with Ghost into this one post. It's your cheat-sheet to get started, and your shortcut to advanced features.

Get Kutak

Quotes

You can make quotes stand out with two types of blockquote styles that can be applied directly in the editor.

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

Buttons

Bookmarks

When using a URL with the right meta information, it can show the page title, excerpt, author, publisher and even a preview image. This is a great way to share links from sites that don't have automatic embeds.

Ghost Themes - The Marketplace
Discover beautiful professional themes for the Ghost publishing platform. Custom templates for magazines, blogs, news websites, content marketing & more!

File

Upload different file types that will become available for download.

Audio

It's 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. Music by Zen_Man from Pixabay.

audio-thumbnail
Background Loop Staright #03
0:00
/0:08

Videos

Embed videos from platforms like YouTube and Vimeo, or you can now upload videos to your content in Ghost. Once uploaded, your video content renders in a beautiful video player. Videos can be set to loop, have their own custom thumbnails, and display in three different widths using the editor toolbar.

0:00
/
Video by Rostislav Uzunov / Pexels

Embeds

Images

Once you start mixing text and image cards creatively, the whole narrative of the story changes. Suddenly, you're working in a new format.

Normal width

Photo by Amy Shamblen / Unsplash

Wide width

Photo by Tengyart / Unsplash

Full width

Photo by Rodion Kutsaiev / Unsplash

As it turns out, sometimes pictures and a thousand words go together really well. Telling people a great story often has much more impact if they can feel, even for a moment, as though they were right there with you.

Highlighting

Highlighting text on a web page 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 Markdown card

Lists

Our main focus in building the Ghost editor is to try and make as many things that you hope/expect might work: actually work.

  • You can copy and paste raw content from web pages, and Ghost will do its best to correctly preserve the formatting.
  • Pasting an image from your clipboard will upload inline.
  • Pasting a social media URL will automatically create an embed.
  • Highlight a word in the editor and paste a URL from your clipboard on top: Ghost will turn it into a link.
  • You can also paste (or write!) Markdown and Ghost will usually be able to auto-convert it into fully editable, formatted content.
  1. You can copy and paste raw content from web pages, and Ghost will do its best to correctly preserve the formatting.
  2. Pasting an image from your clipboard will upload inline.
  3. Pasting a social media URL will automatically create an embed.
  4. Highlight a word in the editor and paste a URL from your clipboard on top: Ghost will turn it into a link.
  5. You can also paste (or write!) Markdown and Ghost will usually be able to auto-convert it into fully editable, formatted content.

Toggles

Use the Toggle card 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.

Callouts

Ever find yourself wanting to add extra styling to important information in your posts? Well, now you can with callout cards. Each callout card can include an emoji, any length of text with styles and links, and a custom background color.

💡
Check out our library of resources to help you grow your audience, and build an independent subscription business.
🖖
Check out our library of resources to help you grow your audience, and build an independent subscription business.
👋
Check out our library of resources to help you grow your audience, and build an independent subscription business.

Products

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

Kutak - Ghost Theme

Beautifully minimal, content focused. Made for readability to offer readers the best reading experience.

Purchase $79

Code

Code can be presented inline, like <code>. When creating a code text, all you need to do is add a ` before and  after your text. In the editor ``` (three backticks) defines a code block.

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