This page demonstrate 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 Gatsby website.

Headings

Following is the demonstration of headings depth of h1 - h6 most of the time bloggers uses 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 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.

Lists

Unordered list

Nam purus magna.
Fusce iaculis elit ut elit.
Nunc a sapien urna..
Ut mattis at purus in efficitur.
Condimentum, elit mauris.
Nulla odio dui, iaculis quis turpis in.
Donec faucibus sagittis porta.

Ordered list

Sed lorem mi.
Praesent enim justo.
Quisque vel justo.
Cras nibh elit.
Ut pulvinar ullamcorper.
Praesent ac urna
Ut suscipit venenatis rutrum.

Example with child items

Sed lorem mi.
Praesent enim justo.
- Quisque vel justo.
- Cras nibh elit.
- Ut pulvinar ullamcorper.
Praesent ac urna
Ut suscipit venenatis rutrum.

Quote

Do you know you can type a greater than symbol and space at the beginning of any text to make it a quote in Markdown.

We still do not know one thousandth of one percent of what nature has revealed to us. - Albert Einstein

Image Example

In ghost there are three option to choose from for the size of image. Those are normal, wide and full. Here are the example for all three sizes.

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;

LaTeX support

This is inline LaTeX example $a^2 + b^2 = c^2$ and following is a block level LaTeX example.

\int_2^3 x^2 \, dx=\frac{3^3}{3}-\frac{2^3}{3}=\frac{19}{3}

Responsive table

Firsname	Lastname	Age	Lives in	Profession	Hobby
Jill	Smith	29	New york	Web developer	Soccer
Eve	Jackson	36	New york	Musicial	Karaoke

Embed

YouTube

Vimeo

Twitter

How to Use

On Twitter, find the tweet you’d like to display.
In the top right-hand corner of the tweet, click the caret (∨) and select “Embed tweet”.
Take the code you’re given and copy it into your markdown page.
- Note: when copying the embed code, copy only the blockquote section and not the script.

🥳 Announcing: @GatsbyJS 4.12!https://t.co/EqyAvKnuFW

🔸RFC for new Bundler in Gatsby
🔸RFC for new Script component in Gatsby
🔸Many bug fixes across core and plugins

💜 Thank you, contributors!
— GatsbyChangelog (@GatsbyChangelog) April 13, 2022

Elements