Fonts

Primary Fonts

Effra (Entire Font Family)

Style: Heavy
Usage: Headlines, Call-outs, FAR BEYOND language for emphasis, names, titles
Case: Caps

Heavy

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Style: Medium, Medium Italic, Regular, Regular Italic, Light, Light Italic
Usage: Body copy, sub-headlines
Case: Sentence case, title case

Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Medium Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Regular Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Light Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

CSS Declaration: Effra W01, sans-serif

Museo Slab (Entire Font Family)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqstuvwxyz

Style: 100,100 Italic or 300,300 Italic
Usage: Headlines, sub-headlines, quotes
Case: Caps, sentence case, title case

Style: 900
Usage: Headlines, to emphasize single words, names and titles in small type sizes, referencing classes and certain projects
Case: Caps
Style: 300, 300 Italic
500,500 Italic, 700,700 Italic
Usage: Headlines, body copy, numbers, credits
Case: Sentence case, title case
CSS Declaration: ???

Secondary Fonts

Despite there being a listing of secondary fonts on the branding site, these fonts are unavailable through our published fonts.com project. So are unavailble for use at this time.

HTML

									
										
        <h1>Primary Fonts</h1>

        <h2 class="red">Effra <small>(Entire Font Family)</small></h2>
        <span class="label red">Style:</span> Heavy<br />
        <span class="label red">Usage:</span> Headlines, Call-outs, FAR BEYOND language for emphasis, names, titles<br />
        <span class="label red">Case:</span> Caps<br />

        <h1 class="font-default--heavy">Heavy</h1>
        <h1 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default--heavy">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default--heavy">abcdefghijklmnopqstuvwxyz</h6>

        <br />
        <span class="label red">Style:</span> Medium, Medium Italic, Regular, Regular Italic, Light, Light Italic<br />
        <span class="label red">Usage:</span> Body copy, sub-headlines<br />
        <span class="label red">Case:</span> Sentence case, title case<br />

        <h1 class="font-default--medium">Medium</h1>
        <h1 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default--medium">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default--medium">abcdefghijklmnopqstuvwxyz</h6>

        <h1 class="font-default--medium italic">Medium Italic</h1>
        <h1 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default--medium italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default--medium italic">abcdefghijklmnopqstuvwxyz</h6>

        <h1 class="font-default">Regular</h1>
        <h1 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default">abcdefghijklmnopqstuvwxyz</h6>

        <h1 class="font-default italic">Regular Italic</h1>
        <h1 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default italic">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default italic">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default italic">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default italic">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default italic">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default italic">abcdefghijklmnopqstuvwxyz</h6>

        <h1 class="font-default--light">Light</h1>
        <h1 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default--light">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default--light">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default--light">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default--light">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default--light">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default--light">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default--light">abcdefghijklmnopqstuvwxyz</h6>

        <h1 class="font-default--light italic">Light Italic</h1>
        <h1 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-default--light italic">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-default--light italic">abcdefghijklmnopqstuvwxyz</h6>


        <span class="label red">CSS Declaration:</span> Effra W01, sans-serif<br />

        <h2 class="font-primary-alt red">Museo Slab <small>(Entire Font Family)</small></h2>
        <h1 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
        <h1 class="font-alt">abcdefghijklmnopqstuvwxyz</h1>
        <h2 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
        <h2 class="font-alt">abcdefghijklmnopqstuvwxyz</h2>
        <h3 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
        <h3 class="font-alt">abcdefghijklmnopqstuvwxyz</h3>
        <h4 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
        <h4 class="font-alt">abcdefghijklmnopqstuvwxyz</h4>
        <h5 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h5>
        <h5 class="font-alt">abcdefghijklmnopqstuvwxyz</h5>
        <h6 class="font-alt">ABCDEFGHIJKLMNOPQRSTUVWXYZ</h6>
        <h6 class="font-alt">abcdefghijklmnopqstuvwxyz</h6>
        <span class="label red">Style:</span> 100,100 Italic or 300,300 Italic<br />
        <span class="label red">Usage:</span> Headlines, sub-headlines, quotes<br />
        <span class="label red">Case:</span> Caps, sentence case, title case<br />
        <br />
        <span class="label red">Style:</span> 900<br />
        <span class="label red">Usage:</span> Headlines, to emphasize single words, names and titles in small type sizes, referencing classes and certain projects<br />
        <span class="label red">Case:</span> Caps<br />
        <span class="label red">Style:</span> 300, 300 Italic<br />500,500 Italic, 700,700 Italic<br />
        <span class="label red">Usage:</span> Headlines, body copy, numbers, credits<br />
        <span class="label red">Case:</span> Sentence case, title case<br />

        <span class="label red">CSS Declaration:</span> ???<br />

        <h2 class="content-header">Secondary Fonts</h2>
        <p>
          Despite there being a listing of secondary fonts on the branding site, these fonts are unavailable through our published fonts.com project. So are unavailble for use at this time.
        </p>

