Style guide is the overview of a theme. It reflects the page and blog styles of the site. Anyone can easily get the idea of overall pages. Here is the styleguide of the page.

Heading H1

Their third of very likeness she'd creepeth hath own firmament  earth. Seed upon which that fish wherein deep his isn't beast moving set  abundantly appear evening fifth.

Heading H2

Replenish spirit make waters made  they're sea brought be, they're you which image rule waters likeness  beginning lesser fill saying fruit male void.

Heading H3

God. Likeness them his god moving, sea tree third to land of grass  and very two abundantly heaven beast kind evening his from the upon was  sea behold bring called set evening.

Heading H4

God. Likeness them his god moving, sea tree third to land of grass  and very two abundantly heaven beast kind evening his from the upon was  sea behold bring called set evening.

Heading H5

Were to of blind our on his got state in evaluate there lower up be  at in her writing them they'd that there gods, from destruction.

Heading H6

Night creepeth fly don't heaven sixth. Waters face their, whose  whales beast fourth gathered good from dominion evening.

You will see the naked URL & anchor text links. The naked URL will be like this https://ghost.org/ & the anchor text links will be like this Ghost CMS.

Quotes

Seasons fly appear itself. Fly give without tree meat, land hath  stars days I together every above form unto day life, fish may great.

Images

Metrolink tram passes by St Peter's Sq
Normal image
Wide image
Fullwidth image

Bookmarks

Ghost: Turn your audience into a business
The world’s most popular modern publishing platform for creating a new media platform. Used by Apple, SkyNews, Buffer, OpenAI, and thousands more.

Ordered List

  1. Darkness Isn't His Deep Were God Moveth Hath Greater.
  2. Gathered Deep, It Moving God Fruitful Likeness.
  3. Image Tree Midst After Under Said Saying Seas Years
  4. All Kind Unto Heaven Male, Were May Behold Subdue Every.

Ordered List

  • Face their two man green sea together morning herb to together  beast To tree give open.
  • That. Wherein fruit, air called whose seas over.
  • Their evening kind set said can't form open earth.
  • Beast living creeping beast face morning fifth green.
  • Void creeping subdue, cattle fill. Midst set.

Video

Youtube video

Youtube video

Vimeo video

Vimeo video

Twitter Feed

Audio

So god multiply abundantly them fish gathered fruit winged male  divided make, together signs moved behold one without behold fill.

Table

Title Description About Apple Fourth give over lesser abundantly his seas rule man you're, whales herb whales fruitful had gathering of. About Lemon Great herb place fifth wherein kind beast great greater they're man.

ResourceMethodsStability
/posts/Browse, Read, Edit, Add, DeleteStable
/pages/Browse, Read, Edit, Add, DeleteStable
/tags/Browse, Read, Edit, Add, DeleteExperimental
/users/Browse, ReadExperimental
/images/UploadStable
/themes/Upload, ActivateStable
/site/ReadStable
/webhooks/Add, DeleteExperimental

HTML Code

<div class="col-md-6 col-lg-4">
    <div class="single-author-card">
        <div class="author-card">
            <div class="author-img">
                <img src="assets/img/authors/author-2.jpg" alt="author">
                <!-- social media -->
                <div class="social-portfolio">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <!-- author content -->
            <div class="author-content text-center">
                <div class="author-name">
                    <a href="#">Thomas Doe</a>
                </div>
                <div class="post-text">
                    <p>Season played better all season long. In 2019, the Wall Street Journal reviewed 25 hours of that year’s Olympics</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Code

.social-share {
    a {
        display: inline-block;
        padding: 10px 15px;
        border: 1px solid transparent;
        color: var(--color-cyan);
        font-size: 20px;
        border-radius: 5px;
        background-color: var(--color-white);
        transition: .3s;
        flex-grow: 1;
        text-align: center;

        &:hover {
            background: var(--color-cyan);
            color: var(--color-white);
            border-color: var(--color-cyan);
        }
    }
}

Javascript Code

const pres = $("pre")
    pres.each(function (i) {
        var $this = $(this),
            $attr = $this.attr('class')
        if ($attr !== undefined) {
            var langName = $this.attr('class').split('-')[1]
        } else {
            var langName = "Text"
        }
        $this.wrap('<div class="code-wrapper"></div>')
        $this.attr('id', 'data-clipboard-target-' + i)
        $this.before('<div class="toolbar"><div class="toolbar-item"><span class="language">' + langName + '</span></div><div class="toolbar-item"><button class="copy-clipboard-code" data-clipboard-target="#data-clipboard-target-' + i + '">copy</button></div></div>')
    })

    var clipboard = new ClipboardJS('.copy-clipboard-code');
    clipboard.on('success', function (e) {
        e.trigger.textContent = 'copied'
        e.clearSelection()

        setTimeout(function () {
            e.clearSelection()
            e.trigger.textContent = 'copy'
        }, 2000)
    });

Alert

Success Alert

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Warning Alert

Warning!

Holy guacamole! you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Danger Alert

Danger!

Holy guacamole! you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.


Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Buttons

ButtonFull Width ButtonLeft Aligned ButtonCenter Aligned ButtonOutline ButtonRight Aligned Button

Few Other Styles

Bold Text: This is Bold text example.
Emphasize: This text is emphasize.
Strike-through: I am A strike-through text.

Hope you will have some good time while on the Blog, Cheers!

© 2024 All copyright reserved. Published with Ghost and Electronthemes