Style Guide

Ghost has a powerful visual editor with familiar formatting options, as well as the ability to seamlessly add dynamic content. Galerie supports all content and formatting options and also implements additional styles and useful capabilities.

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.

Slack is where the future works
Slack is a new way to communicate with your team. It’s faster, better organised and more secure than email.


Images

Ghost supports three types of image formats: Normal, Wide and Full Size. Additionally Galerie supports an additional format: Floating. By default when you click on an image it will be displayed in a lightbox.

Normal Format

Providence College, Providence, United States. Free to use under the Unsplash License.

Wide Format

Photo by Ryan Yao / Unsplash

Full Format

Photo by Chase Yi / Unsplash

Float Format

The Unsplash library just recently passed 3 billion downloads. That’s 3 billion articles, blog posts, presentations, wallpapers, school projects, social media, and art made better because of Unsplash photos. This has been a huge undertaking from our team that involved building our own visual matching technology powered by machine learning, our own web crawler (ala Google), and a completely revised image stats system to better understand placement and context.

In your stats area you’ll find a new section called ‘Uses’ that contains information and links to some of the notable public places that your images have been used. At the timing of writing, we’ve only crawled a tiny portion of the internet, but we’ve already found over 100,000 matching uses.



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

In the editor it is possible to insert videos from platforms such as Youtube or Vimeo, the videos you insert will adapt perfectly to the device on which they are displayed while maintaining the appropriate aspect ratio.



List Types

This theme includes styles for both unordered and ordered lists, it also supports nested lists.

Unordered list

  • Lorem Ipsum is simply dummy text
  • Lorem Ipsum has been the industry's standard dummy text ever since
    • It has survived not only five centuries
    • It was popularised in the 1960s
  • It is a long established fact that a reader will be distracted by

Ordered list

  1. Contrary to popular belief, Lorem Ipsum is not simply random text
  2. It has roots in a piece of classical Latin literatur
    1. The standard chunk of Lorem Ipsum
    2. The point of using Lorem Ipsum
  3. Various versions have evolved over the years


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 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

It is also possible to insert form elements using the HTML card, Galerie includes styles for text fields, select fields, checkboxes, textareas and radio buttons.








Subscribe to our Newsletter and stay up to date!

Subscribe to our newsletter for the latest news and work updates straight to your inbox.

Oops! There was an error sending the email, please try again.

Awesome! Now check your inbox and click the link to confirm your subscription.