Kitchen sink: every Ghost card, styled by starter-kit

This post exists to test the theme. It uses every card and text style the Ghost editor offers, so if anything looks wrong here, it's a theme bug.

Text formatting

A paragraph with bold, italic, bold italic, strikethrough, inline code, a link to Ghost, highlighted text (select it, then use the highlight button), and superscript like E = mc². This sentence is long on purpose, so you can check the line length, line height and how the text wraps on a narrow phone screen at the default size.

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Lists

• An unordered item
• A second item with a link
  • A nested item (press Tab)
• A third item

1. An ordered item
2. A second ordered item
3. A third ordered item

Quotes

[Quote — press the quote button once]
Simplicity is prerequisite for reliability. — Edsger W. Dijkstra

[Quote — press the quote button twice for the alternative style]
Make it work, make it right, make it fast. — Kent Beck

Code

[Code card — language: javascript]
const registerWorker = async () => {
if (!("serviceWorker" in navigator)) return;
await navigator.serviceWorker.register("/sw.js", { scope: "/" });
};
registerWorker();

[Code card — language: css, with a caption: "A CSS code block with a caption"]
.kg-embed-card iframe {
aspect-ratio: 16 / 9;
inline-size: 100%;
block-size: auto;
}

Images

[Image card — regular width, caption: "Regular width image with a caption", alt text filled in]

[Image card — wide width, caption: "Wide image"]

[Image card — full width, caption: "Full-width image"]

[Image card — a tall portrait photo, no caption]

Gallery

[Gallery card — 6 images of mixed sizes (landscape and portrait), caption: "A gallery of six images"]

Divider

[Divider card]

Callouts

[Callout card — emoji 💡, grey background]
A callout using the default grey background.

[Callout card — emoji ⚠️, accent colour background]
A callout using the accent colour. Check the text contrast against your accent colour.

[Callout card — no emoji, white background]
A callout without an emoji.

Toggle

[Toggle card]
Heading: What is starter-kit?
Content: A vanilla HTML, CSS and JavaScript Ghost theme, built as a progressive web app, that I use as the base for new themes.

[Toggle card]
Heading: Does it use jQuery?
Content: No. No frameworks, no jQuery, no build step required to run it.

Buttons

[Button card — left-aligned, text: "Read the source", link: https://github.com/sabuein/ghost-themes]

[Button card — centred, text: "Subscribe", link: #/portal/signup]

Bookmark

[Bookmark card — paste: https://ghost.org/docs/themes/]

Embeds

[YouTube embed — any video]

[Embed — paste a CodePen or a Vimeo link]

Video, audio and file

[Video card — a short MP4 upload, with a caption]

[Audio card — a short MP3 upload]

[File card — a small PDF, title: "Sample PDF", description: "Tests the file card"]

Product

[Product card — image, title "starter-kit", rating 5 stars, description "A PWA-ready Ghost theme starter", button "View on GitHub" linking to the repo]

Header

[Header card — size large, dark style, heading: "Header card", subheading: "Tests large text on a background", button: "Learn more"]

[Header card — size small, light/accent style]

HTML

[HTML card]

Native details element from an HTML card

Theme styles should apply here as well.

Markdown

[Markdown card]

Signup

[Signup card — layout split, with an image, heading: "Get new posts by email", button: "Subscribe"]

The end

If everything above looks right in light mode, dark mode, on a phone and on a wide screen, the theme is ready for release.