Ghost Blog Themes and Fun!

    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.

    Image Example

    Image with regular size setting

    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.

    Image with wide size setting

    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.

    Image with full width size setting

    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.

    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.

    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

    YouTube video example
    SoundCloud music

    Twitter embed - it's a caption example
    Codepen embed - it's a caption example
    Mixcloud example

    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