This page demonstrates some basic elements and typography which you will use frequently within your site. Make the text bold or make it italic. Why not bold and italic both at a time. Here is the link to Ghost website. Do you want to link a long text here how it looks in this theme.

Headings

Following is the demonstration of headings depth of h1 - h6 most of the time bloggers use heading level two to heading level four within the article.

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five

Heading level six

Paragraph of dummy text

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Unordered list

• The sun is shining.
• Birds are chirping.
• The river flows peacefully.
• Clouds drift lazily in the sky.
• Trees sway in the breeze.

Ordered list

1. The cat purrs softly.
2. Dogs bark loudly.
3. Birds sing melodiously.
4. The wind whispers through the trees.
5. Flowers bloom in the spring.

Markdown example with child items

• Fruits
  • Apples are crunchy.
  • Oranges are juicy.
  • Bananas are yellow.
• Colors
  • Blue is calming.
  • Red is vibrant.
  • Green is refreshing.

Quote

Do you know you can type a greater than symbol and space at the beginnign of any text to make it a quote in Ghost Koenig Editor similar as markdown.

You must be the change you wish to see in the world. - Mahatma Gandhi

Quote alternative

Ghost support 2 types of blockquotes. Here is the second one.

Science knows no country, because knowledge belongs to humanity, and is the torch which illuminates the world. - C. V. Raman

Bookmark

In the Ghost editor, paste a link, which will automatically be converted to a bookmark card. It is awesome.

Ghost: The best open source blogging platform

Beautiful, modern publishing with email newsletters and paid subscriptions built-in. Used by Platformer, 404Media, Lever News, Tangle, The Browser, and thousands more.

Ghost - The Professional Publishing Platform

Premium Ghost themes

Functional and beautiful Ghost themes. Easily build your amazing websites using our premium quality SEO friendly themes

GBJ solution

Callout

Here are some callout examples. These are useful for drawing your reader's attention.

Toggle

Product card

Porto - Multipurpose Ghost Blog Theme

Multipurpose Ghost theme suitable for personal, professional, magazine, brand blog, and newsletter.

Purchase

Video card

Audio card

Summer walk

0:00

/197.668563

1×

Image Example

In Ghost, there are three options to choose from for the size of the image. Those are normal, wide, and full. Here are the examples for all three sizes.

Do you like to add wide images in your article? You can do that in ghost and the following is an example of a such wide image.

And finally here is a full-width image. Enrich your article with supportive images. This theme handles every size gracefully

Gallery

In Ghost, you can add images in a gallery. the gallery supports up to 9 images, each row containing a maximum of 3 images. Below is an example of a gallery with 5 image

Syntax highlighting

If you write about programming then you are covered too. Syntax highlighting feature is also implemented within this theme.

HTML

<div class="topic-card">
	<img src="" alt="" class="topic-image">
    <h2 class="h3 topic-name"><a href="">Getting Started</a></h2>
    <p class="topic-description">
    	Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
</div>

CSS

.comment-wrap {
    background: #fff;
	padding: 1.5em 2em;
	box-sizing: border-box;
	margin-bottom: 1.5em;
}

JavaScript

var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;

Responsive table

You can use Html card or Markdown card in the Koenig Editor to add table in your content. This theme automatically make all table responsive.

Markdown table

As this table in the example below is not too wide, it do not needs responsive scrollbar in large screen. But In small screen a scroll bar will be visible if needed.

HTML table

Example of a wide table. The horizontal scrollbar is automatically added.

Buttons

Ghost's editor has a button card using which you can insert buttons within your content. Followings are example of those button

Thanks for reading. Have you seen what feature this theme have?