Typography

Titles

This is a title 1.

This is a title 2.

This is a title 3.

This is a title 4.

This is a title 5.
This is a title 6.
<h1>This is a title 1.</h1>
<h2>This is a title 2.</h2>
<h3>This is a title 3.</h3>
<h4>This is a title 4.</h4>
<h5>This is a title 5.</h5>
<h6>This is a title 6.</h6>

Paragraphs

Quas est dolore a et omnis aspernatur omnis. excepturi sunt velit magnam. velit aut tenetur eum et voluptas dignissimos natus dolores similique ducimus est ut sequi mollitia. velit eos maxime aut dolorem quaerat architecto quaerat inventore et et repudiandae eum. sint nulla distinctio non ut totam id dolores voluptatum et voluptatem facilis omnis possimus laudantium 

<p>
  Necessitatibus incidunt voluptatem accusantium natus similique odit odit est sint molestiae laboriosam corporis dignissimos. accusantium architecto et laudantium architecto accusantium perferendis aut amet quis inventore magnam neque exercitationem odio. minus et omnis esse repellendus debitis doloribus voluptates amet sequi consequuntur. perferendis aut voluptatum ut laboriosam. consequuntur officiis quia non eum omnis ut consequuntur fugiat sit sunt exercitationem vero inventore. corrupti modi ut facere sit sed
</p>

Quotes

Voluptates praesentium ea aliquid non repellendus. ut velit quia voluptatem. sequi placeat laudantium aliquid voluptas in facilis sequi temporibus mollitia nihil voluptas fugiat. minus minus consectetur et sunt 
<blockquote>
  Consequatur dolorem hic laudantium quis ducimus. eveniet nemo voluptatum distinctio et in. praesentium facere enim velit recusandae dolores. consequuntur rem quia nihil et assumenda sapiente qui est qui tempora praesentium rerum modi. est est amet quia quia mollitia aspernatur quisquam quo et. quo asperiores dolor quia aspernatur nulla ipsa sit officia voluptatem sit adipisci harum nulla. delectus expedita error expedita aut commodi pariatur culpa et
</blockquote>

Links

Here is a sentence. This is a link. 

<p>
  Here is a sentence.
  <a>
    This is a link.
  </a>
</p>

Lists

Unordered List

  • Dignissimos magni facere sunt voluptas
  • Deserunt eius distinctio aut earum nam aut sed sed
  • Vero culpa qui itaque laudantium dicta quod libero id nobis sunt expedita rem quis et
  • Nemo laudantium beatae inventore
  • Et eligendi ad tempora est 
<ul>
  <li>
    Sunt rerum ex qui animi laudantium est dolorem
  </li>
  <li>
    Corrupti explicabo magni sed officia modi voluptatem voluptas ut quibusdam officia reiciendis tenetur
  </li>
  <li>
    Sunt nemo placeat libero perspiciatis asperiores
  </li>
  <li>
    Voluptas perferendis aut aut et beatae quo sequi doloremque sed et voluptas
  </li>
  <li>
    Similique tempora sit occaecati omnis rerum sed dicta
  </li>
</ul>

Ordered List

  1. Sit perferendis id nemo ea molestiae officia et qui adipisci qui nulla
  2. Voluptas similique est atque ex qui fugit consequatur dolor
  3. Qui delectus consequatur tempore sed consectetur consequatur mollitia ut aut omnis ut ut
  4. Quos voluptas voluptatem harum neque tempora doloribus
  5. Molestiae culpa quod qui sit cumque dolores debitis id laudantium 
<ol>
  <li>
    Consequuntur voluptatem id placeat voluptatibus deleniti
  </li>
  <li>
    Voluptas minima quisquam inventore ut autem facilis voluptas et sunt a dolorem repellat minus ipsa
  </li>
  <li>
    Esse nam incidunt ut laudantium
  </li>
  <li>
    Modi illum aperiam laboriosam voluptatem dolores quia ratione debitis
  </li>
  <li>
    Et temporibus esse aperiam voluptatem maiores hic accusamus doloremque porro maiores unde est cum nam
  </li>
</ol>

For lists with icon bullets, see Type Patterns.

Attributes

Default

Company
AppDirect
<dl>
  <dt>Company</dt>
  <dd>AppDirect</dd>
</dl>

Inline

Company:
AppDirect
<dl>
  <div class="adb-description_line">
    <dt>Company:</dt>
    <dd>AppDirect</dd>
  </div>
</dl>

Time

<time>
  01/02/2013 4:56 PM
</time>

<time>
  Monday, January 2, 2013, 4:56 PM
</time>

Code

Inline Code

Please apply .class_name to the following elements. 

<p>
  Please apply
  <code>.class_name</code>
  to the following elements.
</p>

Code Blocks

In ullam reiciendis earum natus necessitatibus qui. cupiditate facere nemo quis. ea iure blanditiis aperiam corrupti rerum dicta sed eveniet quia voluptatibus illo non provident ut. ut nihil blanditiis corporis id fugit et sint. ut nemo laudantium dolores rem architecto culpa
<pre>Illo amet minus nisi distinctio et provident est nisi ea dolorem nam nisi perferendis et. sequi expedita quia ex dolor velit quo dolore. iste est sunt commodi in alias quis sit optio ratione. laborum rem est possimus velit dignissimos praesentium quia corrupti. est officiis aut quia exercitationem hic facere dolor. in nisi consequatur et in eligendi dignissimos pariatur distinctio magni id qui aut</pre>