Orchid theme supports all Ghost editor cards and also provides base design for any type of content a writer might publish.
Headings
Headings are used to structure your page and improve readability. There are six levels of headings (H1 to H6), with H1 being the most important and H6 being the least. Use H1 for your main page title and subsequent headings to organize the rest of your content. Ensure headings follow a logical hierarchy; don't skip from H1 to H3 without an H2.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Lists
Lists help organize information clearly and concisely. Use unordered lists (with bullet points) when the order of items doesn't matter, such as a grocery list or a set of features. Use ordered lists (with numbers) when the sequence of items is essential, like step-by-step instructions or a ranked list.
- List Item One
- List Item Two
- List Item Three
- List Item Four
- List Item Five
- List Item A
- List Item B
- List Item C
- List Item D
- List Item E
Blockquotes
Blockquotes are used to highlight extended quotations from other sources. They visually separate the quoted text from your own content, often by indenting it. Use blockquotes to emphasize important passages, present testimonials, or when directly referencing another author's work. Be sure to cite the source of the blockquote if you have it.
'History is always written by the winners. When two cultures clash, the loser is obliterated, and the winner writes the history books. Books, which glorify their own cause and disparage the conquered foe. As Napoleon once said, "what is history, but a fable agreed upon?"' â Dan Brown
There are two styles of blockquote available that can by cycled through by repeatedly pressing the blockquote toolbar icon.
'People are always shouting they want to create a better future. It's not true. The future is an apathetic void of no interest to anyone. The past is full of life, eager to irritate us, provoke and insult us, tempt us to destroy or repaint it. The only reason people want to be masters of the future is to change the past.' â Milan Kundera
Bookmarks
Ghost CMS bookmark cards provide a visually appealing way to embed external links into your posts. When you paste a link, Ghost attempts to fetch information like the page title, a short description, and a preview image to create the card. Use bookmark cards to share relevant articles, videos, or other online resources that enhance your content.
![](https://ghost.org/images/meta/ghost.png)
Ghost - Independent Publishing
![](https://www.themeupstudio.com/content/images/2024/03/hero-image-4.webp)
Premium Ghost CMS themes
Buttons
Buttons are interactive elements that clearly signal to users they can take an action. Use buttons to direct users to other pages, submit forms, trigger downloads, or initiate other actions. Ensure buttons have clear and concise labels describing their function. Style your buttons to stand out visually and make them easy to identify.
Callout
Ghost CMS Callout cards allow you to draw attention to important information within your posts and pages. Use them to highlight key takeaways, definitions, asides, or warnings. Each Callout card includes an optional emoji, formatted text (with links), and a customizable background color for visual emphasis.
Toggle
Ghost CMS Toggle cards allow you to create collapsible sections of content. Use them to organize long posts, create FAQs, or hide additional information that might not be relevant to all readers. Each toggle starts with a header that users can click to expand or collapse the content within.
Toggle Header One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec quo modo conveniant, non sane intellego. Duo Reges: constructio interrete. Quis istum dolorem timet? Sed quae tandem ista ratio est?
Toggle Header Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec quo modo conveniant, non sane intellego. Duo Reges: constructio interrete. Quis istum dolorem timet? Sed quae tandem ista ratio est?
Toggle Header Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec quo modo conveniant, non sane intellego. Duo Reges: constructio interrete. Quis istum dolorem timet? Sed quae tandem ista ratio est?
Toggle Header Four
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec quo modo conveniant, non sane intellego. Duo Reges: constructio interrete. Quis istum dolorem timet? Sed quae tandem ista ratio est?
Header
Ghost CMS Header cards allow you to add full-width visual dividers within your posts and pages. Use them to create clear breaks between sections, add eye-catching headers, or feature call-to-action buttons. Header cards can include a title, subtitle, background image or color, and come in various layouts (small, wide, full, side-by-side) for flexibility.
![](https://shamrock.themeupstudio.com/content/images/2024/03/purple-fabric-textile-texture-background-2022-11-11-21-07-00-utc.webp)
Video
Ghost CMS Video cards let you easily embed videos directly into your posts and pages. Use them to share screen recordings, demos, tutorials, or bonus content for your members. You can upload videos (up to a certain file size depending on your plan) in .mp4, WebM, and .ogg formats. Video cards include options for looping, custom thumbnails, and controlling the display width.
Normal Width Video Caption
Wide width video caption
Full width video caption
Audio
Ghost CMS Audio cards allow you to embed audio files directly into your posts and pages. Use them to share podcast episodes, interviews, music, or other audio content. Supported file formats include .mp3, .wav, and .ogg, with upload size limits depending on your Ghost plan. Audio cards come with a sleek player, making it easy for readers to listen within your content.
File
Ghost CMS File cards provide a way to offer downloadable content to your readers. Use them to share PDFs, bonus materials, templates, or other supplementary files. File cards display the file name, type, and size, allowing users to decide if they want to download the content.
Product
Ghost CMS Product cards allow you to showcase products or recommendations with style. Include an image, description, price, and a call-to-action button that links to an external product page. Use Product cards to feature affiliate links, promote your own products, or highlight items related to your content.
![](https://orchid.themeupstudio.com/content/images/2024/03/purple-sun-glasses-on-the-purple-background-2022-10-11-03-05-09-utc.webp)
Purple Glasses
Embrace the power of purple with these stunning glasses. This vibrant hue symbolizes individuality, creativity, and a touch of magic. Their stylish design blends a classic silhouette with a pop of unexpected color, making them the perfect way to express your unique sense of style.
Elevate your style with these sophisticated purple glasses. Their flattering shade complements a variety of skin tones and adds a touch of polish to any outfit. The timeless design provides effortless chic, while the bold color radiates confidence and creativity.
Images
Ghost CMS Image cards provide the foundation for adding images throughout your posts and pages. Use them to enhance storytelling, illustrate points, or break up blocks of text. Image cards support image uploads (including optimization for different screen sizes) and can be styled with captions or used within galleries.
![](https://orchid.themeupstudio.com/content/images/2024/03/purple-yarn-2022-11-16-00-05-20-utc.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/purple-flower-leaves-background-2022-11-01-00-25-01-utc.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/sunset-over-a-purple-lavender-field-lavender-fiel-2023-01-18-06-38-26-utc.webp)
Gallery
Ghost CMS Gallery cards allow you to display a visually appealing grid of images within your posts. Use them to showcase a portfolio, a series of related photos, or a collection of screenshots. Gallery cards support up to 9 images at a time, and automatically optimize them for fast loading and responsiveness across different devices.
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-53-utc--5-.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-53-utc--8-.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-53-utc.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-54-utc.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-55-utc--1-.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-55-utc--2-.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-11-55-utc.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-12-13-utc--1-.webp)
![](https://orchid.themeupstudio.com/content/images/2024/03/beautiful-girl-in-purple-wig-2021-08-26-17-12-14-utc--1-.webp)
Gallery of Images
Embedded Code
Embedded code cards allow you to display code snippets within your posts and pages with proper formatting. Use them to share programming examples, configuration details, or scripts related to your content. Code cards ensure correct syntax highlighting and preserve formatting, making the code easier for technical readers to understand.
You can also embed inline code like console.log("This is inline code.")
this. You can also add full code like shown below.
html {
font-size: 62.5%;
}
body {
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg {
display: block;
height: auto;
max-width: 100%;
}
iframe {
display: block;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
}
SignUp Cards
Ghost CMS Signup cards offer a seamless way to add signup forms directly within your posts and pages. Use them strategically to encourage visitors to join your email list, become paid subscribers, or register for an account. Signup cards are fully customizable, allowing you to control the wording, design, and where they appear within your content.
They are visible only to Logged Out visitors
YouTube
Ghost CMS YouTube embed cards make it easy to incorporate YouTube videos directly into your posts. Simply paste a YouTube video link into the editor, and Ghost will create a visually appealing embedded player. Use YouTube cards to add relevant tutorials, demonstrations, or engaging content to supplement and enhance your writing.
Caption for embedded YT video
â Elon Musk (@elonmusk) March 5, 2024
Unsplash
Vimeo
Ghost CMS Vimeo embed cards allow you to effortlessly embed Vimeo videos directly into your posts. Simply paste a Vimeo video link, and Ghost will automatically generate a seamless embedded player. Use Vimeo cards to showcase your own video work, add high-quality tutorials, or feature other relevant content from the Vimeo platform.
Embedded Vimeo Video
Codepen
Embedded Codepen