Poem Card Tutorial

Using Markdown

Simply use the [poem] syntax in a Markdown card:

> [!poem] The Road Not Taken
> Two roads diverged in a yellow wood,
> And sorry I could not travel both
> And be one traveler, long I stood
> And looked down one as far as I could
> To where it bent in the undergrowth;
>
> — Robert Frost

[!poem] The Road Not Taken
Two roads diverged in a yellow wood,
And sorry I could not travel both
And be one traveler, long I stood
And looked down one as far as I could
To where it bent in the undergrowth;

— Robert Frost

Using HTML

For more control, use an HTML card:

<div class="kg-poem-card">
  <div class="kg-poem-header">
    <h4 class="kg-poem-title">The Road Not Taken</h4>
  </div>
  <div class="kg-poem-divider"></div>
  <div class="kg-poem-content">
    <p class="kg-poem-line">Two roads diverged in a yellow wood,</p>
    <p class="kg-poem-line">And sorry I could not travel both</p>
    <p class="kg-poem-line">And be one traveler, long I stood</p>
  </div>
  <div class="kg-poem-divider"></div>
  <p class="kg-poem-author">— Robert Frost</p>
</div>

Markdown Syntax

Basic Structure

> [!poem] Title (optional)
> First line of poem
> Second line of poem
>
> — Author Name

Modifiers

Add modifiers in the title line to customize the layout:

• [center] - Center-align the poem
• [plain] - Remove italic styling

Example:

> [!poem] Spring Dawn [center] [plain]
> Spring sleep, unaware of dawn,
> Everywhere I hear singing birds.
>
> — Meng Haoran

[!poem] Spring Dawn [center] [plain]
Spring sleep, unaware of dawn,
Everywhere I hear singing birds.

— Meng Haoran

Rules

• First line must start with [!poem]
• Lines starting with —, --, or -  are treated as author attribution
• Empty lines are preserved
• All other lines are treated as poem verses

HTML Structure

Required Classes

• .kg-poem-card - Main container
• .kg-poem-content - Poem verses container
• .kg-poem-line - Individual verse line
• .kg-poem-author - Author attribution

Optional Classes

• .kg-poem-header - Title section wrapper
• .kg-poem-title - Poem title
• .kg-poem-divider - Decorative divider line
• .kg-poem-centered - Center-align layout
• .kg-poem-plain - Remove italic styling

Minimal Example

<div class="kg-poem-card">
  <div class="kg-poem-content">
    <p class="kg-poem-line">Verse line 1</p>
    <p class="kg-poem-line">Verse line 2</p>
  </div>
  <p class="kg-poem-author">— Author</p>
</div>

Features

• Auto Theme Adaptation - Seamlessly switches between light and dark modes
• Responsive Design - Optimized for all screen sizes
• Elegant Animations - Subtle hover effects with accent color highlights
• Flexible Layout - Supports both left-aligned and centered layouts
• Typography Options - Choose between italic and plain text styles

Styling

The poem card automatically inherits your theme's:

• Accent color for borders and highlights
• Font families for headings and body text
• Color scheme for light/dark mode

Custom Styling

To customize the appearance, add CSS to your Ghost site's code injection:

.kg-poem-card {
  /* Your custom styles */
}

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Technical Details

• JavaScript Parser: src/js/poem.js
• Styles: src/sass/_poem-card.scss
• Template Reference: post.hbs

The Markdown syntax is automatically converted to HTML on page load using JavaScript, providing a seamless authoring experience while maintaining full control over the rendered output.