Become a member

Style Guide

Every editor card this theme styles, on one page.

On this page

    Every block the Ghost editor can produce, on one page. Write with anything below — the theme has it covered.

    Text

    Paragraphs carry the reading rhythm. Bold, italics, links and inline code are set inline; everything else on this page is a card.

    Bold pulls weight, italics lean in, and inline code sits in a chip.

    • Bulleted lists get accent markers
    • Keep items parallel in shape
    • Three is a good number
    A quote card: one strong sentence beats three careful ones.
    The alternate quote stands centered, for the line the whole piece hangs on.

    Images

    A regular image sits inside the measure.
    A regular image sits inside the measure.
    A wide image steps out of the column.
    A wide image steps out of the column.
    A full-bleed image owns the viewport.
    A full-bleed image owns the viewport.
    A gallery packs a row.

    Callouts

    💡
    The default callout carries a tip worth stopping for.
    ⚠️
    The red callout warns before the step that bites.
    🚀
    The accent callout announces something shipped.

    Interactive

    A toggle hides the long answer

    Readers who need the detail open it; everyone else keeps their place. Perfect for FAQs and asides that would break the flow.

    A button card
    Ghost: The best open source blog & newsletter platform
    Beautiful, modern publishing with email newsletters and paid subscriptions built-in.
    Ghost

    Media

    An embed card — paste a URL, get a player.
    public with sharing class Greeter {
    public static String greet(String name) {
        return 'Namaste, ' + name + '!';
    }
}
    A code card with a language.
    Helper Does
    {{#get}} Queries the API
    {{#match}} Compares values
    {{#foreach}} Iterates with @first/@last

    An HTML card renders exactly what you give it.

    Big furniture

    A header card breaks the page

    Use one to open a chapter or close with a call to action.

    Browse courses

    Flow Automation Masterclass

    The product card sells one thing: image, stars, pitch, button.
    Start learning

    That is the whole vocabulary. If a card renders oddly, fix the theme — never the content.