Typography

Basic text writing, including headings, body text, fonts, quotes, and more.

Headings

h1. Raptor UI

h2. Raptor UI

h3. Raptor UI

h4. Raptor UI

h5. Raptor UI

h6. Raptor UI


        <h1>h1. Raptor UI</h1>
        <h2>h2. Raptor UI</h2>
        <h3>h3. Raptor UI</h3>
        <h4>h4. Raptor UI</h4>
        <h5>h5. Raptor UI</h5>
        <h6>h6. Raptor UI</h6>

Fonts

Welcome to Jurassic Park


      <p class="jp-font-fam">Welcome to Jurassic Park</p>
      <p class="ptsans-font-fam">Welcome to Jurassic Park</p>

Quote

"God Creates Dinosaurs. God Destroys Dinosaurs. God Creates Man. Man Destroys God. Man Creates Dinosaurs."
—Dr. Ian Malcolm


      <blockquote class="quote-border">
        "God Creates Dinosaurs. God Destroys Dinosaurs. God Creates Man. Man
        Destroys God. Man Creates Dinosaurs."
        <br />
        <span class="quote-writer gray-text"><span>—</span>Dr. Ian Malcolm</span>
      </blockquote>

Paragraph

Just a paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto tempora assumenda doloribus dicta quibusdam vitae. Tempore aut impedit deserunt eum neque, rerum optio dolore repellat sed quibusdam illum hic cum adipisci molestias ea accusantium reiciendis, alias possimus et! Exercitationem facilis aut error. Et, laborum.


      <p>
        Just a paragraph - Lorem ipsum dolor sit amet, consectetur adipisicing
        elit. Architecto tempora assumenda doloribus dicta quibusdam vitae.
        Tempore aut impedit deserunt eum neque, rerum optio dolore repellat
        sed quibusdam illum hic cum adipisci molestias ea accusantium
        reiciendis, alias possimus et! Exercitationem facilis aut error. Et,
        laborum.
      </p>

Gray Text

This is a gray text


      <p class="gray-text">This is a gray text</p>

Centered Text

This is a centered text


      <p class="center-text">This is a centered text</p>

Small Text

This is a small text.


      <p class="small-text">This is a small text.</p>

Inline Text Utilities

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 will render as underlined

This line rendered as bold text.

This line rendered as italicized text.


      <p>You can use the mark tag to <mark>highlight</mark> text.</p>
      <p>
        <del>This line of text is meant to be treated as deleted text.</del>
      </p>
      <p><u>This line of text will render as underlined</u></p>
      <p><strong>This line rendered as bold text.</strong></p>
      <p><em>This line rendered as italicized text.</em></p>

Colored Text

Primary Colored Text

Secondary Colored Text

Accent Colored Text

Success Colored Text

Warning Colored Text

Danger Colored Text

Gray Colored Text


      <p class="primary-text">Primary Colored Text</p>
      <p class="secondary-text">Secondary Colored Text</p>
      <p class="accent-text">Accent Colored Text</p>
      <p class="success-text">Success Colored Text</p>
      <p class="warning-text">Warning Colored Text</p>
      <p class="danger-text">Danger Colored Text</p>
      <p class="gray-text">Gray Colored Text</p>