Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis nibh tellus. Aenean est magna, sagittis vel nulla ac, commodo maximus tellus. Vestibulum sagittis fermentum ex. Pellentesque mi ex, sollicitudin vel nisl eu, vulputate maximus urna. Maecenas sapien leo, ullamcorper a tempor id, dictum sit amet libero. Donec facilisis ipsum sed volutpat posuere.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Sed augue ipsum, ultricies at porttitor id, molestie viverra ipsum. Vivamus dapibus feugiat tincidunt. Donec mollis dolor in ex iaculis pulvinar. Nam posuere tincidunt neque ac consequat. Integer at finibus erat, vel rhoncus tortor. Donec ultrices a ex a semper. In non diam metus.

Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 4

Display 3

Display 2

Display 1

 

Inline Quotes

Sed vel ultrices turpis, ut pretium mauris. Maecenas nibh lacus, porttitor vel justo at, lacinia gravida quam. Aliquam sed arcu lacus estibulum id ipsum dictum, scelerisque est eu. sagittis lorem at ex eu augue pulvinar dapibus. Sed vulputate volutpat ex, et mollis dui sagittis id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ac egestas ligula, ac pulvinar arcu. Aliquam sollicitudin luctus massa non interdum

Lead

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. In nisl arcu, suscipit a urna iaculis, bibendum pharetra mi. Cras est ante, cursus eget metus ut, posuere pharetra neque. Phasellus eget metus faucibus, commodo erat nec, posuere elit duis mollis, est non commodo luctus.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Abbreviations

Stylized implementation of HTML’s abbr element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.

attr

HTML

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

List Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et accumsan enim, et dapibus tellus. In ac vehicula nisl. Sed consectetur vel nunc vel fermentum. Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi.

  • Aenean mollis lectus lacus, eget congue massa placerat ac.
  • Ut non nunc tempor nulla laoreet elementum iaculis eget nunc.
  • Nunc tincidunt faucibus dolor nibh eu enim sollicitudins. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et accumsan enim, et dapibus tellus. In ac vehicula nisl. Sed consectetur vel nunc vel fermentum. Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi.

  • Aenean mollis lectus lacus, eget congue massa placerat ac.
  • Ut non nunc tempor nulla laoreet elementum iaculis eget nunc.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Aliquam et accumsan enim, et dapibus tellus.
      • In ac vehicula nisl.
      • Sed consectetur vel nunc vel fermentum.
    • Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi.
    • Aenean mollis lectus lacus, eget congue massa
  • Nunc tincidunt faucibus dolor nibh eu enim sollicitudins. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et accumsan enim, et dapibus tellus. In ac vehicula nisl. Sed consectetur vel nunc vel fermentum. Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi.

  1. Aenean mollis lectus lacus, eget congue massa placerat ac.
  2. Ut non nunc tempor nulla laoreet elementum iaculis eget nunc.
  3. Nunc tincidunt faucibus dolor nibh eu enim sollicitudins. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et accumsan enim, et dapibus tellus. In ac vehicula nisl. Sed consectetur vel nunc vel fermentum. Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi.

  1. Aenean mollis lectus lacus, eget congue massa placerat ac.
  2. Ut non nunc tempor nulla laoreet elementum iaculis eget nunc.
    1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    2. Aliquam et accumsan enim, et dapibus tellus.
      1. In ac vehicula nisl.
      2. Sed consectetur vel nunc vel fermentum.
    3. Phasellus tellus neque, suscipit in ipsum eu, faucibus rhoncus mi. Aenean mollis lectus lacus, eget congue massa
  3. Nunc tincidunt faucibus dolor nibh eu enim sollicitudins. 

Inline Code

For example, <section> should be wrapped as inline.

Preformatted Text

<p>Sample text here...</p>

Code Block

A block of code wrapped in a <pre><code>...</code></pre> set.

<div id="search-container" class="search-box-wrapper hide">
   <div class="search-box">
       <?php get_search_form(); ?>
   </div>
</div>