How to Add Pull Quotes in Ghost

What are Pull Quotes?

Pull quotes are highlighted quotes from your content that are displayed prominently, often with attribution. They’re styled differently from regular blockquotes to draw attention.

Method 1: Using HTML Block (Recommended)

Since Ghost supports HTML in the editor, you can directly paste HTML pull quote code:

Step-by-Step:

1. In Ghost Editor:
   • Place your cursor where you want the pull quote
   • Click the + button to add a card
   • Select HTML card
2. Paste this HTML template:

   <blockquote class="pullquote text-center">
     <p>Your quote text goes here. This is the highlighted quote that will stand out from the rest of your content.</p>
     <cite><a href="https://example.com" target="_blank">Author Name, Source Title, Date</a></cite>
   </blockquote>
   

3. Customize:
   • Replace the quote text
   • Update the citation (author, source, date)
   • Update or remove the link
   • Change alignment: text-center, text-left, or text-right

Example:

<blockquote class="pullquote text-center">
  <p>There is an universal tendency among mankind to conceive all beings like themselves, and to transfer to every object, those qualities, with which they are familiarly acquainted, and of which they are intimately conscious.</p>
  <cite><a href="https://davidhume.org/texts/n/3" target="_blank">David Hume, The Natural History of Religion, 1757</a></cite>
</blockquote>

Method 2: Copy from Migrated Content

If you’ve already migrated content from Jekyll, the pull quotes are already converted to HTML. You can:

1. Copy the HTML blockquote from your migrated markdown file
2. Paste it into a Ghost HTML card

For example, from ghost-content/ai-companion/intro.md:

<blockquote class="pullquote text-center">
  <p>Your quote text</p>
  <cite><a href="https://example.com" target="_blank">Author, Source, Date</a></cite>
</blockquote>

Alignment Options

You can use different alignment classes:

• text-center - Centered (most common)
• text-left - Left aligned
• text-right - Right aligned

Example:

<blockquote class="pullquote text-left">
  <p>Left-aligned pull quote</p>
  <cite>Author Name</cite>
</blockquote>

Without Citation

If you don’t need a citation, you can omit the <cite> tag:

<blockquote class="pullquote text-center">
  <p>Just a quote without attribution</p>
</blockquote>

Styling

The pull quotes are automatically styled by the theme’s CSS:

• Larger font size
• Centered or aligned text
• Styled citation
• Spacing and margins

The styling matches the Jekyll Story theme for consistency.

Tips

1. Use sparingly: Pull quotes work best when used 1-2 times per post
2. Quote the best parts: Choose the most impactful or interesting quotes
3. Keep it short: Pull quotes should be concise (1-3 sentences)
4. Add attribution: Always credit the source when possible

Troubleshooting

Pull quote not showing styled correctly

• Make sure you’re using the HTML card, not a regular blockquote
• Check that the class pullquote is included
• Verify the theme CSS is loaded

Citation not showing

• Make sure you have a <cite> tag
• Check that the HTML is properly formatted

Alignment not working

• Verify the alignment class (text-center, text-left, text-right)
• Check for typos in the class name

Quick Reference

Template:

<blockquote class="pullquote text-center">
  <p>Quote text here</p>
  <cite><a href="URL" target="_blank">Author, Source, Date</a></cite>
</blockquote>

Minimal (no citation):

<blockquote class="pullquote text-center">
  <p>Quote text here</p>
</blockquote>