Typography

Add some spice to your content.

This is the heading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

This is the heading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

This is the heading three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

This is the heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

This is the heading five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

This is the heading six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.


This is the content heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

<h2 class="ribbon-header">Heading text</h2>

Underlined

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

<h2 class="underlined-header">Heading text</h2>

Lists

<ul class="[class name]">
    <li>Items...</li>
</ul>

Circle list (.circle-list)

  • Lorem ipsum dolor sit amet
  • Ut tincidunt, magna non sodales
  • Consectetur adipiscing elit
  • Dignissim at rhoncus gravida
  • Diam metus laoreet augue

Featured-list (.featured-list)

Arrow list (.arrow-list)

  • Lorem ipsum dolor sit amet
  • Ut tincidunt, magna non sodales
  • Consectetur adipiscing elit
  • Dignissim at rhoncus gravida
  • Diam metus laoreet augue

Check list (.check-list)

  • Lorem ipsum dolor sit amet
  • Ut tincidunt, magna non sodales
  • Consectetur adipiscing elit
  • Dignissim at rhoncus gravida
  • Diam metus laoreet augue

Ban list (.ban-list)

  • Lorem ipsum dolor sit amet
  • Ut tincidunt, magna non sodales
  • Consectetur adipiscing elit
  • Dignissim at rhoncus gravida
  • Diam metus laoreet augue

Info list (.info-list)

  • Lorem ipsum dolor sit amet
  • Ut tincidunt, magna non sodales
  • Consectetur adipiscing elit
  • Dignissim at rhoncus gravida
  • Diam metus laoreet augue

Inline elements

Lorem ipsum dosectetur adipisicing This is sup element elit, sed do. Lorem ipsum This is sub element dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut This is del enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do. Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem dfn element here ipsum dosectetur adipisicing elit, strong text sed do. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor highlighted text by using "mark" tag or "highlight" class incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur Some code text adipisicing elit, abbreviation sed do.

<div>
    Preformatted text
</div>

Dropcap

Uorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p class="drop-cap">Paragraph text</p>

Prestyled texts

This is "font 1" lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="font-1">Paragraph text</p>

This is "font 2" lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="font-2">Paragraph text</p>

This is "font 3" lorem ipsum dolor sit amet, consectetur adipiscing elit.

<p class="font-3">Paragraph text</p>

Text colors

<p class="color-[name]">Paragraph text</p>

Maroon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Ponceau Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Orange Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Gamboge Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Lemon Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Olive Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Teal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Cerulean Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Denim Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Brown Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Sepia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula.

Text sizes

The "x-small" text, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p class="x-small">Paragraph text</p>

The "small" text, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p class="small">Paragraph text</p>

Regular text, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p>Regular paragraph no additional class needed</p>

The "large" text, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p class="large">Paragraph text</p>

The x-large text, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

<p class="x-large">Paragraph text</p>

Quotes

Regular blockquote, lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula nisi, dignissim at rhoncus gravida, interdum a arcu. Ut tincidunt, magna non sodales tristique, diam metus laoreet augue, vitae vehicula odio risus a urna.

- Some guy
<blockquote>
    <p>Regular quote</p>
    <cite>- Some guy</cite>
</blockquote>

Aligned left blockquote, lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.

<blockquote class="align-left">Aligned left blockquote</blockquote>

Aligned right blockquote, lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.

<blockquote class="align-right">Aligned right blockquote</blockquote>

Aligned left image

Image example Aligned left image with caption and zoom

Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing

<a class="img-holder align-left" rel="prettyPhoto">
    <img href="..." alt="..." />

    <span class="caption">Caption text</span>
</a>

Aligned right image

Image example Aligned right image without zoom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<a class="img-holder align-right">
    <img href="..." alt="..." />
    <span class="caption">Caption text</span>
</a>

Centered image

Image example Centered image with caption without zoom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dosectetur adipisicing elit, sed do.Lorem ipsum dolor sit amet, consectetur adipisicing.

<p class="align-center">
    <a href="..." class="img-holder">
        <img src="/Portals/Manifest/..." alt="..." />
        <span class="caption">Caption text</span>
    </a>
</p>

Contacts

  • 123 Main Street Los Angeles, CA, 94101
  • Phone:+1 123-23-123
  • Fax:+1 123-23-123

Image Gallery

Recent Tweets

Feedback