Typography

Intro Text Style

This is an example of intro text. It’s a larger, more bold style and the same color as your headings. It’s perfect as a start to a blog post as it draws the reader in to the article easily. If you want to use this just add the class of ‘intro’ to your P or span class using the text tab in the WordPress editor.

<p class="intro">Doing this would produce the intro style text</p>

Basic Text Styles

This is an example of paragraph text. We have strong text, regular text and italic text, and here is a link.. You can also highlight text by adding a span with the class of ‘highlight’ just like this bit of text. The environment, after all, is where we all meet, where we all where we all have a mutual interest. It is one thing that all of us share. It is not only a mirror of ourselves, but a focusing lens on what we can become.

<span class="highlight">using this would make the text highlighted</span>

Code Styling
pre {
    font-family: monospace;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

Drop Caps

A drop cap can be used as both a decorative element, typically at the start of a section or chapter. The large uppercase letter can easily add impact, and an element of flair, to your paragraphs and content when used sparingly and cautiously. You can add a dropcap to any paragraph by adding the class of ‘dropcap’ as shown below below:

<span class="dropcap">T</span>his is how you add a span around your first letter for a dropcap

Example of H1 Title

Example of H2 Title

Example of H3 Title

Example of H4 Title

Example of H5 Title
Example of H6 Title

Blockquote

Earth provides enough to satisfy every man’s needs, but not every man’s greed.


Image Aligned Left
Caption Text is here!

Caption Text is here!

Align your images to the left or right using WordPress default functions to add impact to a section of your content like this example. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.


Image Aligned Right
Example of caption text

Example of caption text

Align your images to the left or right using WordPress default functions to add impact to a section of your content like this example. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.

Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis.


List Items
  1. Linked ordered list item
  2. Ordered list item
    1. Linked ordered list item
    2. Ordered list item
    3. Linked ordered list item
    4. Ordered list item
    5. Linked ordered list item
  3. Linked ordered list item
  4. Ordered list item
  5. Linked ordered list item

 

X