Style Guide

Discover the key elements that can elevate your posts and engage your audience more effectively. From striking text formatting and captivating images to interactive videos and audio clips, Ghost offers everything you need.

Headings

Headings are crucial for structuring your content, guiding readers smoothly through your page. Consistency in font size and style across all headings ensures a cohesive and professional presentation.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Images

Images play a vital role in enhancing your content, making it more engaging and visually appealing. Ghost allows three different widths for images: normal, wide, full. You can also include descriptive alt text for accessibility and SEO purposes.

Normal Width
Wide Width
Full Width

Callouts

Callouts are designed to highlight important information, drawing the reader’s attention to key points, tips, or warnings. Uses distinct styling—such as a different background color & icon—to make them standout visually.

🌱
Pro Tip: Group similar plants together to create a visually cohesive and easy-to-maintain indoor garden.
🌞
Remember: Always check the specific light and water requirements of your plants to ensure they thrive in their environment.
🤔
Did You Know? Adding plants to your workspace can boost productivity and reduce stress levels.

Bookmarks

Using a URL with the proper meta information allows it to display the page title, excerpt, author, publisher, and even a preview image. This is an excellent way to share links from sites and link important content in a visually appealing way.

Ghost: The best open source blog & newsletter platform
Beautiful, modern publishing with email newsletters and paid subscriptions built-in. Used by Platformer, 404Media, Lever News, Tangle, The Browser, and thousands more.
feey (@feeypflanzen) | Unsplash Photo Community
See 1,475 of the best free to download photos, images, and wallpapers by feey on Unsplash.

Quotes

Blockquotes are a powerful way to emphasize key messages or insights within your content. They should be used to highlight memorable statements, expert opinions, or impactful phrases that resonate with your audience.

Ghost is a fully open source, adaptable platform for building and running a modern online publication.

Another version of blockquote:

"In every walk with nature, one receives far more than he seeks."John Muir

Ghost supports image galleries with up to 9 images at a time. Each image is responsively optimized and organized to ensure they look their best.

Toggles

Add collapsible sections within your posts using toggle cards—a fantastic way to include FAQs or any content that benefits from being organized into expandable sections.

What is a toggle card?

Toggle cards allow readers to reveal and hide additional information with ease, enhancing the readability and user experience of your posts.

How many can I add?

As many as you want. No limits here!

Can I style the text inside?

Make it bold, italic or add a link.

Button

Add call-to-action to your posts directly using the button card. Name the button and add the link. Uses accent color for your site.

Lists

Ordered List
  1. This is an ordered list item
  2. Another ordered list item
    1. A level 2 ordered list item
  3. Yet another ordered list item
    1. Another level 2 ordered list item
      1. A level 3 ordered list item
Unordered List
  • This is an unordered list item
  • Another unordered list item
    • A level 2 unordered list item
  • Yet another unordered list item
    • Another level 2 unordered list item
      • A level 3 unordered list item

Product

Showcase your products with elegance by incorporating custom content elements such as high-quality images, detailed descriptions, call-to-action buttons, and ratings. This allows you to feature your favorite recommendations in any post, presenting them in a visually appealing and informative way.

Maison

Maison is a visually captivating template designed specifically for photographers. It offers a dynamic and immersive experience for showcasing your photography portfolio.

Purchase

Use a header card to create a full-width divider that features a title, subheading, accent color or image background, and even a button. This visually striking element helps to clearly define and emphasize different sections of your content.

What is Ghost?

Ghost is a powerful app for professional publishers to create, share, and grow a business around their content. It comes with modern tools to build a website, publish content, send newsletters & offer paid subscriptions to members.

Can I run a complete publication?

Ghost is a powerful app for professional publishers to create, share, and grow a business around their content. It comes with modern tools to build a website, publish content, send newsletters & offer paid subscriptions to members.

Take me to Ghost!

File

Share PDFs, code snippets, or any other files directly within your post by using the file card feature. This allows you to attach and present files conveniently, making it easy for your readers to access and download the content you want to share.

Audio

Share your audio content with your audience by embedding an audio player directly into your posts. Whether you're sharing podcasts, music tracks, or other audio materials, the audio player ensures that your content is accessible. Music by Oleksii Kaplunskyi from Pixabay.

audio-thumbnail
Lost Ambient
0:00
/58.749375

Video

Embed a video from platforms like Vimeo or upload it directly to your post. Utilize the video card feature to integrate a video player seamlessly into your content. This allows your audience to view your videos within the post, providing an engaging and interactive experience.

0:00
/0:15

Google DeepMind

Code

Use Markdown Card to write code. Code can be presented in 2 ways, inline or as a code block. Add ` before and after the words to add code inline. Adding three backticks before and after text creates code block.

<script>
    console.log("Pretty Cool, huh!")
</script>

Table

Use Markdown Card to add tables. Fully responsive table, automatically adds a scrollbar if the content overflows.

# Heading Heading Heading Heading
1 Cell Cell Cell Cell
2 Cell Cell Cell Cell
3 Cell Cell Cell Cell