The Style Guide provides you with a set of standards for the writing and design of theme posts and pages, either for general use or for a specific publication, organization, or field.

Images

This theme supports regular image with or without caption, wide images with or without caption and full-width images with or without the caption. The examples provided below.

Concrete roads — This regular image with caption

One neat trick which you can use in Markdown to distinguish between different types of images is to add a #hash value to the end of the source URL, and then target images containing the hash with special styling. For example, to add a wider image, you need to add the #wide value to the end of the source URL.

Align Left

Fog circling above snowy mountains leading down to Iceberg lake surrounded by trees

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.

Align Right

Snow-covered mountains shrouded in mist and clouds

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.

Sidenotes

SidenotesThis is a sidenote and displays a superscript display a superscript. The sidenote Liquid tag contains two components. The first is an identifier allowing the sidenote to be targeted by the twitchy index fingers of mobile device users so that all the yummy sidenote goodness is revealed when the superscript is tapped. The second components is the actual content of the sidenote. Both of these components should be enclosed in single quotes. Note that we are using the CSSThis is a second sidenote and displays a superscript ‘counter’ trick to automagically keep track of the number sequence on each page or post. On small screens, the sidenotes disappear and when the superscript is clicked, a side note will open below the content, which can then be closed with a similar click. Here is the markup for the sidenote at the beginning of this paragraph:

{% sidenote 'sn-id-whatever' 'This is a sidenote and *displays a superscript*'%}

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

This is an H4

Quoting

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

Align Left

“Clients don’t understand their success is reliant on standing out, not fitting in.” ― Don Draper

Quotations are used for a variety of reasons: to illuminate the meaning or to support the arguments of the work in which it is being quoted, to provide direct information about the work being quoted (whether in order to discuss it, positively or negatively), to pay homage to the original work or author, to make the user of the quotation seem well-read, and/or to comply with copyright law. Quotations are also commonly printed as a means of inspiration and to invoke philosophical thoughts from the reader.

Align Right

“To create a memorable design you need to start with a thought that’s worth remembering.” ― Thomas Manss

Simple Code Block

// Simple map
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Code blocks, highlighted with Prism.js

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Prism</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<header>
		<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
		<ul id="features">
			<li>Dead simple</li>
			<li>Light as a feather</li>
			<li>Extensible</li>
		</ul>
	</header>
	<section id="features-full" class="language-markup">
		<h1>Full list of features</h1>
		<ul>
			<li><strong>Only 2KB</strong> minified & gzipped (core). Each language definition adds roughly 300-500 bytes.</li>
			<li>Very easy to extend without modifying the code, due to Prism’s <a href="#plugins">plugin architecture</a>. Multiple hooks are scattered throughout the source.</li>
			<li>Very easy to <a href="extending.html#language-definitions">define new languages</a>. Only thing you need is a good understanding of regular expressions</li>
		</ul>
	</section>
	<footer data-src="templates/footer.html" data-type="text/html"></footer>
</body>
</html>

var Token = _.Token = function(type, content, alias, matchedStr, greedy) {
	this.type = type;
	this.content = content;
	this.alias = alias;
	// Copy of the full string this token was created from
	this.length = (matchedStr || "").length|0;
	this.greedy = !!greedy;
};

@import url(http://fonts.googleapis.com/css?family=Arvo);

/* Styles */

body {
	font: 100%/1.5 Questrial, sans-serif;
	tab-size: 4;
	hyphens: auto;
}

a {
	color: inherit;
}

section h1 {
	font-size: 250%;
}

section h1,
#features li strong,
header h2,
footer p {
	font: 100% Rockwell, Arvo, serif;
}

Lists

Unordered Lists

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

Usage notes:

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared.
There is no limitation to the depth and alternation of nested lists defined with the <ol> and <ul> elements.
The <ol> and <ul> elements both represent a list of items. They differ in that, with the <ol> element, the order is meaningful.

Ordered Lists

The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list.

Usage notes:

Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets.
There is no limitation to the depth and alternation of nested lists defined with the <ol> and <ul> elements.
The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful.

Footnotes

The quick brown fox¹ jumped over the lazy dog².

Footnotes are a great way to add additional contextual details when appropriate. Ghost will automatically add footnote content to the very end of your post.

Tables

Table Caption
Content categories	Flow content
Permitted content	An optional `<caption>` element; zero or more `<colgroup>` elements; an optional `<thead>` element; an optional `<tfoot>` element;
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)

Videos

This Mountain from Evan Mann / OWP Denver on Vimeo.

Audio

Foxes are red ↩
Dogs are usually not red ↩

Images

Align Left

Align Right

Sidenotes

This is an H1

This is an H2

This is an H3

This is an H4

Quoting

Align Left

Align Right

Simple Code Block

Code blocks, highlighted with Prism.js

Lists

Unordered Lists

Ordered Lists

Footnotes

Tables

Videos

Audio

Search