Style Guide

Style Guide

Wide Image

Images work too! Already know the URL of the image you want to include in your article? Simply paste it in like this to make it show up:

mountain near trees under cloudy sky
Photo by Samuel Ferrara / Unsplash

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

Regular Images

landscape photography of brown mountain across water
Photo by Kym Ellis / Unsplash

Image Galleries

With the recent launch of Ghost 2.0, we introduced the ability to select from three different image widths in posts for single images, allowing for more creative visual direction in your posts. The addition of image galleries extends this even further with responsive galleries for up to 9 images at a time.

This is an H1

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis.

This is an H2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

This is an H4

Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis.

Quoting

“Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep.” ― Scott Adams

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.


Syntax Highlighter

#header h1 { 
    color: #fff;
    margin-bottom: 1.5em; 
}

.author-avatar {
    border-radius: 5px;
    display: block;
    height: 60px;   
    margin-right: 30px;
    width: 60px;
}
// Simple map
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Videos

This Mountain from Evan Mann / OWP Denver on Vimeo.

Tweet

If you wanted to embed a tweet directly into one of your Ghost posts, Ghost makes this very easy.

Audio

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar tincidunt turpis ac fringilla. Mauris eget dolor neque. Donec ac ex quis lectus sagittis vestibulum.

Unordered Lists

  • Donec non tortor in arcu mollis feugiat
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  • Donec id eros eget quam aliquam gravida
  • Vivamus convallis urna id felis
  • Nulla porta tempus sapien

Ordered Lists

  1. Donec non tortor in arcu mollis feugiat
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  3. Donec id eros eget quam aliquam gravida
  4. Vivamus convallis urna id felis
  5. Nulla porta tempus sapien

Tables

Mozilla Tables Demo
Content categories Flow content
Permitted content
In this order:
  • an optional <caption> element,
  • zero or more <colgroup> elements,
  • an optional <thead> element,
  • one of the two alternatives:
    • one <tfoot> element, followed by:
      • zero or more <tbody> elements,
      • or one or more <tr> elements,
    • a second alternative followed by an optional <tfoot> element:
      • either zero or more <tbody> elements,
      • or one or more <tr> elements
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements Any element that accepts flow content
Normative document HTML5, section 4.9.1 (HTML4.01, section 11.2.1)