Purchase

Styleguide

Every Ghost editor card, rendered by Kite.

Everything below is a standard Ghost editor card, rendered by the Kite theme. Use this page to check typography and card styles at a glance.


Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Text

A regular paragraph with bold text, italic text, bold italic, strikethrough, inline code and a link to the homepage. Good typography quietly does most of a theme’s work.

Lists

  • An unordered list item
  • Another one, slightly longer so you can check wrapping behavior on narrow screens
  • A third for rhythm
  1. First ordered item
  2. Second ordered item
  3. Third ordered item

Quotes

This is a regular blockquote. Perfect for pull-quotes, borrowed wisdom, and pretending someone famous said the thing you just thought of.
This is the alternate quote style — bigger, louder, for the line you want people to screenshot.

Images

Sunlight through a green valley
A regular-width image with a caption.
Mountain ridge at dusk
A wide image breaks out of the text column.

Callout

💡
Callout cards are great for asides, disclaimers, and the occasional hot take that deserves a colored box.
They come in several background colors — this one’s yellow.

Toggle

Click me — I’m a toggle card

Hidden content lives here. Handy for FAQs, spoilers, and gear lists nobody asked for but everybody scrolls to.

Button

Bookmark

Ghost — Independent technology for modern publishing
Turn your audience into a business. Publishing, memberships, subscriptions and newsletters — all in one place.

Product card

The perfect white tee

The product card, as used across the homepage sections of this theme.

Shop now

Header card

A header card

With a subheader, for big section breaks inside long posts.

Code

:root {
  --accent: #cbb4f0;
  --radius: 14px;
}

.card.hov:hover {
  transform: translate(-2px, -2px);
}
A code block with a caption.

Divider

And finally, the humble divider:


That’s the whole kit. If it looks good here, it looks good everywhere.