Style Guide

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.



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.

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.


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.

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.


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.

Welcome
Photo by Henry & Co. / Unsplash
Sunday Strolls
Photo by Matthew Bennett / Unsplash
Photo by Derek Thomson / 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.



Video



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


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%;
}