> ## Content Index
> Fetch the complete content index at: https://ghost.abuein.dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Kitchen sink: every Ghost card, styled by starter-kit
- URL: https://ghost.abuein.dev/kitchen-sink/
- Published: 2026-10-03T23:15:09.000Z
- Updated: 2026-10-03T23:15:09.000Z
- Description: A test page that uses every Ghost editor card and text style, so you can see how starter-kit handles each one.
- Author: Salaheddin AbuEin
- Tags: Starter Kit, #Test

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](https://ghost.org/?ref=ghost.abuein.dev), 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](https://ghost.org/?ref=ghost.abuein.dev)
  - 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](https://github.com/sabuein/ghost-themes?ref=ghost.abuein.dev)\]

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

## Bookmark

\[Bookmark card — paste: [https://ghost.org/docs/themes/](https://ghost.org/docs/themes/?ref=ghost.abuein.dev)\]

## 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\]

| Feature        | Supported |
| -------------- | --------- |
| Service worker | Yes       |
| Offline page   | Yes       |
| jQuery         | No        |

## 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.