Style Guide

The style guide provides you with a blueprint of Mayge’s default post and page styles. The style guide is also a great reference for suggested typographic treatment and styles for your content.


Right Aligned Image

lunchLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque dui posuere id. Aliquam viverra quam facilisis sapien dapibus, ut bibendum orci ultrices. Phasellus eget lorem feugiat, tincidunt massa vel, tristique neque. Vivamus rutrum id metus nec iaculis. Ut vel sollicitudin felis. Suspendisse potenti.


Left Aligned Image

golfLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque dui posuere id. Aliquam viverra quam facilisis sapien dapibus, ut bibendum orci ultrices. Phasellus eget lorem feugiat, tincidunt massa vel, tristique neque. Vivamus rutrum id metus nec iaculis. Ut vel sollicitudin felis. Suspendisse potenti.


Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Blockquote

The blockquote is used to indicate the quotation of a large section of text from another source. It can be as long or as short as you’d like!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque.


Typography Styles

To use the pull quote, you simply need to add a class of pull-right or pull-left to your content. This can be done in the Text editor view. See an example below:

<span class="pull-right">Pull this text right.</span>

This pull quote is just hanging out on the right side of the post. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque dui posuere id. Aliquam viverra quam facilisis sapien dapibus, ut bibendum orci ultrices. Phasellus eget lorem feugiat, tincidunt massa vel, tristique neque. Vivamus rutrum id metus nec iaculis. Ut vel sollicitudin felis. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque dui posuere id. Aliquam viverra quam facilisis sapien dapibus, ut bibendum orci ultrices. Phasellus eget lorem feugiat, tincidunt massa vel, tristique neque. Vivamus rutrum id metus nec iaculis. Ut vel sollicitudin felis. Suspendisse potenti.

And this pull quote is pulling text to the left, like a sir. Lorem ipsum dolor sit amet, consectetur.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet gravida eros. Ut ut congue massa. Cras laoreet placerat diam, et pellentesque dui posuere id. Aliquam viverra quam facilisis sapien dapibus, ut bibendum orci ultrices. Phasellus eget lorem feugiat, tincidunt massa vel, tristique neque. Vivamus rutrum id metus nec iaculis. Ut vel sollicitudin felis. Suspendisse potenti.


Table Styles

First Option Second Option Third Option
first first first
second second second
third third third
fourth fourth fourth


Code Formatting

pre {
    position: relative;
    background: #f7f7f7;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
    tab-size: 4;
}

Mixed List Items

  • Unordered list item one
  • Unordered list item two
    1. Ordered list item one
    2. Ordered list item two
      • Unordered list item one
      • Unordered list item two
        1. Ordered list item one
        2. Ordered list item two
        3. Ordered list item three
      • Unordered list item three
    3. Ordered list item three
  • Unordered list item three