Blocks

Discover the full styling potential of this Ghost theme through detailed examples of typography, content blocks, and visual design elements.

Smart links

Smart link handling with auto-detected affiliate tags, visual indicators, and live hover previews.

• Affiliate link: Ghost
• Internal link: Curated pages with TanaFlows
• External link: bePublish

Table

Standard Markdown tables styled automatically with horizontal scrolling and crisp typography—ideal for data comparisons and matrices.

| Item | Category | Qty | Unit Price | Status |
| :--- | :--- | :---: | :---: | :---: |
| Wireless Mechanical Keyboard | Accessories | 12 | $79.00 | In Stock |
| 34" UltraWide Monitor | Displays | 5 | $450.00 | Backorder |
| Ergonomic Mouse | Accessories | 24 | $38.00 | In Stock |
| ScreenBar LED Monitor Light | Desk Gear | 18 | $26.00 | In Stock |
| Aluminum Laptop Stand | Accessories | 0 | $15.00 | Out of Stock |

Tabs

Flexible horizontal and vertical tabs built for structured documentation and interactive content.

Accordion

Place Ghost Toggle cards side-by-side to automatically create clean, connected FAQ accordions without writing custom HTML or code.

Standalone toggle cards preserve their separated style, ideal for single collapsible notes or secondary details.

Mermaid charts

Render interactive diagrams, flows, and technical charts natively from plain text using integrated mermaid.js support.

Insert a code block, set language to mermaid, and your diagram renders automatically.

