Style Guide
Below is just about everything you’ll need to style in the theme.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators.
Heading 2
Unlike social networks, this one is all yours. Publish your work on a custom domain, invite your audience to subscribe, send them new content by email newsletter, and offer premium subscriptions to generate sustainable recurring revenue to fund your work.
Heading 3
Ghost is an independent, open source app, which means you can customize absolutely everything. Inside the admin area, you'll find straightforward controls for changing themes, colors, navigation, logos and settings — so you can set your site up just how you like it. No technical knowledge required.
Heading 4
If you're feeling a little more adventurous, there's really no limit to what's possible. With just a little bit of HTML and CSS you can modify or build your very own theme from scratch, or connect to Zapier to explore advanced integrations. Advanced developers can go even further and build entirely custom workflows using the Ghost API.
Heading 5
This level of customization means that Ghost grows with you. It's easy to get started, but there's always another level of what's possible. So, you won't find yourself outgrowing the app in a few months time and wishing you'd chosen something more powerful!
Heading 6
Because subscribers are automatically able to sign in and out of your site as registered members: You can (optionally) restrict access to posts and pages depending on whether people are signed-in or not. So if you want to publish some posts for free, but keep some really great stuff for members-only, this can be a great draw to encourage people to sign up!
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing elit duis tristique sollicitudin. Cras ornare arcu dui vivamus arcu felis. Scelerisque eu ultrices vitae auctor. Ac tincidunt vitae semper quis lectus nulla. Luctus accumsan tortor posuere ac ut consequat. Malesuada fames ac turpis egestas maecenas. Pellentesque diam volutpat commodo sed egestas egestas. Curabitur gravida arcu ac tortor. Ut eu sem integer vitae justo eget. This text is styled with
Eget felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum iaculis eu non. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Odio tempor orci dapibus ultrices in iaculis nunc. Non enim praesent elementum facilisis leo vel fringilla est. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Velit sed ullamcorper morbi tincidunt ornare. Volutpat maecenas volutpat blandit aliquam etiam.
Here's a section heading
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Vitae justo eget magna fermentum iaculis eu non diam. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Elit at imperdiet dui accumsan sit. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Nam at lectus urna duis convallis convallis tellus. Mattis nunc sed blandit libero volutpat sed cras. Nibh tortor id aliquet lectus proin nibh nisl. Risus nullam eget felis eget nunc lobortis. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Quis risus sed vulputate odio ut enim blandit volutpat. Et malesuada fames ac turpis egestas integer. Enim sed faucibus turpis in eu mi bibendum neque egestas. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Neque sodales ut etiam sit amet nisl purus in. Ut diam quam nulla porttitor massa id neque aliquam vestibulum.
Ullamcorper malesuada proin libero nunc. Ante in nibh mauris cursus mattis. Vitae et leo duis ut diam. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Non tellus orci ac auctor augue mauris augue neque. Vitae tortor condimentum lacinia quis vel eros donec ac. Elementum nisi quis eleifend quam adipiscing. Vel risus commodo viverra maecenas accumsan lacus vel. Mi proin sed libero enim sed. Facilisi nullam vehicula ipsum a arcu cursus. In cursus turpis massa tincidunt dui ut. Cras adipiscing enim eu turpis egestas pretium. Cursus sit amet dictum sit amet justo. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Eget mauris pharetra et ultrices. Mi sit amet mauris commodo quis imperdiet massa. Quis viverra nibh cras pulvinar mattis nunc sed blandit.
Here's a section with a divider between paragraphs
Vitae turpis massa sed elementum tempus egestas sed sed risus. Fusce id velit ut tortor pretium viverra. Turpis nunc eget lorem dolor sed viverra ipsum. Orci eu lobortis elementum nibh tellus molestie nunc. Felis bibendum ut tristique et egestas quis ipsum. Lorem ipsum dolor sit amet consectetur. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Odio ut sem nulla pharetra diam sit amet nisl. Nulla at volutpat diam ut venenatis tellus. Sit amet risus nullam eget felis. Faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Sed ullamcorper morbi tincidunt ornare. Elementum sagittis vitae et leo duis ut diam. Felis bibendum ut tristique et egestas. Tristique risus nec feugiat in fermentum posuere urna nec.
Eget felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum iaculis eu non. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Odio tempor orci dapibus ultrices in iaculis nunc. Non enim praesent elementum facilisis leo vel fringilla est. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Velit sed ullamcorper morbi tincidunt ornare. Volutpat maecenas volutpat blandit aliquam etiam.
Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Sem viverra aliquet eget sit amet tellus cras adipiscing enim. Vitae justo eget magna fermentum iaculis eu non diam. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Elit at imperdiet dui accumsan sit. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Nam at lectus urna duis convallis convallis tellus. Mattis nunc sed blandit libero volutpat sed cras. Nibh tortor id aliquet lectus proin nibh nisl. Risus nullam eget felis eget nunc lobortis. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Quis risus sed vulputate odio ut enim blandit volutpat. Et malesuada fames ac turpis egestas integer. Enim sed faucibus turpis in eu mi bibendum neque egestas. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Neque sodales ut etiam sit amet nisl purus in. Ut diam quam nulla porttitor massa id neque aliquam vestibulum.
Images
Here are some examples of different sized images.
![A regular size image of a cactus.](https://unrealsource.com/content/images/2023/09/johannes-mandle-Xk2Pl7CMKYY-unsplash.jpg)
![A wide size image of snowy mountains.](https://unrealsource.com/content/images/2023/09/erol-ahmed-aIYFR0vbADk-unsplash.jpg)
![A full size image of the moon.](https://unrealsource.com/content/images/2023/09/joshua-earle-9idqIGrLuTE-unsplash.jpg)
Lists
Our main focus in building the Ghost editor is to try and make as many things that you hope/expect might work: actually work.
Ordered List
Here's an example of an ordered list:
- Green tea
- White tea
- Chai
- Matcha
- Rooibos
Eget felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum iaculis eu non. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Odio tempor orci dapibus ultrices in iaculis nunc. Non enim praesent elementum facilisis leo vel fringilla est. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Velit sed ullamcorper morbi tincidunt ornare. Volutpat maecenas volutpat blandit aliquam etiam.
Unordered List
Here's an example of an unordered list:
- You can copy and paste raw content from web pages, and Ghost will do its best to correctly preserve the formatting.
- Pasting an image from your clipboard will upload inline.
- Pasting a social media URL will automatically create an embed.
- Highlight a word in the editor and paste a URL from your clipboard on top: Ghost will turn it into a link.
- You can also paste (or write!) Markdown and Ghost will usually be able to auto-convert it into fully editable, formatted content.
Eget felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum iaculis eu non. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. Odio tempor orci dapibus ultrices in iaculis nunc. Non enim praesent elementum facilisis leo vel fringilla est. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Velit sed ullamcorper morbi tincidunt ornare. Volutpat maecenas volutpat blandit aliquam etiam.
Code
Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>
, or within a <pre>
block. Because we have more specific typographic needs for code, we’ll specify Consolas and Monaco ahead of the browser-defined monospace font.
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
Quotes
You can make quotes stand out with two types of blockquote styles that can be applied directly in the editor. Here's the first:
The way to get started is to quit talking and begin doing. – Walt Disney
Here's some filler text to separate the two blockquote styles, so you can see how they look in context. Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators. Now here's the second blockquote style:
The only impossible journey is the one you never begin.
Now here's a bit more filler text, again for context. Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators.
Bookmarks
When using a URL with the right meta information, it can show the page title, excerpt, author, publisher and even a preview image. This is a great way to share links from sites that don't have automatic embeds.
![](https://ghost.org/images/meta/ghost.png)
Headers
Make a statement with bold section headers in your posts and pages. Insert a header card to add a full width divider that can include a title, subheading, accent color or image background, and a button.
Welcome to the future
This is a small header
Here is some filler text to separate the header examples. Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators.
This is a medium header
Join over 90K creators from around the world on our Discord server. All skill levels and backgrounds are welcome. Learn, share, and discuss all things Unreal.
Join the communityHere is some filler text to separate the header examples. Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators.
This is a large header
Can you believe how large this header is? It even has an exciting background image!
SIGN UP NOWHere is some filler text to separate the header examples. Ghost is powered by an editor built from the ground-up for professionals. Calm by design, with advanced workflows by default. No more suffering through clumsy toolbars or drag & oops. Immerse yourself in the story with an interface that's invisible until you need it, and powerful when you do. Below are examples of Ghost’s expansive editing toolset designed to accommodate the extensive needs of modern creators.
Toggles
Use the Toggle card to create collapsible sections of text in your posts and pages. Great for creating distinct sections in your content, or adding an FAQ section.
When should I use Toggles?
Toggles allow you to create collapsible sections of content which is a great way to make your content less overwhelming and easy to navigate. A common example is an FAQ section, like this one.
Where can I take Ghost for a spin?
Start a free 14-day trial here. You won't be billed at the end, and you'll have access to all features.
Callouts
Ever find yourself wanting to add extra styling to important information in your posts? Well, now you can with callout cards. Each callout card can include an emoji, any length of text with styles and links, and a custom background color.
Buttons
Sometimes you might want to insert buttons in your post. You can do that, too!
Files
You can upload files that you want people to download, right from your post.
Products
Display products beautifully with custom content including an image, description, button or rating, so you can add your favorite recommendations to any post...
![](https://unrealsource.com/content/images/2023/09/midnight-laundry_main-capsule.jpg)
Midnight Laundry
A short first-person horror game where a long night at the laundromat takes an unexpected turn. Coming soon to Windows and Steam Deck.
![](http://localhost:2368/content/images/2023/06/midnight-laundry_main-capsule.jpg)
Midnight Laundry
A short first-person horror game where a long night at the laundromat takes an unexpected turn. Coming soon to Windows and Steam Deck.
Embeds
Sometimes you need to embed third-party content like YouTube videos, music from Spotify or SoundCloud, etc.