Genelia Style Guide

Below are examples of elijah ghost theme components and available blocks and much more


Headings

Heading are help you to understand about it's uses in editor.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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.

👻
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
🎉
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
✍️
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Quotes

You can make quotes stand out with two types of blockquote styles that can be applied directly in the editor.

We power blogs into next level
Ghost is a fully open source, adaptable platform for building and running a modern online publication

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.

Beautiful Free Images & Pictures | Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
WordPress Themes & Website Templates from ThemeForest
Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates.

Products

Display products beautifully with custom content including an image, description, button or rating.

Amazing Flowerpot

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Purchase Flowepot

Images

Once you start adding text and image cards, the whole narrative of the story changes. Suddenly, you're working in a new format. Once inserted you can blend images beautifully into your content at different sizes (normal, full, and wide) and add captions wherever needed.

Photo by Maria Teneva / Unsplash
Two friends and I found ourself on a road trip Saturday morning for for a photoshoot for an online clothing business called ‘Garb’. Bags packed with a Canon DSLR camera and a Mavic 2 Pro with a Hasselblad camera. Needless to say we enjoyed our time and got creative with some shots on the shore of Terrigal, Central Coast, NSW Australia.
Photo by Tim Patch / Unsplash
Person reading a newspaper
Photo by Roman Kraft / Unsplash

Ghost supports image galleries for up to 9 images at a time, all of which are responsively optimized and organised.

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.

Build your audience

Create your own platform on the web. Ghost is a powerful app for new-media creators to publish, 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.

Try it for free

Audio

It’s possible to upload audio files directly to your posts! This means you can share audio content with your audience, with a beautiful media player that nests into your posts and emails seamlessly.

audio-thumbnail
D love birdsong 7436
0:00
/1:01

Video

It’s possible to upload video files directly to your posts! This means you can share video content with your audience, with a beautiful media player.

0:00
/

File

You can add downloadable files to your posts in Ghost. File uploads can be used to share multiple types of content with your visitors. Files display in your content with a custom name and caption, like this:

Buttons

Add call to action buttons to your posts using button cards. Buttons can be center or left aligned, include custom button text, and link to any URL.


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.

If you paste in a URL, like https://softhopper.studio - it'll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here's a link to the softhopper website.

Lists

Unordered list

  • Item number one
  • Item number two
  • A nested item
  • A nested item
  • A final item

Ordered list

  1. Item number one
  2. Item number two
  3. A nested item
  4. A nested item
  5. A final item

Highlighting

Highlighting text on a web page can help bring important information immediately to the reader's attention. When creating a highlighting text, all you need to do is add a == before and after your text in Markdown card.

Responsive Tables

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

# Firsname Lastname Age Lives in Profession
1 Jill Smith 29 New york Web Developer
2 Johan Doe 35 New York Designer
3 Jahid Smith 32 New york Designer

Vimeo Video embed

Youtube Video embed

Twitter Posts

Code

Code can be presented inline, like <code>. When creating a code text, all you need to do is add a ` before and  after your text. In the editor ``` (three backticks) defines a code block.

.selectors {
    display: block;
    width: 100%;
}