Headings

Standard Headings:

This is an h1 Small text in h1

This is an h2 Small text in h2

This is an h3 Small text in h3

This is an h4 Small text in h4

This is an h5 Small text in h5

Size Modifiers

Occasionally you may want a heading tag to be sized differently, we provide the following heading modifier classes

H1 with heading2

H2 with heading1

H3 with heading5

Serif Headings:

This is an h1.serif Small text in h1

This is an h2.serif Small text in h2

This is an h3.serif Small text in h3

This is an h4.serif Small text in h4

This is an h5.serif Small text in h5

Content Headers

This is an h1.content-header Small text in h1

This is an h2.content-header Small text in h2

This is an h3.content-header Small text in h3

This is an h4.content-header Small text in h4

This is an h5.content-header Small text in h5

Special Cases:

h1.mega.sbu-3d-shadow

This is an h1.mega

This is an h1.site-name

HTML

									
										

               <h3 class="content-header heading-annotation">Standard Headings:</h3>
                    <h1>This is an h1 <small>Small text in h1</small></h1>
                    <h2>This is an h2 <small>Small text in h2</small></h2>
                    <h3>This is an h3 <small>Small text in h3</small></h3>
                    <h4>This is an h4 <small>Small text in h4</small></h4>
                    <h5>This is an h5 <small>Small text in h5</small></h5>
                <h3 class="content-header">Size Modifiers</h3>
                    <p>Occasionally you may want a heading tag to be sized differently, we provide the following heading modifier classes</p>
                <h1 class="heading2">H1 with heading2</h1>
                <h2 class="heading1">H2 with heading1</h2>
                <h3 class="heading5">H3 with heading5</h3>


                <h3 class="content-header">Serif Headings:</h3>
                    <h1 class="serif">This is an h1.serif <small>Small text in h1</small></h1>
                    <h2 class="serif">This is an h2.serif <small>Small text in h2</small></h2>
                    <h3 class="serif">This is an h3.serif <small>Small text in h3</small></h3>
                    <h4 class="serif">This is an h4.serif <small>Small text in h4</small></h4>
                    <h5 class="serif">This is an h5.serif <small>Small text in h5</small></h5>
                    <br />
                    <br />
                <h3 class="content-header">Content Headers</h3>
                    <h1 class="content-header">This is an h1.content-header <small>Small text in h1</small></h1>
                    <h2 class="content-header">This is an h2.content-header <small>Small text in h2</small></h2>
                    <h3 class="content-header">This is an h3.content-header <small>Small text in h3</small></h3>
                    <h4 class="content-header">This is an h4.content-header <small>Small text in h4</small></h4>
                    <h5 class="content-header">This is an h5.content-header <small>Small text in h5</small></h5>
                    <br>
                    <br>
                <h3 class="content-header">Special Cases:</h3>
                    <h1 class="mega sbu-3d-shadow">h1.mega.sbu-3d-shadow</h1>
                    <h1 class="mega">This is an h1.mega</h1>
                    <h1 class="site-name">This is an h1.site-name</h1>
                    <div class="clearfix"></div>

Heading Group

Heading Groups Occasionally you may want a heading tag to be sized differently, we provide the following heading modifier classes

This is the heading group's main heading

This is the heading group's subheading

HTML

									
										
    <p>Heading Groups Occasionally you may want a heading tag to be sized differently, we provide the following heading modifier classes</p>
<div class="hgroup">

   	<h2>This is the heading group's main heading</h2>
   	<h3>This is the heading group's subheading</h3>
</div>

Text

Normal Paragraphs: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Introduction Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lead: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Caps Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Proper Case: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Serif: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Serif Italic: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Less Spacing: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sub Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SBU 3d Shadow: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

sbu-text-shadow: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Alt: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Font Alt Medium: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Contextual Text

Text Muted: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Primary: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Danger: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BG Primary: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BG Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BG Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BG Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

BG Danger: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Boot Strap Alignments

Text Left: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Centered: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Right: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Justify: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

No Wrap: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HTML

									
										
	<p><strong>Normal Paragraphs: </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>


