Style guide

Examples of what you can achieve with the Ghost editor and how the Maple pages are designed.

The editor lets you format text and add other elements such as images, galleries, quotes, links, callouts and more.

Headings

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Callouts

A way of exposing a portion of the text in color and including an emoji alongside it.

💡

This is a grey callout with a light bulb.

💯

But you can also change its color and emoji.

Or change its color and remove

Links and bookmark cards

If you paste a link in form of a text or directly into an editor, it will automatically embed it like this:

Quotes

Highlight some text and convert it into a blockquote:

I've missed more than 9000 shots in my career. I've lost almost 300 games. 26 times, I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed. - Michael Jordan

Or, if you really want to expose a quote:

I can accept failure, everyone fails at something. But I can't accept not trying. - Michael Jordan

Images

This is the base style of an image:

Or, you can create a wider image...

Or choose a full-width one...

For more images, you can also create a gallery of a maximum of 9 images.

Headers

This is a header

Add a nice subtitle here. You can configure its size, color and even add a button.

Try Ghost

Toggles

What are toggles?

They are a piece of collapsible content. For example, they are perfect for FAQs.

Products

iPhone

A product from apple.

Buy now

Files

You can upload files directly to Ghost. These can either be in audio or video format, but you can also upload PDFs and anything you like.

Video

You can also easily embed a Youtube video:

Code

You can also embed code. Type ```+ space and a code block should appear.

.ghost-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}