CCH

Style Guide

This style guide provides a look at the default styles available for use within Aurora’s post and pages. Use it to create the best content you can for your site. Check out the Shortcodes page for even more with Shortcodes Ultimate.

Header one

Header two

Header three

Header four

Header five
Header six

 

Paragraph Styles


Aurora is tuned to provide an exceptional user reading experience by sticking to the recommended characters per line. Along with plenty of space between lines and high contrasting colors, Aurora’s reading experience is both pleasant and easy on the eyes.

Need to write posts with code examples? Use the <code> tag to make code stand out.

Blockquotes


The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

 

Pull Quotes


Etiam porta sem malesuada magna mollis euismod.Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur.

<span class="pull-left">This text will appear in a pull quote.</span>

Etiam porta sem malesuada magna mollis euismod.Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.

<span class="pull-right">This text will appear in a pull quote.</span>

 

Highlight


Easily call attention to facts in your post by wrapping text with a span using the class highlight.

<span class="highlight">Text to highlight.</span>

 

Unordered Lists (Nested)


  • List item one
    • List item one
      • List item one
      • List item two
      • List item three
      • List item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four

 

Ordered List (Nested)


  1. List item one -start at 8
    1. List item one
      1. List item one -reversed attribute
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

 

Code Blocks


.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
}

 

Tables


Employee Salary
John Doe $1 Because that’s all Steve Jobs needed for a salary.
Jane Doe $100K For all the blogging she does.
Fred Bloggs $100M Pictures are worth a thousand words, right? So Jane x 1,000.
Jane Bloggs $100B With hair like that?! Enough said…