```mermaid

flowchart LR
    A[1. Draft Idea] --> B[2. Review & Edit] --> C[3. Publish Content]

flowchart LR
    A[1. Draft Idea] --> B[2. Review & Edit] --> C[3. Publish Content]

%%{init: {'theme': 'base', 'themeVariables': { 'pie1': '#3b82f6', 'pie2': '#6366f1', 'pie3': '#8b5cf6', 'pie4': '#94a3b8', 'pieStrokeWidth': '2px', 'pieStrokeColor': '#ffffff'}}}%%
pie showData title CMS Market Share for Creators
    "Ghost CMS" : 45
    "WordPress" : 25
    "Substack" : 18
    "Custom / Static" : 12

Form builder

Paste the <tana-form> tag into the HTML card and customize the fields declaratively:

<tana-form 
  action="https://submit-form.com/YOUR_FORM_ID"
  name="true"
  placeholder-name="Your Full Name"
  placeholder-email="you@domain.com"
  title="Subscribe to Our Developer Updates"
  description="Get weekly curated frontend performance and architecture tips."
  button-text="Join Newsletter"
  turnstile="true">
</tana-form>

More complex form build:

Steps

1. Map Your Knowledge Architecture & Content Taxonomy
   Audit your existing notes, drafts, and assets to design a clear and intuitive structure for your readers:
   • Core Clusters: Group related articles into high-level thematic hubs.
   • Granular Tags: Assign specific secondary tags for precise filtering and search discovery.
   • Custom Routes: Configure dedicated landing paths for each learning track.
2. Establish Brand Design Tokens & Visual Hierarchy
   Set up your global styling rules to maintain seamless readability across all device viewports:
   • Select accessible font pairings with distinct heading and body contrasts.
   • Define brand accent palettes for both light and dark display modes.
   • Calibrate line heights and container boundaries for distraction-free reading.
3. Configure Membership Tiers & Access Controls
   Organize your monetization funnel and member onboarding experience:
   • Connect your payment gateway for automated checkout processing.
   • Assign gated visibility rules across public, free-member, and paid tiers.
   • Set up an instant welcome sequence to deliver initial guides upon registration.
4. Audit Edge Delivery, Performance & SEO
   Validate all publication settings prior to rolling out content to your audience:
   • Verify asset caching and edge routing to maintain instant load times.
   • Inspect social share cards and search engine metadata previews.
   • Run automated audit checks across mobile and desktop interfaces.

Outliner

Nested bullet points designed for clarity, perfect for content outlines, taxonomies, and feature summaries.

• Foundation & Core Knowledge Strategy
  • Knowledge Architecture
    • Map core pillars and target reader personas.
    • Establish taxonomy, hub pages, and content boundaries.
  • Branding & Visual Framework
    • Calibrate typography scales and layout grids.
    • Define dark and light contrast-accessible design tokens.
• Monetization & Product Packaging
  • Offer Modularization
    • Structure high-value guides, templates, and video lessons.
    • Bundle individual assets into full-access digital packages.
  • Subscription & Gateway Integration
    • Configure public teasers versus paid-member tiers.
    • Automate Stripe webhooks for instant onboarding delivery.
• Distribution & Performance Engineering
  • Edge Optimization
    • Enable global asset caching and modern image compression.
    • Maintain pristine Core Web Vitals across mobile devices.
  • Discovery & Organic Growth
    • Optimize structured Open Graph previews and meta schemas.
    • Schedule automated multi-channel newsletter syndication.

Slider

Compare two images interactively side-by-side using a standard 2-image Ghost Gallery card.

Add 3 or more photos to a Ghost Gallery card to turn it into an interactive album carousel.

Callouts

Code

Prompt block

<tana-prompt description="Generate Semantic SEO Schema & Vanilla Web Components">
You are a senior frontend engineer specializing in Ghost CMS and Vanilla Web Components.
Analyze the provided article and generate:
1. Semantic HTML5 markup optimized for Core Web Vitals and accessible screen readers.
2. A lightweight Web Component extending HTMLElement with proper cleanup in disconnectedCallback.
3. A standardized JSON-LD schema for BlogPosting with breadcrumbs.
</tana-prompt>

Code blocks

<div class="theme-feature">
    <h3>Optimized for Performance</h3>
    <p>This theme is built with speed in mind. It delivers lightning-fast load times and a seamless reading experience for your audience.</p>
    <a href="/features" class="btn-link">View all features</a>
</div>

routes:

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Inline code

If you want to start the local development server, open your terminal and run the npm run dev command. This will watch your files for changes and automatically rebuild the assets.

Column

Create clean, balanced multi-column grids by placing two or three cards side-by-side.

Dual-column text layout for side-by-side comparisons, case studies, and structured reading.

Products

Clean full-width product showcase for featured items, digital downloads, or service packages.

TanaFlows Theme

TanaFlows isn't just a theme; it's a breath of fresh air for your Ghost CMS site. Designed and crafted by bePublish. It’s perfect for bloggers, writers, and dreamers who want to showcase their work in a way that truly resonates

Buy TanaFlows

Placing two Product cards consecutively automatically renders them in a responsive two-column grid.

TanaFlows Theme

TanaFlows isn't just a theme; it's a breath of fresh air for your Ghost CMS site. Designed and crafted by bePublish. It’s perfect for bloggers, writers, and dreamers who want to showcase their work in a way that truly resonates

Buy TanaFlows

TanaFlows Theme

TanaFlows isn't just a theme; it's a breath of fresh air for your Ghost CMS site. Designed and crafted by bePublish. It’s perfect for bloggers, writers, and dreamers who want to showcase their work in a way that truly resonates

Buy TanaFlows

Cards

Sponsored card

SPONSORED

Synaps Media Managed Ghost Hosting

Offers a streamlined managed hosting experience built specifically for Ghost publishers who want speed, simplicity, and reliability without dealing with server maintenance. It focuses on performance optimization, CDN-ready delivery, clean deployment workflows, and creator-friendly infrastructure so you can focus on publishing instead of managing technical overhead.

Learn about Synaps Media

Internal bookmark card

The secret weapon most affiliates ignore: Real stories

They’re free, authentic, and more persuasive than any ad. Learn why user-generated stories are the ultimate affiliate asset and how to find them.

TanaFlowsCuong Thach

External bookmark card

bePublish — Content engine for solo brands that sell

Launch your lean business fast on Ghost CMS. BePublish helps you build a powerful content engine to drive organic traffic, build authority, and scale sales.

bePublish

Button

Icons

Choose from over 1,500+ modern vector icons powered natively by Lucide.

<tana-icon 
  name="sparkles" 
  class="size-8 text-stone-800 dark:text-stone-200"
></tana-icon>

Combine icons with multi-column card grids to create modern, visually engaging feature highlights.

Media

Smart Youtube embed