<p class="introduction"><strong>Introduction Text</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="lead"><strong>Lead</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="caps"><strong>Caps Text</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="proper-case"><strong>Proper Case</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="serif"><strong>Serif</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="serif-italic"><strong>Serif Italic</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="less-spacing"><strong>Less Spacing</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="sub-text"><strong>Sub Text</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="sbu-3d-shadow"><strong>SBU 3d Shadow</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="sbu-text-shadow"><strong>sbu-text-shadow</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="font-alt"><strong>Font Alt</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="font-alt-medium"><strong>Font Alt Medium</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

	<h3 class="content-header">Contextual Text</h3>

	<p class="text-muted"><strong>Text Muted</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p class="text-primary"><strong>Text Primary</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p class="text-success"><strong>Text Success</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p class="text-info"><strong>Text Info</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p class="text-warning"><strong>Text Warning</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	<p class="text-danger"><strong>Text Danger</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p class="bg-primary"><strong>BG Primary</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="bg-success"><strong>BG Success</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="bg-info"><strong>BG Info</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="bg-warning"><strong>BG Warning</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="bg-danger"><strong>BG Danger</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<h3 class="content-header">Boot Strap Alignments</h3>
<p class="text-left"><strong>Text Left</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-center"><strong>Text Centered</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-right"><strong>Text Right</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="text-justify"><strong>Text Justify</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="text-nowrap"><strong>No Wrap</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Inline Elements

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

HTML

									
										
	<p><strong>Strong is used to indicate strong importance</strong></p>

	<p><em>This text has added emphasis</em></p>

	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

	<p>The <i>i element</i> is text that is set off from the normal text</p>

	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

	<p><s>This text has a strikethrough</s></p>

	<p>Superscript<sup>®</sup></p>

	<p>Subscript for things like H<sub>2</sub>O</p>

	<p><small>This small text is small for for fine print, etc.</small></p>

	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

	<p>Keybord input: <kbd>Cmd</kbd></p>

	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

	<p><cite>This is a citation</cite>

	</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

	<p>The <mark>mark element</mark> indicates a highlight</p>

	<p><code>This is what inline code looks like.</code></p>

	<p><samp>This is sample output from a computer program</samp></p>

	<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>

Links

The .file-link and .file-link-before classes use the file extension from the href to determine which icon to use. Currently only pdf, doc, docx, xls, xlsx, ppt, pptx are supported

File Link to PDF

File Link to XLS/XLSX

File Link to DOC/DOCX

File Link to PPT/PPTX

File Link to PDF

File Link to XLS/XLSX

File Link to DOC/DOCX

File Link to PPT/PPTX

Links can be affected by color classes .black and .emerald

Black Link Text

Emerald Link Text

HTML

									
										

<p>
<a href="#">Link Text</a>
</p>

<p>
<a class="arrow-link" href="#">Arrow Link</a>
</p>

<p>
<a class="dashed-link" href="#">Dashed Link</a>
</p>

<p>
<a class="ellipsis-link" href="#">Ellipsis Link</a>
</p>

<p class="alert-info alert">
    The <code>.file-link</code> and <code>.file-link-before</code> classes use the file extension from the href to determine which icon to use. Currently only pdf, doc, docx, xls, xlsx, ppt, pptx are supported
</p>

<p>
<a class="file-link" href="#.pdf">File Link to PDF</a>
</p>

<p>
<a class="file-link" href="#.xls">File Link to XLS/XLSX</a>
</p>

<p>
<a class="file-link" href="#.doc">File Link to DOC/DOCX</a>
</p>

<p>
<a class="file-link" href="#.xls">File Link to PPT/PPTX</a>
</p>

<p>
<a class="file-link-before" href="#.pdf">File Link to PDF</a>
</p>

<p>
<a class="file-link-before" href="#.xls">File Link to XLS/XLSX</a>
</p>

<p>
<a class="file-link-before" href="#.doc">File Link to DOC/DOCX</a>
</p>

<p>
<a class="file-link-before" href="#.xls">File Link to PPT/PPTX</a>
</p>

<p class="alert-info alert">
    Links can be affected by color classes <code>.black</code> and <code>.emerald</code>
</p>

<p>
<a class="black" href="#">Black Link Text</a>
</p>

<p>
<a class="emerald" href="#">Emerald Link Text</a>
</p>

Preformatted Text

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

HTML

									
										

<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

HTML

									
										
<blockquote>
	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

Blockquote With Citation

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Quote Source

HTML

									
										
      <blockquote>
         	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. </p>
      	<cite class="citation">Quote Source</cite>
      </blockquote>

Address

Company Name

1234 Main St.

Anywhere, 101010, CA

U.S.A

+1.888.123.4567

HTML

									
										
<div class="vcard">
	<div class="org">Company Name</div>
	<div class="adr">
		<div class="street-address">1234 Main St.</div>
		<span class="locality">Anywhere</span>,
		<span class="postal-code">101010</span>,
		<abbr class="region" title="California">CA</abbr>
		<div class="country-name">U.S.A</div>
	</div>
	<div class="tel">+1.888.123.4567</div>
</div>

Hr

HTML

									
										
<hr />