Style guide

This page demonstrate some basic elements and typography which you will use frequently within your blog. Also This theme comes with Bootstrap in pack, so you can use any of the element which is available in bootstrap.

H1 Heading

Donec tempor arcu quis ex gravida pellentesque. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

H2 Heading

Donec tempor arcu quis ex gravida pellentesque. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

H3 Heading

Donec tempor arcu quis ex gravida pellentesque[^n]. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

H4 Heading

Donec tempor arcu quis ex gravida pellentesque. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

H5 Heading

Donec tempor arcu quis ex gravida pellentesque. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

H6 Heading

Donec tempor arcu quis ex gravida pellentesque. Quisque eros augue, placerat non tincidunt id, posuere et mauris. Mauris porta sollicitudin feugiat.

This is a normal width Image example

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc lacinia dapibus dui, at iaculis metus condimentum ac. Mauris nibh eros, tincidunt eu semper in, accumsan scelerisque dolor. Phasellus molestie suscipit ornare. Nulla dapibus interdum lacus, in ornare ex efficitur vel.

This is a wide Image example

Integer sit amet justo tortor. Nullam eget metus in elit convallis mollis. Ut a arcu neque. Vestibulum consequat ut mi vel tincidunt. Donec tincidunt diam tellus, eget rutrum turpis accumsan a. In convallis eu tortor a euismod. Donec lobortis gravida viverra.

This is a full width Image example

Maecenas maximus iaculis risus mollis pharetra. Nunc nec blandit ante. Cras pretium sodales mauris molestie mattis. Integer imperdiet pharetra tellus sed luctus. Ut sit amet convallis ligula. Nunc tempor in augue eu pulvinar. Donec sed porta diam. Cras scelerisque, lorem consectetur consequat blandit, orci justo consectetur lacus, sed sodales nisi augue vel leo. Nullam non eleifend lacus, commodo pulvinar tortor. Vestibulum a sem et urna consectetur eleifend.

Bookmark

Ghost: The #1 open source headless Node.js CMS
The world’s most popular modern open source publishing platform. A headless Node.js CMS used by Apple, Sky News, Tinder and thousands more. MIT licensed, with 30k+ stars on Github.
Bookmark card optional caption
Ghost Docs
Get familiar with Ghost - the open source professional publishing platform. Install guides, tutorials, API docs and FAQs.

Unordered list

Donec tincidunt faucibus enim, non malesuada enim blandit vel. Nunc eu metus consequat, tempor magna sit amet, porttitor arcu. Nulla auctor odio tincidunt, tincidunt ipsum vitae, accumsan lectus.

  • Felis ut ultricies lacinia.
  • Mauris nec eros at ex luctus.
  • Suspendisse fringilla.
  • Lacinia porta vel eget erat.

Ordered list

Donec tincidunt faucibus enim, non malesuada enim blandit vel. Nunc eu metus consequat, tempor magna sit amet, porttitor arcu. Nulla auctor odio tincidunt, tincidunt ipsum vitae, accumsan lectus.

  1. Felis ut ultricies lacinia.
  2. Felis ut ultricies lacinia.
  3. Mauris nec eros at ex luctus.
  4. Suspendisse fringilla.

Table

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

Blockquotes

Vivamus vulputate sapien vitae nisl tempus laoreet. Fusce non eros risus. Sed tristique ex tellus, id tempus turpis ultricies ac. In porttitor, sem in scelerisque convallis, massa quam facilisis mauris, vitae faucibus est arcu eget magna.

All the great things are simple, and many can be expressed in a single word: freedom, justice, honor, duty, mercy, hope. - Winston Churchill

Nunc tristique, est vitae sollicitudin iaculis, erat nibh vulputate ligula, quis ullamcorper felis turpis ut lorem. Duis vehicula accumsan iaculis. Suspendisse ultricies urna metus, ut porta tortor convallis vitae.

Code Highlighting

HTML

<!-- start widget -->
<div class="widget">
	<h4 class="widget-title"><span>Facebook</span></h4>
	<div class="widget-content fb"></div>
</div>
<!-- end widget -->

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;

Embed Card examples

You tube video example
Twitter embed - it's a caption example
Codepen embed - it's a caption example

Video

YouTube

Vimeo

Audio

sound cloud

Mix cloud


Some other styles

  • Bold Text: This text is bolded my default markup.
  • Emphasize: This text is emphasize.
  • Highlight: Highlighted text
  • Strike-through: I am A strike-through text.
  • Link: I am a link
  • Inline Code: Its an Inline code example
You've successfully subscribed to Storymag
Great! Next, complete checkout for full access to Storymag
Welcome back! You've successfully signed in.
Unable to sign you in. Please try again.
Success! Your account is fully activated, you now have access to all content. Check your email If you are not already signed in.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.