Ghost Editor Showcase: Native Koenig Cards Gallery

Welcome to the official content showcase. Below, we render every native Ghost card to demonstrate how the typography, layouts, padding, and dark-mode states translate on the frontend.

1. Embeds & Media Cards

Below is a standard Bookmark card, representing external links with images and metadata:

Ghost: The professional publishing platform

The world’s most popular open source headless CMS for independent publishers. Professional technology to build, share and grow.

Ghost

Here is a native File card layout, designed for documents and downloadable assets:

Audio content is supported with full playback controls in the audio card:

For cinematic features, the wide Video card offers custom player layouts:

A premium high-definition video container embedded natively.

2. Interactive Cards

Products can be featured inline with ratings, descriptions, and purchase calls-to-action:

Postline E-Ink Reader

Our custom hardware edition, tailored specifically for long-form editorial content. Designed for high visibility and low eye strain.

Order Now ($299)

Standardized inline buttons can be placed center, left, or right-aligned:

Toggles are perfect for collapsible content like FAQs or technical notes:

3. Visuals & Layout

An image gallery layout handles up to nine images dynamically with custom aspect ratios:

Standard wide images extend beautifully past the text width boundaries:

Here is an example of a full-width image card that spans the entire viewport of the screen:

4. Code, Tables & Elements

Below is a clean pre-formatted code block featuring styling for syntax highlighting:

import { GhostTheme } from 'postline';

const publication = new GhostTheme({
  style: 'asymmetrical-editorial',
  typography: 'serif',
  features: ['lightbox', 'code-copy', 'scroll-to-top']
});

publication.launch();

Tables display clean spacing, bordered rows, and bold header alignments:

Native Koenig editor supportsinline highlightsto emphasize specific words or phrases directly within a text block.

HTML cards allow inserting arbitrary raw HTML elements on the page:

This is a custom HTML block card containing standard HTML tags.