Sign in Subscribe
Style Guide

This is a new version of the same old thing

A demonstration of every content card available in the Ghost editor. Mostly

Catherine Sarisky

— 6 min read
Share
Style Guide
The Style Guide feature image

This post exercises every content card available in the Ghost editor, along with a full inline-formatting and typography sampler, so it can be used as a front-end theme test.

Typography

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Adipisicing velit dolor fugiat eu officia aliquip culpa eu culpa enim tempor. Amet reprehenderit reprehenderit ex quis ea laborum dolore voluptate deserunt elit. Irure occaecat cillum eiusmod anim ad adipisicing laborum voluptate dolore aliqua.

Inline formatting

This paragraph demonstrates bold, italic, bold italic, strikethrough, underline, inline code, highlighted, superscript, subscript, and a hyperlink.

Blockquotes

The way to get started is to quit talking and begin doing. — Walt Disney

No one should put two quotes immediately adjacent to each other. That's just weird, and it's going to mess up the wrapping on the first one, so here's some text to sort of pad things out, ok? Ok. Ok.

The only impossible journey is the one you never begin. — Tony Robbins

Lists

  • Unordered item with a link
  • Item with a nested list
    • Nested item one
    • Nested item two
  • Final top-level item
  1. First ordered item
  2. Second ordered item
  3. Third ordered item

Tables

Plan Price Best for
Free $0 Trying things out
Pro $9 Growing publications
Business $25 Teams & scale

Media

Regular width image
Regular (in-column) width
Wide image
Wide width
Full-bleed image
Full width
Linked image
This image links to ghost.org
A train on elevated tracks passes a modern building.
Photo by Colin Lloyd / Unsplash

A multi-row gallery of placeholder images

Audio

audio-thumbnail
Placeholder audio
0:00
/0

Video

0:00
/0:00

Placeholder video

File download

Placeholder document
A downloadable file card
placeholder.txt
53 Bytes
download-circle

Cards

Header cards

Accent header - small

Using the theme accent colour

Join

Dark header - medium

A full-width header card with a button

Get started

Light header - full

The same card on a light background

Subscribe

Header with background image

Text over a hosted background image - this one is full width

Read more

Split header with cover image

Hello hello hello

Split header with contain image

Hello hello hello

Split header with cover image

Hello hello hello

Hi world

Callouts

💡
Grey callout — Cillum elit magna non qui ad ullamco sint cupidatat.
💡
White callout — Esse dolore laborum esse ullamco eu magna reprehenderit.
💡
Blue callout — Id qui fugiat duis minim sit aute aliquip fugiat incididunt elit Lorem commodo in enim.
💡
Green callout — Reprehenderit quis pariatur amet nulla veniam qui.
💡
Yellow callout — Minim amet incididunt sint qui qui dolor consectetur adipisicing eiusmod voluptate.
💡
Red callout — Est aute ad sit dolor laboris.
💡
Pink callout — Tempor velit ipsum reprehenderit aute aliquip nostrud commodo sunt fugiat enim do tempor.
💡
Purple callout — Non aliquip sunt sit reprehenderit exercitation proident sint esse velit anim excepteur duis laborum.
Callout with no emoji — Do reprehenderit minim tempor labore occaecat laboris officia adipisicing.

Toggles

When should I use toggles?

Dolor ex mollit non nisi tempor dolor amet occaecat laboris. Tempor laborum do elit reprehenderit.

Where can I take Ghost for a spin?

Aliquip nulla eu ut pariatur ipsum ut. Exercitation tempor tempor magna non excepteur pariatur sunt nisi elit eiusmod ullamco eu.

Bookmark

Ghost - The Professional Publishing Platform
The best open source blog & newsletter platform. Beautiful, contemporary themes for publishers, creators and businesses.
GhostGhost Foundation

Buttons

Centered button
Left-aligned button

Product

Placeholder Product

Enim velit magna ad eu elit do ad culpa aliqua est quis. Consectetur in cupidatat sint reprehenderit in est aute aliquip nulla proident.

Buy now

Placeholder Product

Enim velit magna ad eu elit do ad culpa aliqua est quis. Consectetur in cupidatat sint reprehenderit in est aute aliquip nulla proident.

Signup

Embed

An embedded YouTube video

Code block

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Ghost'));

A JavaScript snippet

Call to action

SPONSORED

Nulla esse id ad nostrud ipsum officia consequat.

Learn more
CTA Image

Nulla esse id ad nostrud ipsum officia consequat.

Learn more
SPONSORED
CTA Image

Nulla esse id ad nostrud ipsum officia consequat. Nulla esse id ad nostrud ipsum officia consequat.Nulla esse id ad nostrud ipsum officia consequat.

Nulla esse id ad nostrud ipsum officia consequat.Nulla esse id ad nostrud ipsum officia consequat.Nulla esse id ad nostrud ipsum officia consequat.

Learn more

Markdown

You can also write in Markdown, with emphasis, code, and links.

HTML

Custom HTML card content.

Email-only cards

The following two cards render only in email newsletters and are not visible on the website.

Structural & edge cases

Dividers

Nulla in ut eu commodo. Velit et in sunt consectetur commodo officia labore.

Ad cillum cupidatat magna pariatur consectetur enim dolor deserunt consectetur ad est labore do exercitation. Mollit nisi ut labore aliqua dolore duis cupidatat labore non Lorem anim.

A deliberately long heading that should wrap gracefully across multiple lines on narrow viewports without breaking the layout

Supercalifragilisticexpialidocious-pneumonoultramicroscopicsilicovolcanoconiosis-antidisestablishmentarianism

Public preview / paywall

Ut cupidatat dolore proident sint. Dolore enim officia amet cupidatat aute eiusmod culpa anim dolor irure reprehenderit incididunt.

Read more