Colors

University Colors

These colors are officially sanctioned and used in University designs

Stony Brook Red

Foreground Class: .red
Background Class: .bg-red

HEX: #990000
RGB: 153 0 0

Dark Red

Foreground Class: .dark-red
Background Class: .bg-dark-red

HEX: #890000
RGB: 137 0 0

Gray

Foreground Class: .gray
Background Class: .bg-gray

HEX: #CCCCCC
RGB: 204 204 204

Light Gray

Foreground Color: .light-gray
Background Class: .bg-light-gray

HEX: #EEEEEE
RGB: 238 238 238

Dark Gray

Foreground Class: .dark-gray
Background Class: .bg-dark-gray

HEX: #333333
RGB: 51 51 51

White

Foreground Class: .white
Background Class: .bg-white

HEX: #FFFFFF
RGB: 255 255 255

Black

Foreground Class: .black
Background Class: .bg-black

HEX: #000000
RGB: 0 0 0

Supplemental UI Colors

These should be used to highlight specific interface elements and should be used sparingly on a page.

Alizarin

Foreground Class: .alizarin
Background Class: .bg-alizarin

HEX: #E74C3C
RGB: 231 76 60

Amethyst

Foreground Class: .amethyst
Background Class: .bg-amethyst

HEX: #9B59B6
RGB: 155 89 182

Asphalt

Foreground Class: .asphalt
Background Class: .bg-asphalt

HEX: #34495E
RGB: 52 73 94

Emerald

Foreground Class: .emerald
Background Class: .bg-emerald

HEX: #2ECC71
RGB:  46 204 113

Pom

Foreground Class: .pom
Background Class: .bg-pom

HEX: #C0392B
RGB: 192 57 43

River

Foreground Class: .river
Background Class: .bg-river

HEX: #3498DA
RGB: 52 152 219

Sun

Foreground Class: .sun
Background Class: .bg-sun

HEX: #F39C12
RGB: 243 156 18

Turquoise

Foreground Class: .turquoise
Background Class: .bg-turquoise

HEX: #1ABC9C
RGB: 26 188 156

Corporate Colors

These colors should only be used in conjunction with their corporate counter-part.

Facebook

Foreground Class: .facebook
Background Class: .bg-facebook

HEX: #3B5998
RGB: 59 89 152

Twitter

Foreground Class: .twitter
Background Class: .bg-twitter

HEX: #55ACEE
RGB: 85 172 238

YouTube

Foreground Class: .youtube
Background Class: .bg-youtube

HEX: #55ACEE
RGB: 205 32 31

Google Plus

Foreground Class: .google-plus
Background Class: .bg-google-plus

HEX: #DD4B39
RGB: 221 75 57

Tumblr

Foreground Class: .tumblr
Background Class: .bg-tumblr

HEX: #35465C
RGB: 53 70 92

Instagram

Foreground Class: .instagram
Background Class: .bg-instagram

HEX: #3F729B
RGB: 63 114 155

Yammer

Foreground Class: .yammer
Background Class: .bg-yammer

HEX: #0072C4
RGB: 0 114 198

HTML

									
										

<div class="row">
<div class="col-sm-12">
    <h3>University Colors</h3>
    <p class="introduction">These colors are officially sanctioned and used in University designs</p>
</div>
</div>
<div class="row">
        <div class="col-sm-6 col-md-4">
                <h4 class="">Stony Brook Red</h4>
                <div class="color-blurb bg-red"></div>
                <pre><code class="">Foreground Class: .red<br />Background Class: .bg-red </code></pre>
                <pre><code class="">HEX: #990000<br>RGB: 153 0 0</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Dark Red</h4>
                <div class="color-blurb bg-dark-red"></div>
                <pre><code class="">Foreground Class: .dark-red<br />Background Class: .bg-dark-red </code></pre>
                <pre><code class="">HEX: #890000<br>RGB: 137 0 0</code></pre>
        </div>
</div>

<div class="row">

        <div class="col-sm-6 col-md-4">
                <h4 class="">Gray</h4>
                <div class="color-blurb bg-gray"></div>
                <pre><code class="">Foreground Class: .gray<br />Background Class: .bg-gray </code></pre>
                <pre><code class="">HEX: #CCCCCC<br>RGB: 204 204 204</code></pre>
        </div>





        <div class="col-sm-6 col-md-4">
                <h4 class="">Light Gray</h4>
                <div class="color-blurb bg-light-gray"></div>
                <pre><code class="">Foreground Color: .light-gray<br />Background Class: .bg-light-gray </code></pre>
                <pre><code class="">HEX: #EEEEEE<br>RGB: 238 238 238</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Dark Gray</h4>
                <div class="color-blurb bg-dark-gray"></div>
                <pre><code class="">Foreground Class: .dark-gray<br />Background Class: .bg-dark-gray </code></pre>
                <pre><code class="">HEX: #333333<br>RGB: 51 51 51</code></pre>
        </div>
</div>
<div class="row">
        <div class="col-sm-6 col-md-4">
                <h4 class="">White</h4>
                <div class="color-blurb bg-white"></div>
                <pre><code class="">Foreground Class: .white<br />Background Class: .bg-white </code></pre>
                <pre><code class="">HEX: #FFFFFF<br>RGB: 255 255 255 </code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Black</h4>
                <div class="color-blurb bg-black"></div>
                <pre><code class="">Foreground Class: .black<br />Background Class: .bg-black </code></pre>
                <pre><code class="">HEX: #000000<br>RGB: 0 0 0 </code></pre>
        </div>

    </div>

<div class="row">
<div class="col-sm-12">

     <h3>Supplemental UI Colors</h3>
    <p class="introduction">These should be used to highlight specific interface elements and should be used sparingly on a page.</p>
</div>
</div>
<div class="row">

        <div class="col-sm-6 col-md-4">
                <h4 class="">Alizarin</h4>
                <div class="color-blurb bg-alizarin"></div>
                <pre><code class="">Foreground Class: .alizarin<br />Background Class: .bg-alizarin </code></pre>
                <pre><code class="">HEX: #E74C3C<br>RGB: 231 76 60</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Amethyst</h4>
                <div class="color-blurb bg-amethyst"></div>
                <pre><code class="">Foreground Class: .amethyst<br />Background Class: .bg-amethyst </code></pre>
                <pre><code class="">HEX: #9B59B6<br>RGB: 155 89 182</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Asphalt</h4>
                <div class="color-blurb bg-asphalt"></div>
                <pre><code class="">Foreground Class: .asphalt<br />Background Class: .bg-asphalt </code></pre>
                <pre><code class="">HEX: #34495E<br>RGB: 52 73 94</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Emerald</h4>
                <div class="color-blurb bg-emerald"></div>
                <pre><code class="">Foreground Class: .emerald<br />Background Class: .bg-emerald </code></pre>
                <pre><code class="">HEX: #2ECC71<br>RGB:  46 204 113</code></pre>
        </div>




        <div class="col-sm-6 col-md-4">
                <h4 class="">Pom</h4>
                <div class="color-blurb bg-pom"></div>
                <pre><code class="">Foreground Class: .pom<br />Background Class: .bg-pom </code></pre>
                <pre><code class="">HEX: #C0392B<br>RGB: 192 57 43</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">River</h4>
                <div class="color-blurb bg-river"></div>
                <pre><code class="">Foreground Class: .river<br />Background Class: .bg-river </code></pre>
                <pre><code class="">HEX: #3498DA<br>RGB: 52 152 219</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Sun</h4>
                <div class="color-blurb bg-sun"></div>
                <pre><code class="">Foreground Class: .sun<br />Background Class: .bg-sun </code></pre>
                <pre><code class="">HEX: #F39C12<br>RGB: 243 156 18</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Turquoise</h4>
                <div class="color-blurb bg-turquoise"></div>
                <pre><code class="">Foreground Class: .turquoise<br />Background Class: .bg-turquoise </code></pre>
                <pre><code class="">HEX: #1ABC9C<br>RGB: 26 188 156</code></pre>
        </div>


    </div>
    <div class="row">
    <div class="col-sm-12">

    <h3>Corporate Colors</h3>
    <p class="introduction">These colors should only be used in conjunction with their corporate counter-part.</p>
   </div>
   </div>
   <div class="row">

        <div class="col-sm-6 col-md-4">
                <h4 class="">Facebook</h4>
                <div class="color-blurb bg-facebook"></div>
                <pre><code class="">Foreground Class: .facebook<br />Background Class: .bg-facebook </code></pre>
                <pre><code class="">HEX: #3B5998<br>RGB: 59 89 152</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Twitter</h4>
                <div class="color-blurb bg-twitter"></div>
                <pre><code class="">Foreground Class: .twitter<br />Background Class: .bg-twitter </code></pre>
                <pre><code class="">HEX: #55ACEE<br>RGB: 85 172 238</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">YouTube</h4>
                <div class="color-blurb bg-youtube"></div>
                <pre><code class="">Foreground Class: .youtube<br />Background Class: .bg-youtube </code></pre>
                <pre><code class="">HEX: #55ACEE<br>RGB: 205 32 31</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Google Plus</h4>
                <div class="color-blurb bg-google-plus"></div>
                <pre><code class="">Foreground Class: .google-plus<br />Background Class: .bg-google-plus</code></pre>
                <pre><code class="">HEX: #DD4B39<br>RGB: 221 75 57</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Tumblr</h4>
                <div class="color-blurb bg-tumblr"></div>
                <pre><code class="">Foreground Class: .tumblr<br />Background Class: .bg-tumblr </code></pre>
                <pre><code class="">HEX: #35465C<br>RGB: 53 70 92</code></pre>
        </div>

        <div class="col-sm-6 col-md-4">
                <h4 class="">Instagram</h4>
                <div class="color-blurb bg-instagram"></div>
                <pre><code class="">Foreground Class: .instagram<br />Background Class: .bg-instagram </code></pre>
                <pre><code class="">HEX: #3F729B<br>RGB: 63 114 155</code></pre>
        </div>


        <div class="col-sm-6 col-md-4">
                <h4 class="">Yammer</h4>
                <div class="color-blurb bg-yammer"></div>
                <pre><code class="">Foreground Class: .yammer<br />Background Class: .bg-yammer </code></pre>
                <pre><code class="">HEX: #0072C4<br>RGB: 0 114 198</code></pre>
        </div>

    </div>





<!-- /.row -->

Overlays

Overlays are placed over backgrounds to add contrast

Overlay Black .overlay-black

Overlay Gray .overlay-gray

Overlay Red .overlay-red

Overlay River .overlay-river

Overlay Turquoise .overlay-turquoise

Overlay White .overlay-white

HTML

									
										
    <h3>Overlays</h3>
    <p class="introduction">Overlays are placed over backgrounds to add contrast</p>
        <div class="overlay-card overlay-black">
            Overlay Black .overlay-black
        </div>

        <div class="overlay-card overlay-gray">
            Overlay Gray .overlay-gray
        </div>

        <div class="overlay-card overlay-red">
            Overlay Red .overlay-red
        </div>

        <div class="overlay-card overlay-river">
            Overlay River .overlay-river
        </div>

        <div class="overlay-card overlay-turquoise">
            Overlay Turquoise .overlay-turquoise
        </div>

        <div class="overlay-card overlay-white">
            Overlay White .overlay-white
        </div>

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 />

Unordered

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Unordered Arrow Bullets

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="arrow-bullets">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Unordered Check Bullets

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="check-bullets">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Unordered Default Bullets

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="default-bullets">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Unordered No Bullets

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="no-bullets">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Unordered Star Bullets

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

HTML

									
										
			<ul class="star-bullets">
				<li>This is a list item in an unordered list</li>
				<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
				<li>
					Lists can be nested inside of each other
					<ul>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an unordered list</li>
					</ul>
				</li>
				<li>This is the last list item</li>
			</ul>

Ordered

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										
			<ol class="">
				<li>This is a list item in an ordered list</li>
				<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
				<li>Lists can be nested inside of each other
					<ol>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an ordered list</li>
					</ol>
				</li>
				<li>This is the last list item</li>
			</ol>

Ordered Alpha Bullets

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										
			<ol class="upper-alpha">
				<li>This is a list item in an ordered list</li>
				<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
				<li>Lists can be nested inside of each other
					<ol>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an ordered list</li>
					</ol>
				</li>
				<li>This is the last list item</li>
			</ol>

Ordered Number Bullets

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

HTML

									
										
			<ol class="number">
				<li>This is a list item in an ordered list</li>
				<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
				<li>Lists can be nested inside of each other
					<ol>
						<li>This is a nested list item</li>
						<li>This is another nested list item in an ordered list</li>
					</ol>
				</li>
				<li>This is the last list item</li>
			</ol>

Definition

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term, which both live in a dl.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.: And it gets a definition too, which is this line.

HTML

									
										<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<dl>
				<dt>Definition List</dt>
				<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
			    <dt>This is a term.</dt>
			    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
			    <dt>Here is another term.</dt>
			    <dd>And it gets a definition too, which is this line.</dd>
			    <dt>Here is term that shares a definition with the term below.</dt>
			    <dd>And it gets a definition too, which is this line.</dd>
			</dl>
		</div>
	</div>
</div>

Horizontal Dictionary

September 04, 2013

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

November 19, 2013

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.

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.

July 22, 2013

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

March 22, 2013

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

April 13, 2013

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.

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.

October 25, 2013

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

HTML

									
										<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <dl class="dl-horizontal">

        <dt>September 04, 2013</dt>
        <dd><p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p></dd>


        <dt>November 19, 2013</dt>
        <dd><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></dd>


        <dt>July 22, 2013</dt>
        <dd><p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p></dd>


        <dt>March 22, 2013</dt>
        <dd><p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p></dd>


        <dt>April 13, 2013</dt>
        <dd><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></dd>


        <dt>October 25, 2013</dt>
        <dd><p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p></dd>

      </dl>
    </div>
  </div>
</div>

Inline

Pri at omnis
Lysine contingency
Shizz fo shizzle
Duo omnes scripta

HTML

									
										
			<ul class="list-inline">
        <li>Pri at omnis</li>
        <li>Lysine contingency</li>
        <li>Shizz fo shizzle</li>
        <li>Duo omnes scripta</li>
			</ul>

Logo

HTML

									
										<a href="#"><img src="../../images/logos/stony-brook-university-logo.jpg" class="logo" alt="Logo Alt Text" /></a>

Favicon

favicon.ico

Apple Icon

Standard Icon

HTML

									
										<h2 class="content-header">favicon.ico</h2>
<img src="../../images/favicons/favicon.ico" />

<h2 class="content-header">Apple Icon</h2>
<img src="../../images/favicons/apple-touch-icon-144x144-precomposed.png" />

<h2 class="content-header">Standard Icon</h2>
<img src="../../images/favicons/icon.png" />

Social

HTML

									
										<img src="../../images/social/facebook.png" />
<img src="../../images/social/flickr.png" />
<img src="../../images/social/google-plus.png" />
<img src="../../images/social/instagram.png" />
<img src="../../images/social/tumblr.png" />
<img src="../../images/social/twitter.png" />
<img src="../../images/social/yammer.png" />
<img src="../../images/social/youtube.png" />

Landscape 4x3

Preferred sizes for 4x3 images.

HTML

									
										<p>
    Preferred sizes for 4x3 images.
</p>
            <img src="../../placeholders/images/sbu/sac-1200x900.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-800x600.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x480.jpg" /><br />

Landscape 16x9

Preferred sizes for 16x9 images.

HTML

									
										<p>
    Preferred sizes for 16x9 images.
</p>
            <img src="../../placeholders/images/sbu/sac-1600x900.jpg" /><br />

            <img src="../../placeholders/images/sbu/sac-800x450.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x360.jpg" /><br />


            <img class="allow-spill" src="../../placeholders/images/sbu/sac-1600x900.jpg" /><br />

Square

Preferred sizes for Square images.

HTML

									
										<p>
    Preferred sizes for Square images.
</p>
            <img src="../../placeholders/images/sbu/sac-1200x1200.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" /><br />
            <img src="../../placeholders/images/sbu/sac-640x640.jpg" /><br />

Circle Images

This pattern contains: atoms-circle-image atoms-flat-circle-image

HTML

									
										
<img class="circle-image" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail flat circle image" />

<img class="flat-circle-image" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail flat circle image" />



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="circle-image" src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square flat circle image" />
    </div>
</div>

<div class="row">
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square flat circle image" />
    </div>
    <div class="col-sm-6 col-md-3">
            <img class="flat-circle-image" src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square flat circle image" />
    </div>
</div>

Thumbnail

This pattern contains: atoms-thumbnail-image

HTML

									
										<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail" class="img-thumbnail">



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square" class="img-thumbnail">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square" class="img-thumbnail">
    </div>
</div>

Rounded

This pattern contains: atoms-rounded-image

HTML

									
										<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="Square Thumbnail" class="img-rounded">



<div class="row">
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-640x640.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/library-1200x1200.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/regatta-1200x1200.jpg" alt="Square" class="img-rounded">
    </div>
    <div class="col-sm-6 col-md-3">
            <img src="../../placeholders/images/sbu/sac-800x800.jpg" alt="Square" class="img-rounded">
    </div>
</div>

Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="default-button">Lorem ipsum dolor sit (37 characters)</a>

Button Default Button Block

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="default-button button-block">Lorem ipsum dolor sit (37 characters)</a>

Button Default Large

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="default-button button-large">Lorem ipsum dolor sit (37 characters)</a>

Button Default Medium

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="default-button button-medium">Lorem ipsum dolor sit (37 characters)</a>

Button Default Small

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="default-button button-small">Lorem ipsum dolor sit (37 characters)</a>

Button Hero Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="hero-button">Lorem ipsum dolor sit (37 characters)</a>

Button Impact Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="impact-button">Lorem ipsum dolor sit (37 characters)</a>

Button Secondary Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="secondary-button">Lorem ipsum dolor sit (37 characters)</a>

Button Subtle Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="subtle-button">Lorem ipsum dolor sit (37 characters)</a>

Icon Button

Lorem ipsum dolor sit (37 characters)

HTML

									
										<a class="icon-button" href="#">
   Lorem ipsum dolor sit (37 characters) <i class="icon-button--icon icon sbuicon-shield"></i>
</a>

Unstyled Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Full Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="table">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Striped Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>

Light Grey Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										
<table class="light-grey-table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

<table class="light-grey-table table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

Responsive Striped Table

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

This pattern contains: atoms-table

HTML

									
										<div class="table-responsive">
    <table class="table table-striped">
    	<thead>
    		<tr>
    			<th>Table Heading 1</th>
    			<th>Table Heading 2</th>
    			<th>Table Heading 3</th>
    			<th>Table Heading 4</th>
    			<th>Table Heading 5</th>
    		</tr>
    	</thead>
    	<tfoot>
    		<tr>
    			<th>Table Footer 1</th>
    			<th>Table Footer 2</th>
    			<th>Table Footer 3</th>
    			<th>Table Footer 4</th>
    			<th>Table Footer 5</th>
    		</tr>
    	</tfoot>
    	<tbody>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	<tr>
    		<td>Table Cell 1</td>
    		<td>Table Cell 2</td>
    		<td>Table Cell 3</td>
    		<td>Table Cell 4</td>
    		<td>Table Cell 5</td>
    	</tr>
    	</tbody>
    </table>
</div>

Tablesaw

Table Saw Demos

Shrink the browser window to see the table reflow.

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

	New York State Resident	Out of State
Undergraduate	$257/credit	$816/credit
Graduate**	$432/credit	$841/credit
Graduate MBA students	$551/credit	$924/credit

This pattern contains: atoms-table

HTML

									
										<h2>Table Saw Demos</h2>
            <p>Shrink the browser window to see the table reflow.</p>


<table class="tablesaw tablesaw-stack light-grey-table table">
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>

            <table class="tablesaw tablesaw-stack light-grey-table width-100-percent" data-tablesaw-mode="stack" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>New York State Resident</th>
                        <th>Out of State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Undergraduate</td>
                        <td>$257/credit</td>
                        <td>$816/credit</td>
                    </tr>
                    <tr>
                        <td>Graduate**</td>
                        <td>$432/credit</td>
                        <td>$841/credit</td>
                    </tr>
                    <tr>
                        <td>Graduate MBA students</td>
                        <td>$551/credit</td>
                        <td>$924/credit</td>
                    </tr>
                </tbody>
            </table>

Simple Two Col

Summary	The Common Application allows you to apply to more than 500 participating schools with one application.
Requirements	Required member questions Essay of at least 250 words Online Teacher/Counselor Evaluation
Application Fee	$50
Notes	Use The Common Application if you are applying to honors programs at Stony Brook. (Applicants to honors programs must follow additional procedures as well.)

HTML

									
										
                            <table class="simple-two-col-table">
                                <tbody><tr>
                                    <td class="cell-label">Summary</td>
                                    <td><a class="external-link" href="http://www.commonapp.org/" target="_blank">The Common Application</a> allows you to apply to more than 500 participating schools with one application.</td>
                                </tr>
                                <tr>
                                    <td class="cell-label">Requirements</td>
                                    <td>
                                        <ul class="default-bullets">
                                            <li>Required member questions</li>
                                            <li>Essay of at least 250 words</li>
                                            <li>Online Teacher/Counselor Evaluation</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cell-label nowrap">Application Fee</td>
                                    <td>$50</td>
                                </tr>
                                <tr>
                                    <td class="cell-label">Notes</td>
                                    <td>Use <a class="external-link" href="http://www.commonapp.org/" target="_blank">The Common Application</a> if you are applying to <a href="http://www.stonybrook.edu/ugadmissions/newhonors/index.shtml" target="_blank">honors programs</a> at Stony Brook. (Applicants to honors programs must follow <a href="http://www.stonybrook.edu/ugadmissions/newhonors/apply.shtml" target="_blank">additional procedures</a> as well.)</td>
                                </tr>
                            </tbody></table>

Figure With Caption

This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.

HTML

									
										<figure>
	<img src="../../placeholders/images/sbu/regatta-800x450.jpg" />
	<figcaption>This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.</figcaption>
</figure>

Social Links

HTML

									
										<div class="social-links center">
    <h3>Connect with @SBUDoIT</h3>


        <a href="#" class="social-link social-link--facebook">
            <span class="sr-only">Facebook</span>
        </a>

        <a href="#" class="social-link social-link--twitter">
         	<span class="sr-only">Twitter</span>
        </a>

        <a href="#" class="social-link social-link--youtube">
         	<span class="sr-only">YouTube</span>
        </a>

        <a href="#" class="social-link social-link--flickr">
         	<span class="sr-only">Flickr</span>
        </a>

        <a href="#" class="social-link social-link--instagram">
        	<span class="sr-only">Instagram</span>
        </a>

        <a href="#" class="social-link social-link--yammer">
        	<span class="sr-only">Yammer</span>
        </a>
    </p>
</div>

Primary Nav

HTML

									
										<div class="main-site-nav-wrap">
  <div class="container">
    <div class="row">
      <div class="col-md-9 col-xs-11 col-xs-push-1 col-md-push-0 main-site-nav-cols">
        <div class="main-site-nav">
          <ul class="hide-accessible-mobile-960">
            <li class="first"><a href="/" title="Home" class="active">Home</a></li>
            <li class=""><a href="/news" title="">News</a></li>
            <li class=""><a href="/events/home">Events</a></li>
            <li class="expanded"><a href="/services/catalog/a-z/all" title="">Services<span class="open-sub" role="button" tabindex="0" aria-label="Show sub navigation"><em class="sbuicon-menu7"></em></span></a>
              <ul class="hide-accessible-mobile-960">
                  <li class="first"><a href="/services/catalog/a-z/all" title="">Services A-Z</a></li>
                  <li class=""><a href="/services/catalog/category" title="">Services By Category</a></li>
                  <li class=""><a href="/status" title="">System Status</a></li>
                  <li class="last"><a href="/services/it-guides">IT Guides</a></li>
              </ul>
            </li>
            <li class=""><a href="/about-us">CIO</a></li>
            <li class=""><a href="/projects" title="">Projects</a></li>
            <li class="last"><a href="/help">Help</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Unity Navbar

HTML

									
										<nav class="unity-navbar">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="unity-navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="unity-nav-icon-bar"></span>
            <span class="unity-nav-icon-bar"></span>
            <span class="unity-nav-icon-bar"></span>
          </button>
        </div>
        <div id="navbar" class="unity-navbar-collapse collapse">
          <ul class="unity-navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">Events</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a>
              <ul class="unity-navbar-dropdown-menu">
                <li><a href="#">Services A-Z</a></li>
                <li><a href="#">Services by Category</a></li>
                <li><a href="#">System Status</a></li>
                <li><a href="#">System Status</a></li>
              </ul>
            </li>
            <li><a href="#contact">Projects</a></li>
            <li><a href="#contact">Help</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Footer Nav

HTML

									
										<div class="footer-nav">
    <strong>Lorem ipsum dolor sit (37 characters)</strong>
    <ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training &amp; Development</a></li></ul>
</div>

Social Links

HTML

									
										<div class="social-links">
    <h3>Connect with @SBUDoIT</h3>


        <a href="#" class="social-link social-link--facebook">
            <span class="sr-only">Facebook</span>
        </a>

        <a href="#" class="social-link social-link--twitter">
         	<span class="sr-only">Twitter</span>
        </a>

        <a href="#" class="social-link social-link--youtube">
         	<span class="sr-only">YouTube</span>
        </a>

        <a href="#" class="social-link social-link--flickr">
         	<span class="sr-only">Flickr</span>
        </a>

        <a href="#" class="social-link social-link--instagram">
        	<span class="sr-only">Instagram</span>
        </a>

        <a href="#" class="social-link social-link--yammer">
        	<span class="sr-only">Yammer</span>
        </a>
    </p>
</div>

Quick Nav

Search

HTML

									
										<section class="quick-nav">
  <div class="container disable-container-mobile">
    <div class="row no-margin-mobile">
      <div class="col-md-8 pull-right">
        <div class="quick-nav--container">
          <ul class="horizontal-list quick-nav--list">
            <li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Solar</a></li>
            <li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Blackboard</a></li>
            <li class="quick-nav--list-item hidden-xs hidden-sm"><a href="#" class="quick-nav--link">Google Apps</a></li>
            <li class="quick-nav--list-item"><a href="#" class="quick-nav--link">Report Problem</a></li>
              <div class="quick-nav--search-container hidden-md hidden-sm hidden-xs">
        		    <form class="search-wrapper" action="http://stonybrook.edu/search">
          		    <input class="quick-nav--search" type="text" id="search-form-query1" name="q" title="Search" value="" class="populate" size="30" placeholder="Search This Site">
                  <!-- <button name="submit" type="submit" class="btn" id="search-form-submit1" alt="Search" aria-label="search">
  	                <span class="sbuicon-search"></span>
                  </button> -->
                </form>
      	      </div>
            <li class="quick-nav--list-item hidden-lg"><a href="#" class="quick-nav--link">Search</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Pagination

This follows bootstraps pagination

Would prefer a method of setting active/disabled that followed bem syntax i.e. pagination--item__active and pagination--item__disabled

1
2
3
4
5
6
7

HTML

									
										<p>This follows bootstraps pagination</p>
<p>Would prefer a method of setting active/disabled that followed bem syntax i.e. pagination--item__active and pagination--item__disabled</p>
<ol class="pagination">
 	<li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">6</a></li>
	<li><a href="#">7</a></li>
	<li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
</ol>

Breadcrumbs

This is based off bootstraps breadcrumbs

HTML

									
										<p>This is based off bootstraps breadcrumbs</p>

<ol class="breadcrumb">
	<li><a href="#">Grandparent</a></li>
	<li><a href="#">Parent</a></li>
	<li><a href="#">Child</a></li>
	<li><a href="#">Grandchild</a></li>
	<li><a href="#">Great-Grandchild</a></li>
</ol>

Bold Moves Buttons

Lorem ipsum dolor sit (37 characters)

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.

Read Story

The swallow may fly south with the sun

The Knights Who Say Ni demand a sacrifice! Found them? In Mercia?! The coconut's tropical! Where'd you get the coconuts? Why do you think that she is a witch? I am your king. You don't vote for kings. But you are dressed as one. Oh, ow!

Read Story

All right. Well, take care of yourself, Han

I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. You don't be.

Read Story

Veggies sunt bona vobis, proinde vos

Bush tomato gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.

Read Story

This pattern contains: molecules-bold-moves-button

HTML

									
										
<div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
	<a href="#" class="bold-moves-box--title">
		<h3>Lorem ipsum dolor sit (37 characters)</h3>
	</a>
	<a href="#" class="bold-moves-box--story">
		<p>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>
		<span class="bold-moves-box--fullStory">Read Story</span>

	</a>
</div>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">

                <div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
                	<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--title">
                		<h3>The swallow may fly south with the sun</h3>
                	</a>
                	<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--story">
                		<p>The Knights Who Say Ni demand a sacrifice! Found them? In Mercia?! The coconut's tropical! Where'd you get the coconuts? Why do you think that she is a witch? I am your king. You don't vote for kings. But you are dressed as one. Oh, ow!</p>
                		<span class="bold-moves-box--fullStory">Read Story</span>

                	</a>
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">

                <div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
                	<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--title">
                		<h3>All right. Well, take care of yourself, Han</h3>
                	</a>
                	<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--story">
                		<p>I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. You don't be.</p>
                		<span class="bold-moves-box--fullStory">Read Story</span>

                	</a>
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">

                <div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
                	<a href="http://veggieipsum.com" class="bold-moves-box--title">
                		<h3>Veggies sunt bona vobis, proinde vos</h3>
                	</a>
                	<a href="http://veggieipsum.com" class="bold-moves-box--story">
                		<p>Bush tomato gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.</p>
                		<span class="bold-moves-box--fullStory">Read Story</span>

                	</a>
                </div>
        </div>

</div>

Circle Band Buttons

Main Campus

This pattern contains: molecules-circle-band-button

HTML

									
										<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
    <span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
    <span class="circle-band-button--label">Main Campus</span>
</div>-->


<div class="row">
    <ul class="list-inline">
        <li>
                <a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
        </li>
        <li>
                <a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
        </li>
        <li>
                <a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
        </li>
        <li>
                <a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
        </li>
    </ul>
</div>

<ul class="list-inline">
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-640x640.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
            <li>
                <a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </a>
                <!--
                Alternatively can use div, but why?
                <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
                    <span class="circle-band-button--label">Main Campus</span>
                </div>-->
            </li>
</ul>

<ul class="list-inline">

    <li>
        <a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </a>
        <!--
        Alternatively can use div, but why?
        <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </div>-->
    </li>


    <li>
        <a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </a>
        <!--
        Alternatively can use div, but why?
        <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </div>-->
    </li>


    <li>
        <a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </a>
        <!--
        Alternatively can use div, but why?
        <div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
            <span class="circle-band-button--label">Main Campus</span>
        </div>-->
    </li>

</ul>

Dual Tone Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

On second thoughts, let's not go there. It is a silly place. You don't

You don't believe in the Force, do you? The Force is strong with this one

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

This pattern contains: molecules-dual-tone-button

HTML

									
										<a href="#" class="dual-tone-button">
<div class="dual-tone-button--content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</div>
<span class="dual-tone-button--icon sbuicon-shield"></span></a>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">

                <a href="http://chrisvalleskey.com/fillerama/" class="dual-tone-button">
                <div class="dual-tone-button--content">On second thoughts, let's not go there. It is a silly place. You don't</div>
                <span class="dual-tone-button--icon sbuicon-th-large"></span></a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">

                <a href="http://chrisvalleskey.com/fillerama/" class="dual-tone-button">
                <div class="dual-tone-button--content">You don't believe in the Force, do you? The Force is strong with this one</div>
                <span class="dual-tone-button--icon sbuicon-film"></span></a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">

                <a href="http://veggieipsum.com" class="dual-tone-button">
                <div class="dual-tone-button--content">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</div>
                <span class="dual-tone-button--icon sbuicon-music"></span></a>
        </div>

</div>

Event Stamp Buttons

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

SEPT 01

Mini Byte: New to Mac

HTML

									
										            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

            <div class="col-md-3">
                    
                    
                    <div class="event-stamp-button">
                       <div class="display--flex-mobile">
                         <div class="event-stamp-button--date" data-match-height="event-stamp-button">
                           <time datetime="2016-09-01">
                             <span class="event-stamp-button--month">SEPT</span>
                             <span class="event-stamp-button--day">01</span>
                           </time>
                         </div>
                         <div class="event-stamp-button--text">
                           <a href="#">Mini Byte: New to Mac</a>
                         </div>
                       </div>
                     </div>
            </div>

Far Beyond Event Buttons

1Jan

Lorizzle pimpin' dolizzle sit amet I

8Jun

Hong Kong Phooey, number one super g

26May

Blog meme masthead DocumentCloud Fou

31Aug

Webtwo ipsum dolor sit amet, eskobo

28Dec

Cauliflower cheese cream cheese baby

10Feb

Veggies sunt bona vobis, proinde vos

22Mar

Bacon ipsum dolor sit amet spare rib

25Oct

The swallow may fly south with the sun

HTML

									
										<div class="bg-red fluffy">
<div class="container-fluid">
    <div class="row">
            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://lorizzle.nl/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">1</span><span class="farbeyond-event-button--month">Jan</span></div>
                            <div class="farbeyond-event-button--title">Lorizzle pimpin' dolizzle sit amet I</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://www.malevole.com/mv/misc/text/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">8</span><span class="farbeyond-event-button--month">Jun</span></div>
                            <div class="farbeyond-event-button--title">Hong Kong Phooey, number one super g</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://www.niemanlab.org/journo-ipsum/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">26</span><span class="farbeyond-event-button--month">May</span></div>
                            <div class="farbeyond-event-button--title">Blog meme masthead DocumentCloud Fou</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://web20ipsum.com">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">31</span><span class="farbeyond-event-button--month">Aug</span></div>
                            <div class="farbeyond-event-button--title">Webtwo ipsum dolor sit amet, eskobo</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://www.cheeseipsum.co.uk/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">28</span><span class="farbeyond-event-button--month">Dec</span></div>
                            <div class="farbeyond-event-button--title">Cauliflower cheese cream cheese baby</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://veggieipsum.com">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">10</span><span class="farbeyond-event-button--month">Feb</span></div>
                            <div class="farbeyond-event-button--title">Veggies sunt bona vobis, proinde vos</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://baconipsum.com/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">22</span><span class="farbeyond-event-button--month">Mar</span></div>
                            <div class="farbeyond-event-button--title">Bacon ipsum dolor sit amet spare rib</div>
                        </a>
            </div>

            <div class="col-md-3">
                    
                        <a class="farbeyond-event-button" href="http://chrisvalleskey.com/fillerama/">
                            <div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">25</span><span class="farbeyond-event-button--month">Oct</span></div>
                            <div class="farbeyond-event-button--title">The swallow may fly south with the sun</div>
                        </a>
            </div>

    </div>
</div>


</div>

Polaroid Buttons

Lorem ipsum dolor sit (37 characters)

The swallow may fly south with the sun

All right. Well, take care of yourself, Han

Veggies sunt bona vobis, proinde vos

This pattern contains: molecules-polaroid-button

HTML

									
										<a href="#" class="polaroid-card">
<img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
	<h2 class="polaroid-card--heading">Lorem ipsum dolor sit (37 characters)</h2>
	</a>
	

<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">
                <a href="#" class="polaroid-card">
                <img class="polaroid-card--image" src="../../placeholders/images/sbu/sac-1600x900.jpg" />
                	<h2 class="polaroid-card--heading">The swallow may fly south with the sun</h2>
                	</a>
                	        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a href="#" class="polaroid-card">
                <img class="polaroid-card--image" src="../../placeholders/images/sbu/library-640x360.jpg" />
                	<h2 class="polaroid-card--heading">All right. Well, take care of yourself, Han</h2>
                	</a>
                	        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a href="#" class="polaroid-card">
                <img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
                	<h2 class="polaroid-card--heading">Veggies sunt bona vobis, proinde vos</h2>
                	</a>
                	        </div>

</div>

Promo Box Buttons

This pattern contains: molecules-promo-box-button

HTML

									
										<a class="promo-box-button" href="#" style="background-image: url('../../placeholders/images/students-walking.jpg')">
	<span class="promo-box-button--label">Sed ut perspiciatis unde</span>
</a>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="promo-box-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="promo-box-button--label">Atomorum elaboraret ei pri</span>
                </a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="promo-box-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="promo-box-button--label">Pri at omnis</span>
                </a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="promo-box-button" href="http://veggieipsum.com" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="promo-box-button--label">Ex enim aperiam sit</span>
                </a>
        </div>

</div>

Rounded Image Buttons

Lorem ipsum dolor sit (37 characters)

The swallow may fly south with the sun

All right. Well, take care of yourself, Han

Veggies sunt bona vobis, proinde vos

This pattern contains: molecules-rounded-image-button

HTML

									
										<a class="rounded-image-button" href="#" style="background-image: url('../../placeholders/images/students-walking.jpg')">
	<span class="rounded-image-button--label">Lorem ipsum dolor sit (37 characters)</span>
</a>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="rounded-image-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="rounded-image-button--label">The swallow may fly south with the sun</span>
                </a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="rounded-image-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="rounded-image-button--label">All right. Well, take care of yourself, Han</span>
                </a>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <a class="rounded-image-button" href="http://veggieipsum.com" style="background-image: url('../../placeholders/images/students-walking.jpg')">
                	<span class="rounded-image-button--label">Veggies sunt bona vobis, proinde vos</span>
                </a>
        </div>

</div>

Simple Blurbs

Simple blurbs can tell you a quick and easy story. They will help make your content more readable and scannable for your users. Use them wisely.

Adding a button or a call to action to your blurb will help users understand what it is you want them to do.

Subheadings come in handy when you need a quick summary of a rather long blurb.

Simple Blurbs are Fun!

So many variants

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.

Call to Action Text

You don't believe in the Force, do you? The Force is strong with this one

All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Who I am. I'm not a mistake! It all makes sense! In a comic, you know

Now that we know who you are, I know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

You Look So Dashing

Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my

Lorizzle pimpin' dolizzle sit amet I

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.

Call to Action Text

Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin

Carrot cake fruitcake dessert apple

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.

Grab the Doc

On second thoughts, let's not go there. It is a silly place. You don't

The swallow may fly south with the sun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Download PDF

You don't believe in the Force, do you? The Force is strong with this one

All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

Veggies sunt bona vobis, proinde vos

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my

Lorizzle pimpin' dolizzle sit amet I

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.

Call to Action Text

Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin

Carrot cake fruitcake dessert apple

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.

Grab the Doc

This pattern contains: molecules-simple-blurb

HTML

									
										<div class="alert alert-info">
    <p>Simple blurbs can tell you a quick and easy story. They will help make your content more readable and scannable for your users. Use them wisely.</p><p>Adding a button or a call to action to your blurb will help users understand what it is you want them to do.</p><p>Subheadings come in handy when you need a quick summary of a rather long blurb.</p>
</div>
    <div class="simple-blurb-card" data-match-height="simple-blurb-card">
    
    
    
    
    
    
    
    
    
    
        <h2 class="simple-blurb-card--heading">Simple Blurbs are Fun!</h2>
    
        <h3 class="simple-blurb-card--subheading">So many variants</h3>
    
        <div class="simple-blurb-card--text">
            <p>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>
        </div>
    
    
        <div class="simple-blurb-card--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
    
    </div>

<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                    
                    <span class="simple-blurb-card--icon sbuicon-film"></span><br />
                    
                
                
                
                
                
                    <h2 class="simple-blurb-card--heading">You don't believe in the Force, do you? The Force is strong with this one</h2>
                
                    <h3 class="simple-blurb-card--subheading">All right. Well, take care of yourself, Han</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="default-button">Call to Action Text</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                    
                    <span class="simple-blurb-card--icon sbuicon-star-o"></span><br />
                    
                
                
                
                
                
                    <h2 class="simple-blurb-card--heading">Who I am. I'm not a mistake! It all makes sense! In a comic, you know</h2>
                
                    <h3 class="simple-blurb-card--subheading">Now that we know who you are, I know</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="dashed-link">You Look So Dashing</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                    
                    <span class="simple-blurb-card--icon sbuicon-glass"></span><br />
                    
                
                
                
                
                
                    <h2 class="simple-blurb-card--heading">Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my</h2>
                
                    <h3 class="simple-blurb-card--subheading">Lorizzle pimpin' dolizzle sit amet I</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>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>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="default-button button-block">Call to Action Text</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                    
                    <span class="simple-blurb-card--icon sbuicon-th"></span><br />
                    
                
                
                
                
                
                    <h2 class="simple-blurb-card--heading">Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin</h2>
                
                    <h3 class="simple-blurb-card--subheading">Carrot cake fruitcake dessert apple</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>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>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#.doc" class="file-link">Grab the Doc</a>
                    </div>
                
                </div>
        </div>

</div>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                
                
                    
                    <img class="simple-blurb-card--image" src="../../placeholders/images/sbu/sac-1600x900.jpg" />
                    
                
                
                
                    <h2 class="simple-blurb-card--heading">On second thoughts, let's not go there. It is a silly place. You don't</h2>
                
                    <h3 class="simple-blurb-card--subheading">The swallow may fly south with the sun</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#.pdf" class="file-link">Download PDF</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                
                
                    
                    <img class="simple-blurb-card--image" src="../../placeholders/images/sbu/library-640x360.jpg" />
                    
                
                
                
                    <h2 class="simple-blurb-card--heading">You don't believe in the Force, do you? The Force is strong with this one</h2>
                
                    <h3 class="simple-blurb-card--subheading">All right. Well, take care of yourself, Han</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="default-button">Call to Action Text</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                
                
                    
                    <img class="simple-blurb-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
                    
                
                
                
                    <h2 class="simple-blurb-card--heading">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</h2>
                
                    <h3 class="simple-blurb-card--subheading">Veggies sunt bona vobis, proinde vos</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="impact-button">Call to Action Text</a>
                    </div>
                
                </div>
        </div>

</div>


<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-6">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                
                    
                    <div class="simple-blurb-card--video-container">
                        <iframe class="simple-blurb-card--video" src="https://www.youtube.com/embed/EUyujom0UaU" allowfullscreen /></iframe>
                    </div>
                    
                
                
                
                
                    <h2 class="simple-blurb-card--heading">Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my</h2>
                
                    <h3 class="simple-blurb-card--subheading">Lorizzle pimpin' dolizzle sit amet I</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>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>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#" class="default-button button-block">Call to Action Text</a>
                    </div>
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
                <div class="simple-blurb-card" data-match-height="simple-blurb-card">
                
                
                
                
                
                
                    
                    <div class="simple-blurb-card--video-container">
                        <iframe class="simple-blurb-card--video" src="https://www.youtube.com/embed/T6wjdpwwSwo" allowfullscreen /></iframe>
                    </div>
                    
                
                
                
                
                    <h2 class="simple-blurb-card--heading">Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin</h2>
                
                    <h3 class="simple-blurb-card--subheading">Carrot cake fruitcake dessert apple</h3>
                
                    <div class="simple-blurb-card--text">
                        <p>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>
                    </div>
                
                
                    <div class="simple-blurb-card--cta">
                        <a href="#.doc" class="file-link">Grab the Doc</a>
                    </div>
                
                </div>
        </div>

</div>

Stat Cards

Stat cards are a variant of simple blurb cards, but provide the ability to show stats

0

All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

90

Now that we know who you are, I know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

$200.00

Lorizzle pimpin' dolizzle sit amet I

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.

50

Carrot cake fruitcake dessert apple

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.

0

All right. Well, take care of yourself, Han

50

Carrot cake fruitcake dessert apple

90

Now that we know who you are, I know

50

Bacon ipsum dolor sit amet spare rib

$56.22

Nesciunt sunt cillum keytar Pitchfork

99

The swallow may fly south with the sun

This pattern contains: molecules-stat-card

HTML

									
										<div class="alert alert-info">
    <p>Stat cards are a variant of simple blurb cards, but provide the ability to show stats
</div>

<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="stat-card">
                
                <span class="stat-card--icon sbuicon-film"></span><br />
                
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="0">0</span></h3>
                <strong class="stat-card--subheading">All right. Well, take care of yourself, Han</strong>
                
                <div class="stat-card--text">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                </div>
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="stat-card">
                
                <span class="stat-card--icon sbuicon-star-o"></span><br />
                
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="90">90</span></h3>
                <strong class="stat-card--subheading">Now that we know who you are, I know</strong>
                
                <div class="stat-card--text">
                    <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p>
                </div>
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="stat-card">
                
                <span class="stat-card--icon sbuicon-glass"></span><br />
                
                
                
                <h3 class="stat-card--heading">$<span class="count-to" data-countto="200.00">200.00</span></h3>
                <strong class="stat-card--subheading">Lorizzle pimpin' dolizzle sit amet I</strong>
                
                <div class="stat-card--text">
                    <p>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>
                </div>
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="stat-card">
                
                <span class="stat-card--icon sbuicon-th"></span><br />
                
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="50">50</span></h3>
                <strong class="stat-card--subheading">Carrot cake fruitcake dessert apple</strong>
                
                <div class="stat-card--text">
                    <p>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>
                </div>
                </div>
        </div>

</div>

<div class="row">

        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="0">0</span></h3>
                <strong class="stat-card--subheading">All right. Well, take care of yourself, Han</strong>
                
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="50">50</span></h3>
                <strong class="stat-card--subheading">Carrot cake fruitcake dessert apple</strong>
                
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="90">90</span></h3>
                <strong class="stat-card--subheading">Now that we know who you are, I know</strong>
                
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="50">50</span></h3>
                <strong class="stat-card--subheading">Bacon ipsum dolor sit amet spare rib</strong>
                
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading">$<span class="count-to" data-countto="56.22">56.22</span></h3>
                <strong class="stat-card--subheading">Nesciunt sunt cillum keytar Pitchfork</strong>
                
                
                </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-2">
                <div class="stat-card">
                
                
                <h3 class="stat-card--heading"><span class="count-to" data-countto="99">99</span></h3>
                <strong class="stat-card--subheading">The swallow may fly south with the sun</strong>
                
                
                </div>
        </div>

</div>

Classic Blurbs

The classic-blurb, is an iteration of the simple blurb, accept the icon is positioned to the left of the content. This is simply a matter of design preferences. However keep in my mind it is probably not wise to mix and match classy-blurbs and simple-blurbs as you might disrupt the rythym of your content.

Classic Blurbs Barrels of Monkeys!

So many variants

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.

Call to Action Text

On second thoughts, let's not go there. It is a silly place. You don't

The swallow may fly south with the sun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Download PDF

You don't believe in the Force, do you? The Force is strong with this one

All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

Veggies sunt bona vobis, proinde vos

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my

Lorizzle pimpin' dolizzle sit amet I

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.

Call to Action Text

Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin

Carrot cake fruitcake dessert apple

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.

Grab the Doc

This pattern contains: molecules-classic-blurb

HTML

									
										<div class="alert alert-info">
    <p>
        The <mark>classic-blurb</mark>, is an iteration of the simple blurb, accept the icon is positioned to the left of the content. This is simply a matter of design preferences. However keep in my mind it is probably not wise to mix and match <mark>classy-blurbs</mark> and <mark>simple-blurbs</mark> as you might disrupt the rythym of your content.
    </p>
</div>

<div class="classic-blurb-card">
    
    <span class="classic-blurb-card--icon sbuicon-shield"></span>
    

    

    <div class="classic-blurb-card--content">
        <h2 class="classic-blurb-card--heading">Classic Blurbs Barrels of Monkeys!</h2>

        <h3 class="classic-blurb-card--subheading">So many variants</h3>

        <div class="classic-blurb-card--text">
            <p>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>
        </div>

        <div class="classic-blurb-card--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>

    </div>
</div>

<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="classic-blurb-card">
                
                <span class="classic-blurb-card--icon sbuicon-th-large"></span>
                
            
                
            
                <div class="classic-blurb-card--content">
                    <h2 class="classic-blurb-card--heading">On second thoughts, let's not go there. It is a silly place. You don't</h2>
            
                    <h3 class="classic-blurb-card--subheading">The swallow may fly south with the sun</h3>
            
                    <div class="classic-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
            
                    <div class="classic-blurb-card--cta">
                        <a href="#.pdf" class="file-link">Download PDF</a>
                    </div>
            
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="classic-blurb-card">
                
                <span class="classic-blurb-card--icon sbuicon-film"></span>
                
            
                
            
                <div class="classic-blurb-card--content">
                    <h2 class="classic-blurb-card--heading">You don't believe in the Force, do you? The Force is strong with this one</h2>
            
                    <h3 class="classic-blurb-card--subheading">All right. Well, take care of yourself, Han</h3>
            
                    <div class="classic-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
            
                    <div class="classic-blurb-card--cta">
                        <a href="#" class="default-button">Call to Action Text</a>
                    </div>
            
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="classic-blurb-card">
                
                <span class="classic-blurb-card--icon sbuicon-music"></span>
                
            
                
            
                <div class="classic-blurb-card--content">
                    <h2 class="classic-blurb-card--heading">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</h2>
            
                    <h3 class="classic-blurb-card--subheading">Veggies sunt bona vobis, proinde vos</h3>
            
                    <div class="classic-blurb-card--text">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                    </div>
            
                    <div class="classic-blurb-card--cta">
                        <a href="#" class="impact-button">Call to Action Text</a>
                    </div>
            
                </div>
            </div>
    </div>

</div>


<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="classic-blurb-card">
            
                <div class="classic-blurb-card--image-wrap">
                <img class="classic-blurb-card--image" src="../../placeholders/images/sbu/regatta-1200x900.jpg" />
                </div>
            
                <div class="classic-blurb-card--content">
                    <h2 class="classic-blurb-card--heading">Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my</h2>
            
                    <h3 class="classic-blurb-card--subheading">Lorizzle pimpin' dolizzle sit amet I</h3>
            
                    <div class="classic-blurb-card--text">
                        <p>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>
                    </div>
            
                    <div class="classic-blurb-card--cta">
                        <a href="#" class="default-button button-block">Call to Action Text</a>
                    </div>
            
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-6">
            <div class="classic-blurb-card">
            
                <div class="classic-blurb-card--image-wrap">
                <img class="classic-blurb-card--image" src="../../placeholders/images/sbu/sac-800x600.jpg" />
                </div>
            
                <div class="classic-blurb-card--content">
                    <h2 class="classic-blurb-card--heading">Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin</h2>
            
                    <h3 class="classic-blurb-card--subheading">Carrot cake fruitcake dessert apple</h3>
            
                    <div class="classic-blurb-card--text">
                        <p>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>
                    </div>
            
                    <div class="classic-blurb-card--cta">
                        <a href="#.doc" class="file-link">Grab the Doc</a>
                    </div>
            
                </div>
            </div>
    </div>

</div>

Box Cards

The swallow may fly south with the sun

On second thoughts, let's not go there. It is a silly place. You don't

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Download PDF

All right. Well, take care of yourself, Han

You don't believe in the Force, do you? The Force is strong with this one

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Veggies sunt bona vobis, proinde vos

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

All right. Well, take care of yourself, Han

You don't believe in the Force, do you? The Force is strong with this one

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.

Call to Action Text

Now that we know who you are, I know

Who I am. I'm not a mistake! It all makes sense! In a comic, you know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

You Look So Dashing

Lorizzle pimpin' dolizzle sit amet I

Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my

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.

Call to Action Text

Carrot cake fruitcake dessert apple

Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin

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.

Grab the Doc

This pattern contains: molecules-box-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="box-card" data-match-height="box-card">
            
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">The swallow may fly south with the sun</h3>
                        <strong class="box-card--subheading">On second thoughts, let's not go there. It is a silly place. You don't</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#.pdf" class="file-link">Download PDF</a>
                </div>
            
                            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="box-card" data-match-height="box-card">
            
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">All right. Well, take care of yourself, Han</h3>
                        <strong class="box-card--subheading">You don't believe in the Force, do you? The Force is strong with this one</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
                            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="box-card" data-match-height="box-card">
            
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">Veggies sunt bona vobis, proinde vos</h3>
                        <strong class="box-card--subheading">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#" class="impact-button">Call to Action Text</a>
                </div>
            
                            </div>
    </div>

</div>
<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="box-card" data-match-height="box-card">
            
                
                <div class="box-card--image-wrap">
                <img class="box-card--image" src="../../placeholders/images/sbu/library-640x480.jpg" />
                </div>
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">All right. Well, take care of yourself, Han</h3>
                        <strong class="box-card--subheading">You don't believe in the Force, do you? The Force is strong with this one</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus. Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id.</p>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
                            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="box-card" data-match-height="box-card">
            
                
                <div class="box-card--image-wrap">
                <img class="box-card--image" src="../../placeholders/images/sbu/library-1200x900.jpg" />
                </div>
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">Now that we know who you are, I know</h3>
                        <strong class="box-card--subheading">Who I am. I'm not a mistake! It all makes sense! In a comic, you know</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#" class="dashed-link">You Look So Dashing</a>
                </div>
            
                            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="box-card" data-match-height="box-card">
            
                
                <div class="box-card--image-wrap">
                <img class="box-card--image" src="../../placeholders/images/sbu/regatta-1200x900.jpg" />
                </div>
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">Lorizzle pimpin' dolizzle sit amet I</h3>
                        <strong class="box-card--subheading">Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>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>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#" class="default-button button-block">Call to Action Text</a>
                </div>
            
                            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="box-card" data-match-height="box-card">
            
                
                <div class="box-card--image-wrap">
                <img class="box-card--image" src="../../placeholders/images/sbu/sac-800x600.jpg" />
                </div>
                
            
                <div data-match-height="box-card--headings">
                    <h3 class="box-card--heading">Carrot cake fruitcake dessert apple</h3>
                        <strong class="box-card--subheading">Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin</strong>
                </div>
            
                <div class="box-card--content" data-match-height="box-card--content">
                    <p>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>
                </div>
            
                                  <div class="box-card--cta">
                                      <a href="#.doc" class="file-link">Grab the Doc</a>
                </div>
            
                            </div>
    </div>

</div>

Polaroid Cards

The swallow may fly south with the sun

The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.

Download PDF

All right. Well, take care of yourself, Han

I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.

Call to Action Text

Veggies sunt bona vobis, proinde vos

A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.

Call to Action Text

All right. Well, take care of yourself, Han

I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.

Call to Action Text

Now that we know who you are, I know

How you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me.

You Look So Dashing

Lorizzle pimpin' dolizzle sit amet I

Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.

Call to Action Text

Carrot cake fruitcake dessert apple

Bread cotton candy marzipan. Baker too go gingerbread topping cupcake donut. Fruitcake marzipan bear claw tart toffee candy cheesecake. Lemon drops.

Grab the Doc

This pattern contains: molecules-polaroid-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/sac-1600x900.jpg" />
            	<h2 class="polaroid-card--heading">The swallow may fly south with the sun</h2>
            	<div class="polaroid-card--text">The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#.pdf" class="file-link">Download PDF</a>
                </div>
            
            	</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/library-640x360.jpg" />
            	<h2 class="polaroid-card--heading">All right. Well, take care of yourself, Han</h2>
            	<div class="polaroid-card--text">I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            	</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
            	<h2 class="polaroid-card--heading">Veggies sunt bona vobis, proinde vos</h2>
            	<div class="polaroid-card--text">A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#" class="impact-button">Call to Action Text</a>
                </div>
            
            	</div>
    </div>

</div>
<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-3">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/library-640x360.jpg" />
            	<h2 class="polaroid-card--heading">All right. Well, take care of yourself, Han</h2>
            	<div class="polaroid-card--text">I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            	</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/library-1600x900.jpg" />
            	<h2 class="polaroid-card--heading">Now that we know who you are, I know</h2>
            	<div class="polaroid-card--text">How you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#" class="dashed-link">You Look So Dashing</a>
                </div>
            
            	</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-1600x900.jpg" />
            	<h2 class="polaroid-card--heading">Lorizzle pimpin' dolizzle sit amet I</h2>
            	<div class="polaroid-card--text">Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#" class="default-button button-block">Call to Action Text</a>
                </div>
            
            	</div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div data-match-height="polaroid-card" href="#" class="polaroid-card">
            <img class="polaroid-card--image" src="../../placeholders/images/sbu/sac-800x450.jpg" />
            	<h2 class="polaroid-card--heading">Carrot cake fruitcake dessert apple</h2>
            	<div class="polaroid-card--text">Bread cotton candy marzipan. Baker too go gingerbread topping cupcake donut. Fruitcake marzipan bear claw tart toffee candy cheesecake. Lemon drops.</div>
            
            
                <div class="polaroid-card--cta">
                    <a href="#.doc" class="file-link">Grab the Doc</a>
                </div>
            
            	</div>
    </div>

</div>

Roll Over Cards

The swallow may fly south with the sun

All right. Well, take care of yourself, Han

Veggies sunt bona vobis, proinde vos

All right. Well, take care of yourself, Han

Now that we know who you are, I know

Lorizzle pimpin' dolizzle sit amet I

Carrot cake fruitcake dessert apple

This pattern contains: molecules-rollover-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/sac-1600x900.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-th-large"></i></p>
                            <br>
                            <p>The swallow may fly south with the sun</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/library-640x360.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-film"></i></p>
                            <br>
                            <p>All right. Well, take care of yourself, Han</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-music"></i></p>
                            <br>
                            <p>Veggies sunt bona vobis, proinde vos</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>

</div>
<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/library-640x360.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-film"></i></p>
                            <br>
                            <p>All right. Well, take care of yourself, Han</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/library-1600x900.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-star-o"></i></p>
                            <br>
                            <p>Now that we know who you are, I know</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/regatta-1600x900.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-glass"></i></p>
                            <br>
                            <p>Lorizzle pimpin' dolizzle sit amet I</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="screenshot">
                <img class="screenshot--image" src="../../placeholders/images/sbu/sac-800x450.jpg" alt="Square" />
                <div class="screenshot--caption asphalt">
                    <div class="screenshot--caption-content">
                        <a href="#" class="screenshot--caption--link single_image">
                            <p><i class="screenshot--icon sbuicon-th"></i></p>
                            <br>
                            <p>Carrot cake fruitcake dessert apple</p>
                        </a>
                    </div>
                </div>
            </div>
    </div>

</div>

Reveal Cards

Info

Atomorum elaboraret ei pri

The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.

Info

Pri at omnis

I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.

Info

Ex enim aperiam sit

A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.

This pattern contains: molecules-reveal-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="reveal-card">
            	<img class="reveal-card--image" src="../../placeholders/images/sbu/sac-1200x1200.jpg">
            	<div class="reveal-card--overlay"></div>
            	<div class="reveal-card--corner-reveal">Info</div>
            	<div class="reveal-card--reveal-content">
            		<h2 class="reveal-card--reveal-heading">Atomorum elaboraret ei pri</h2>
            		<p>The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.</p>
            	</div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="reveal-card">
            	<img class="reveal-card--image" src="../../placeholders/images/sbu/library-640x640.jpg">
            	<div class="reveal-card--overlay"></div>
            	<div class="reveal-card--corner-reveal">Info</div>
            	<div class="reveal-card--reveal-content">
            		<h2 class="reveal-card--reveal-heading">Pri at omnis</h2>
            		<p>I'm trying not to, kid. I find your lack of faith disturbing. You are a part of the Rebel Alliance and a traitor! Take her away! I want to come with.</p>
            	</div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="reveal-card">
            	<img class="reveal-card--image" src="../../placeholders/images/sbu/regatta-800x800.jpg">
            	<div class="reveal-card--overlay"></div>
            	<div class="reveal-card--corner-reveal">Info</div>
            	<div class="reveal-card--reveal-content">
            		<h2 class="reveal-card--reveal-heading">Ex enim aperiam sit</h2>
            		<p>A fava bean collard greens endive tomatillo lotus root okra winter purslane zucchini parsley spinach artichoke. Brussels sprout pea turnip catsear.</p>
            	</div>
            </div>
    </div>

</div>

Accordion Cards

On second thoughts, let's not go there. It is a silly place. You don't

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Download PDF

You don't believe in the Force, do you? The Force is strong with this one

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Call to Action Text

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Call to Action Text

On second thoughts, let's not go there. It is a silly place. You don't

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Download PDF

You don't believe in the Force, do you? The Force is strong with this one

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Call to Action Text

Postulo esse magis azuki bean burdock brussels sprout quandong komatsun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Call to Action Text

You don't believe in the Force, do you? The Force is strong with this one

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

Call to Action Text

Who I am. I'm not a mistake! It all makes sense! In a comic, you know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

You Look So Dashing

Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my

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.

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.

Call to Action Text

Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin

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.

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.

Grab the Doc

This pattern contains: molecules-drop-accordion-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-12">
            <div class="drop-accordion-card">
                <div class="drop-accordion-card--tab">
                  <div class="display--flex-mobile">
                    <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                    <span class="drop-accordion-card--headline">On second thoughts, let's not go there. It is a silly place. You don't</span>
                  </div>
                </div>
                <div class="drop-accordion-card--content-wrap hide-accessible">
                    <div class="drop-accordion-card--content">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                        <div class="simple-blurb--cta">
                            <a href="#.pdf" class="file-link">Download PDF</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-12">
            <div class="drop-accordion-card">
                <div class="drop-accordion-card--tab">
                  <div class="display--flex-mobile">
                    <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                    <span class="drop-accordion-card--headline">You don't believe in the Force, do you? The Force is strong with this one</span>
                  </div>
                </div>
                <div class="drop-accordion-card--content-wrap hide-accessible">
                    <div class="drop-accordion-card--content">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                        <div class="simple-blurb--cta">
                            <a href="#" class="default-button">Call to Action Text</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-12">
            <div class="drop-accordion-card">
                <div class="drop-accordion-card--tab">
                  <div class="display--flex-mobile">
                    <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                    <span class="drop-accordion-card--headline">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</span>
                  </div>
                </div>
                <div class="drop-accordion-card--content-wrap hide-accessible">
                    <div class="drop-accordion-card--content">
                        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                        <div class="simple-blurb--cta">
                            <a href="#" class="impact-button">Call to Action Text</a>
                        </div>
                    </div>
                </div>
            </div>
    </div>

</div>



<div class="row">


<div class="col-sm-12 col-md-6 col-lg-6">

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">On second thoughts, let's not go there. It is a silly place. You don't</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#.pdf" class="file-link">Download PDF</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">You don't believe in the Force, do you? The Force is strong with this one</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#" class="default-button">Call to Action Text</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#" class="impact-button">Call to Action Text</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>


</div>


<div class="col-sm-12 col-md-6 col-lg-6">

    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">You don't believe in the Force, do you? The Force is strong with this one</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#" class="default-button">Call to Action Text</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">Who I am. I'm not a mistake! It all makes sense! In a comic, you know</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#" class="dashed-link">You Look So Dashing</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#" class="default-button button-block">Call to Action Text</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-12">
                <div class="drop-accordion-card">
                    <div class="drop-accordion-card--tab">
                      <div class="display--flex-mobile">
                        <span class="drop-accordion-card--icon sbuicon-angle-down"></span>
                        <span class="drop-accordion-card--headline">Pie powder lemon drops sesame snaps cake brownie. Biscuit ice cream gin</span>
                      </div>
                    </div>
                    <div class="drop-accordion-card--content-wrap hide-accessible">
                        <div class="drop-accordion-card--content">
                            <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p> 
                            <div class="simple-blurb--cta">
                                <a href="#.doc" class="file-link">Grab the Doc</a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>


</div>

</div>

Event Cards

September 4th, 2013 9:04 am

All right. Well, take care of yourself, Han

West Campus - Wang Center - Room: Lecture Hall 2

Faculty, Staff, Teaching Assistants (TA's)

Register Add To Calendar

November 19th, 2013 11:55 pm

Carrot cake fruitcake dessert apple

West Campus - Staller Center - Room: Main Stage

Faculty, Staff

Register Add To Calendar

July 22nd, 2013 11:12 am

Now that we know who you are, I know

West Campus - LaValle Stadium

Clubs, Faculty, Guests, Researchers, Staff, Students, Teaching Assistants (TA's)

Register Add To Calendar

March 22nd, 2013 4:45 pm

Bacon ipsum dolor sit amet spare rib

Endeavour 120

Faculty, Staff

Register Add To Calendar

April 13th, 2013 10:14 am

Nesciunt sunt cillum keytar Pitchfork

West Campus - Earth & Space Sciences Building - Room: 001

Faculty, Staff, Students

Register Add To Calendar

October 25th, 2013 3:51 am

The swallow may fly south with the sun

Register Add To Calendar

This pattern contains: molecules-event-card

HTML

									
										<div class="row">

    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                September 4th, 2013 9:04 am
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://chrisvalleskey.com/fillerama/">All right. Well, take care of yourself, Han</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
                <div class="event-card--map">
                  <a href="http://chrisvalleskey.com/fillerama/">West Campus - Wang Center - Room: Lecture Hall 2</a>
                </div>
                <div class="event-card--audience">
                        Faculty, Staff, Teaching Assistants (TA's)
                </div>
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://chrisvalleskey.com/fillerama/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                November 19th, 2013 11:55 pm
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://cupcakeipsum.com/">Carrot cake fruitcake dessert apple</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
                <div class="event-card--map">
                  <a href="http://cupcakeipsum.com/">West Campus - Staller Center - Room: Main Stage</a>
                </div>
                <div class="event-card--audience">
                        Faculty, Staff
                </div>
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://cupcakeipsum.com/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                July 22nd, 2013 11:12 am
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://slipsum.com/lite/">Now that we know who you are, I know</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
                <div class="event-card--map">
                  <a href="http://slipsum.com/lite/">West Campus - LaValle Stadium</a>
                </div>
                <div class="event-card--audience">
                        Clubs, Faculty, Guests, Researchers, Staff, Students, Teaching Assistants (TA's)
                </div>
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://slipsum.com/lite/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                March 22nd, 2013 4:45 pm
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://baconipsum.com/">Bacon ipsum dolor sit amet spare rib</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
                <div class="event-card--map">
                  <a href="http://baconipsum.com/">Endeavour 120</a>
                </div>
                <div class="event-card--audience">
                        Faculty, Staff
                </div>
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://baconipsum.com/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                April 13th, 2013 10:14 am
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://hipsteripsum.me/">Nesciunt sunt cillum keytar Pitchfork</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
                <div class="event-card--map">
                  <a href="http://hipsteripsum.me/">West Campus - Earth &amp; Space Sciences Building - Room: 001</a>
                </div>
                <div class="event-card--audience">
                        Faculty, Staff, Students
                </div>
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://hipsteripsum.me/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4">
            <div class="event-card" data-match-height="event-card">
              <div class="event-card--date-time">
                October 25th, 2013 3:51 am
              </div>
              <div class="event-card--heading" data-match-height="event-card--heading-wrap">
                  <a class="event-card--heading-link" href="http://chrisvalleskey.com/fillerama/">The swallow may fly south with the sun</a>
              </div>
              <div class="event-card--content" data-match-height="event-card--content">
            
            
                </div>
                <div class="event-card--register" data-match-height="event-card--register">
            
                  <a class="event-card--button event-card--registration-button" href="http://chrisvalleskey.com/fillerama/">Register</a>
                  <a class="event-card--button event-card--add-to-cal-button" href="#">Add To Calendar</a>
            
                </div>
              </div>
    </div>

</div>

Link Card

Accounts and Passwords

HTML

									
										<div class="link-card" data-match-height="link-card">
        <span class="link-card--icon sbuicon-lock2"></span>
        <h2 class="link-card--heading">Accounts and Passwords</h2>

          <div class="link-card--text">
          <ul>
                        <li><a class="dashed-link" href="/services/netid">NetID</a></li>
                        <li><a class="dashed-link" href="/services/single-sign-on-sso">Single Sign On (SSO)</a></li>
                        <li><a class="dashed-link" href="/services/solar">SOLAR</a></li>

            <li><a class="arrow-link" href="/services/catalog/category/accounts-and-passwords">View All</a></li>
          </ul>
          </div>
      </div>

Header

Unity Pattern Lab

This pattern contains: atoms-logo

HTML

									
										<!-- Begin .header -->
<header>
	<div class="logo-container">
		<div class="container">
			
			<div class="logo-wrapper clearfix">
				<div class="logo">
					<a href="#"><img src="../../images/logos/stony-brook-university-logo.jpg" class="logo" alt="Logo Alt Text" /></a>
				</div>
				<h1 class="site-name"><a href="/">Unity Pattern Lab</a></h1>
			</div>
			
		</div>
	</div>
</header>

<!-- End .header -->

Footer

This pattern contains: molecules-footer-nav

HTML

									
										<div class="top-footer fluffy">
    <div class="container">
        <div class="row">

                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>All right. Well, take care of yourself, Han</strong>
                        <ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Now that we know who you are, I know</strong>
                        <ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training &amp; Development</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Lorizzle pimpin' dolizzle sit amet I</strong>
                        <ul><li><a href="{{url}}">Provide Feedback</a></li><li><a href="{{url}}">Staff Directory</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Carrot cake fruitcake dessert apple</strong>
                        <ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training &amp; Development</a></li></ul>
                    </div>
                </div>
        </div>
        <div class="row">

                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>The swallow may fly south with the sun</strong>
                        <ul><li><a href="{{url}}">Annual Reports</a></li><li><a href="{{url}}">Hot Team Reports</a></li><li><a href="{{url}}">TechQual+ Survey</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>All right. Well, take care of yourself, Han</strong>
                        <ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Veggies sunt bona vobis, proinde vos</strong>
                        <ul><li><a href="{{url}}">Archives</a></li></ul>
                    </div>
                </div>
        </div>
    </div>
</div>

Shield Footer

This pattern contains: molecules-footer-nav

HTML

									
										<div class="shield-footer fluffy">
    <div class="container">
        <div class="row">

                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>All right. Well, take care of yourself, Han</strong>
                        <ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Now that we know who you are, I know</strong>
                        <ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training &amp; Development</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Lorizzle pimpin' dolizzle sit amet I</strong>
                        <ul><li><a href="{{url}}">Provide Feedback</a></li><li><a href="{{url}}">Staff Directory</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Carrot cake fruitcake dessert apple</strong>
                        <ul><li><a href="{{url}}">Knowledge Base</a></li><li><a href="{{url}}">Submit a Ticket</a></li><li><a href="{{url}}">Training &amp; Development</a></li></ul>
                    </div>
                </div>
        </div>
        <div class="row">

                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>The swallow may fly south with the sun</strong>
                        <ul><li><a href="{{url}}">Annual Reports</a></li><li><a href="{{url}}">Hot Team Reports</a></li><li><a href="{{url}}">TechQual+ Survey</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>All right. Well, take care of yourself, Han</strong>
                        <ul><li><a href="{{url}}">Project Management Office</a></li><li><a href="{{url}}">Project Status</a></li><li><a href="{{url}}">Request a Project</a></li></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="footer-nav">
                        <strong>Veggies sunt bona vobis, proinde vos</strong>
                        <ul><li><a href="{{url}}">Archives</a></li></ul>
                    </div>
                </div>
        </div>
    </div>
</div>

Bottom Footer

This pattern contains: molecules-social-links

HTML

									
										<div class="bottom-footer">

    <div class="social-links">
        <h3>Connect with @SBUDoIT</h3>
    
    
            <a href="#" class="social-link social-link--facebook">
                <span class="sr-only">Facebook</span>
            </a>
    
            <a href="#" class="social-link social-link--twitter">
             	<span class="sr-only">Twitter</span>
            </a>
    
            <a href="#" class="social-link social-link--youtube">
             	<span class="sr-only">YouTube</span>
            </a>
    
            <a href="#" class="social-link social-link--flickr">
             	<span class="sr-only">Flickr</span>
            </a>
    
            <a href="#" class="social-link social-link--instagram">
            	<span class="sr-only">Instagram</span>
            </a>
    
            <a href="#" class="social-link social-link--yammer">
            	<span class="sr-only">Yammer</span>
            </a>
        </p>
    </div>
</div>

Arrow Tab

9 - All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

7 - Now that we know who you are, I know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

1 - Lorizzle pimpin' dolizzle sit amet I

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.

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.

11 - Carrot cake fruitcake dessert apple

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.

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.

HTML

									
										<div class="arrow-tabs nav-tabs-navigation">
    <div class="nav-tabs-wrapper">
        <ul class="nav nav-tabs" data-tabs="tabs">
            <li><a href="#arrow-tab-9" data-toggle="tab">9 - All right. Well, take care of yourself, Han</a></li>
            <li><a href="#arrow-tab-7" data-toggle="tab">7 - Now that we know who you are, I know</a></li>
            <li><a href="#arrow-tab-1" data-toggle="tab">1 - Lorizzle pimpin' dolizzle sit amet I</a></li>
            <li><a href="#arrow-tab-11" data-toggle="tab">11 - Carrot cake fruitcake dessert apple</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane" id="arrow-tab-9">
                <h1>9 - All right. Well, take care of yourself, Han</h1> <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
            </div>
            <div class="tab-pane" id="arrow-tab-7">
                <h1>7 - Now that we know who you are, I know</h1> <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p>
            </div>
            <div class="tab-pane" id="arrow-tab-1">
                <h1>1 - Lorizzle pimpin' dolizzle sit amet I</h1> <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
            </div>
            <div class="tab-pane" id="arrow-tab-11">
                <h1>11 - Carrot cake fruitcake dessert apple</h1> <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

Tab

9 - All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.

Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

7 - Now that we know who you are, I know

Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.

Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.

1 - Lorizzle pimpin' dolizzle sit amet I

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.

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.

11 - Carrot cake fruitcake dessert apple

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.

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.

HTML

									
										<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
    <li><a href="#tab-9" data-toggle="tab">9 - All right. Well, take care of yourself, Han</a></li>
    <li><a href="#tab-7" data-toggle="tab">7 - Now that we know who you are, I know</a></li>
    <li><a href="#tab-1" data-toggle="tab">1 - Lorizzle pimpin' dolizzle sit amet I</a></li>
    <li><a href="#tab-11" data-toggle="tab">11 - Carrot cake fruitcake dessert apple</a></li>

</ul>
<div class="tab-content">



    <div class="tab-pane" id="tab-9">
        <h1>9 - All right. Well, take care of yourself, Han</h1>
        <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
    </div>



    <div class="tab-pane" id="tab-7">
        <h1>7 - Now that we know who you are, I know</h1>
        <p>Nullam lobortis elementum enim nec porta. Quisque facilisis ullamcorper nisl at pharetra. Donec sit amet nisl turpis. Fusce odio nunc, euismod eget ligula eget, cursus accumsan nisl. Vivamus sollicitudin odio a erat malesuada commodo.</p><p>Quisque ac odio vel massa tempor euismod ac nec massa. Maecenas congue sapien a diam blandit, sed facilisis augue aliquam. Pellentesque laoreet, ante quis pulvinar consequat, justo elit ultricies tortor, sed ultrices elit nisi in ligula. Sed pharetra ipsum eros, id ullamcorper felis convallis sed. Nam varius ultrices aliquet. Nam ornare fermentum ante, ac malesuada leo maximus ac.</p>
    </div>



    <div class="tab-pane" id="tab-1">
        <h1>1 - Lorizzle pimpin' dolizzle sit amet I</h1>
        <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
    </div>



    <div class="tab-pane" id="tab-11">
        <h1>11 - Carrot cake fruitcake dessert apple</h1>
        <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
    </div>



</div>
    </div>
    </div>

Alert Bar

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

HTML

									
										<section class="alert-bar ">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
    </div>
</section>

Alert Bar Online

All systems reported <a href='#'>online</a>. If you are experiencing issues, <a href='#'>report a problem now</a>.

HTML

									
										<section class="alert-bar bg-emerald">
    <div class="container">
        All systems reported &lt;a href='#'&gt;online&lt;/a&gt;. If you are experiencing issues, &lt;a href='#'&gt;report a problem now&lt;/a&gt;.
    </div>
</section>

Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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

Call to Action Text

HTML

									
										<div class="alert-box__notification">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>

Alert Emergency

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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

Call to Action Text

HTML

									
										<div class="alert-box__emergency">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>

Alert Notification

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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

Call to Action Text

HTML

									
										<div class="alert-box__notification">
	<h2 class="alert-box--heading"><span class="sbuicon-shield"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
	<div class="alert-box--summary">
	       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
	</div>

        <div class="alert-box--cta">
            <a href="#" class="default-button">Call to Action Text</a>
        </div>
</div>

Gallery

HTML

									
										<div class="image-gallery">
 <ul class="row">
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-800x600.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-800x600.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/regatta-1200x900.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/library-1200x900.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-640x480.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/library-800x600.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/regatta-640x480.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-640x480.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-1200x900.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/regatta-800x600.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/library-640x480.jpg">
            </li>
            <li class="col-lg-3 col-md-3 col-sm-3 col-xs-4">
                <img class="img-responsive" src="../../placeholders/images/sbu/sac-1200x900.jpg">
            </li>
          </ul>


 <div class="image-gallery--modal fade modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>

Beyond Heros

Classic Hero

Become a Seawolf

Want to change the great big world? So do we. Join our community of explorers.

Pri at omnis

Tollit phaedrum sententiae

Sed ut perspiciatis unde

Duo omnes scripta

This pattern contains: organisms-beyond-hero

HTML

									
										<h3 class="content-header">Classic Hero</h3>
  <section class="hero-beyond">
    <div class="container">
      <div class="hero-beyond--headings">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <h1 class="hero-beyond--heading">Become a Seawolf</h2>
        		<h2 class="hero-beyond--subheading">Want to change the great big world? So do we. Join our community of explorers.</h3>
          </div>
        </div>
      </div>
      <div class="hero-beyond--buttons">
        <div class="row">
          <div class="col-sm-6 col-md-4 col-lg-3">
              <a class="tuxedo-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
            </div>
          <div class="col-sm-6 col-md-4 col-lg-3">
              <a class="tuxedo-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
            </div>
          <div class="col-sm-6 col-md-4 col-lg-3">
              <a class="tuxedo-button" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
            </div>
          <div class="col-sm-6 col-md-4 col-lg-3">
              <a class="tuxedo-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
            </div>
        </div>
      </div>
    </div>
  </section>

Classic Heros

Classic Hero

Lorem ipsum dolor sit (37 characters)

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.

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.

With Nav

Lorem ipsum dolor sit (37 characters)

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.

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.

The swallow may fly south with the sun

All right. Well, take care of yourself, Han

Veggies sunt bona vobis, proinde vos

With Image

Lorem ipsum dolor sit (37 characters)

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.

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.

The swallow may fly south with the sun

All right. Well, take care of yourself, Han

Veggies sunt bona vobis, proinde vos

With Image

Lorem ipsum dolor sit (37 characters)

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.

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.

This pattern contains: organisms-classic-hero

HTML

									
										<h3 class="content-header">Classic Hero</h3>
  <section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">


  <div class="hero-classic--content">

  	<div class="container">


  			<div class="row">
          <div class="col-sm-12">

  					<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>

  					<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

  				</div>
  			</div>
      </div>
    </div>



  </section>

<h3 class="content-header">With Nav</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">


  <div class="hero-classic--navigation">
        <div class="container">
            <div class="row">

                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-4">
                    <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
                </div>



            </div>
        </div>
    </div>


<div class="hero-classic--content">

	<div class="container">


			<div class="row">
        <div class="col-sm-12">

					<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>

					<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

				</div>
			</div>
    </div>
  </div>

  
  <div class="hero-classic--buttons">
    <div class="container">

			     <div class="row">

  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">The swallow may fly south with the sun</a>
    	          </div>
  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">All right. Well, take care of yourself, Han</a>
    	          </div>
  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://veggieipsum.com">Veggies sunt bona vobis, proinde vos</a>
    	          </div>
           </div>
        </div>


    </div>
    


</section>

<h3 class="content-header">With Image</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">



<div class="hero-classic--content">

	<div class="container">


			<div class="row">
        
				<div class="col-sm-3">
						<img class="hero--logo" src="../../placeholders/images/sbu/regatta-800x800.jpg">
				</div>

				<div class="col-sm-9">

					<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>

					<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

				</div>
        
        
			</div>
    </div>
  </div>

  
  <div class="hero-classic--buttons">
    <div class="container">

			     <div class="row">

  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">The swallow may fly south with the sun</a>
    	          </div>
  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://chrisvalleskey.com/fillerama/">All right. Well, take care of yourself, Han</a>
    	          </div>
  		         <div class="col-xs-12 col-md-4">
                 <a data-match-height="hero-buttons" class="hero-button button-block" href="http://veggieipsum.com">Veggies sunt bona vobis, proinde vos</a>
    	          </div>
           </div>
        </div>


    </div>
    


</section>

<h3 class="content-header">With Image</h3>
<section class="hero-classic overlay-black" style="background-image:url('../../placeholders/images/wolfie-1900.jpg');">



<div class="hero-classic--content">

	<div class="container">


			<div class="row">
        
				<div class="col-sm-3">
						<img class="hero--logo" src="../../placeholders/images/sbu/regatta-800x800.jpg">
				</div>

				<div class="col-sm-9">

					<h1 class="hero-classic--heading">Lorem ipsum dolor sit (37 characters)</h1>

					<div class="hero-classic--text" class="introduction white"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

				</div>
        
        
			</div>
    </div>
  </div>

  


</section>

Hero Far Beyond

Far Beyond Hero

Best In Class Services

DoIT takes you far beyond with best in class services and support.

Read The Story

This pattern contains: organisms-far-beyond-hero

HTML

									
										<h3 class="content-header">Far Beyond Hero</h3>
  <section class="hero-far-beyond gradient-overlay__topLeft" style="background-image:url('../../images/backgrounds/farbeyond-stripes/redSwooshes.jpg');">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="hero-far-beyond--content">
              <h1 class="hero-far-beyond--heading">
                Best In Class
                Services
              </h1>
              <p class="hero-far-beyond--text">
              DoIT takes you far beyond with best in class services and support.
              </p>
              <a href="#" class="hero-far-beyond--button">Read The Story <span class="hero-far-beyond--icon sbuicon-long-arrow-right"></span></a>
            </div>
          </div>
        </div>
      </div>
  </section>

Modern Heros

Modern Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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.

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.

With Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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.

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.

Lorizzle pimpin' dolizzle sit amet I

Carrot cake fruitcake dessert apple

With Nav

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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.

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.

Full

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

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.

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.

Lorizzle pimpin' dolizzle sit amet I

Carrot cake fruitcake dessert apple

This pattern contains: organisms-modern-hero

HTML

									
										<h3 class="content-header">Modern Hero</h3>
  <section id="hero-example" class="hero-modern overlay-dark-gray">


    <div class="hero-modern--content">
    <div class="container">
      <div class="row">
        <div class="col-sx-12 col-sm-12 col-md-12">

            <h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
              <div class="hero-modern--text">
                <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
              </div>
        </div>
      </div>
    </div>
    </div>
  </section>

<h3 class="content-header">With Buttons</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">


  <div class="hero-modern--content">
  <div class="container">
    <div class="row">
      <div class="col-sx-12 col-sm-12 col-md-12">

          <h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
            <div class="hero-modern--text">
              <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
            </div>
      </div>
    </div>
  </div>
  </div>
  
  <div class="hero-modern--buttons">
    <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <a data-match-height="hero-buttons" class="hero-button block text-center" href="http://lorizzle.nl/">Lorizzle pimpin' dolizzle sit amet I</a>
      </div>
      <div class="col-sm-12 col-md-6">
        <a data-match-height="hero-buttons" class="hero-button block text-center" href="http://cupcakeipsum.com/">Carrot cake fruitcake dessert apple</a>
      </div>
    </div>
  </div>
  </div>
  
</section>

<h3 class="content-header">With Nav</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">

  
    <div class="hero-modern--navigation">
          <div class="container">
              <div class="row">

                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
                  </div>



              </div>
          </div>
      </div>
  

  <div class="hero-modern--content">
  <div class="container">
    <div class="row">
      <div class="col-sx-12 col-sm-12 col-md-12">

          <h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
            <div class="hero-modern--text">
              <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
            </div>
      </div>
    </div>
  </div>
  </div>
</section>

<h3 class="content-header">Full</h3>
<section id="hero-example" class="hero-modern overlay-dark-gray">

  
    <div class="hero-modern--navigation">
          <div class="container">
              <div class="row">

                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
                  </div>



              </div>
          </div>
      </div>
  

  <div class="hero-modern--content">
  <div class="container">
    <div class="row">
      <div class="col-sx-12 col-sm-12 col-md-12">

          <h1 class="hero-modern--heading animated fadeInDown white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h1>
            <div class="hero-modern--text">
              <p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p>
            </div>
      </div>
    </div>
  </div>
  </div>
  
  <div class="hero-modern--buttons">
    <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-6">
        <a data-match-height="hero-buttons" class="hero-button block text-center" href="http://lorizzle.nl/">Lorizzle pimpin' dolizzle sit amet I</a>
      </div>
      <div class="col-sm-12 col-md-6">
        <a data-match-height="hero-buttons" class="hero-button block text-center" href="http://cupcakeipsum.com/">Carrot cake fruitcake dessert apple</a>
      </div>
    </div>
  </div>
  </div>
  
</section>

SeawolfStrip

Become a Seawolf

Want to change the great big world? So do we. Join our community of explorers.

HTML

									
										<div class="seawolfStrip">
	<div class="wpb_wrapper">
		<h2 class="clearfix">Become a Seawolf</h2>
		<h3 class="clearfix"><span>Want to change the great big world?</span> <span><strong>So&nbsp;do we.</strong> Join our community of explorers.</span></h3>
		<ul class="clearfix">
			<li class="btn"><a href="http://mobile.cc.stonybrook.edu/sb/undergraduate-admissions/visit/">Visit us</a></li>
			<li class="btn"><a href="http://m.stonybrook.edu/sb/undergraduate-admissions/virtual-tour/">Take a virtual tour</a></li>
			<li class="btn"><a href="http://www.stonybrook.edu/sb/far-beyond/admissions/">Apply</a></li>
			<li class="btn"><a href="http://stonybrook.edu/summer/">Summer Sessions</a></li>
		</ul>
			</div><!-- /.wpb_wrapper -->
</div>

Split Heros

Hero Split

Lorem ipsum dolor sit (37 characters)

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.

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.

Sed ut perspiciatis unde

Duo omnes scripta

Videos

Lorem ipsum dolor sit (37 characters)

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.

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.

Sed ut perspiciatis unde

Duo omnes scripta

With Nav

Lorem ipsum dolor sit (37 characters)

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.

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.

Sed ut perspiciatis unde

Duo omnes scripta

This pattern contains: organisms-split-hero

HTML

									
										<h3 class="content-header">Hero Split</h3>
  <section class="hero-split cozy overlay-black bg-pattern-pentagon">


    <div class="hero-split--content">
    <div class="container">
    <div class="row">
    <div class="col-xs-12 col-md-6">
        <h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>

        <div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

        <div class="row">
            <div class="col-xs-12 col-md-12">
                <a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
              </div>
            <div class="col-xs-12 col-md-12">
                <a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
              </div>

      </div>


    </div>
    <div class="col-md-6">
      <div class="hero-split--image">
        <img class="img-responsive fadeIn" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="tech 2">
      </div>
    </div>

    </div>
    </div>
  </div>
  </section>

<h3 class="content-header">Videos</h3>
<section class="hero-split cozy overlay-black bg-pattern-pentagon">


  <div class="hero-split--content">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 col-md-6">
      <h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>

      <div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

      <div class="row">
          <div class="col-xs-12 col-md-12">
              <a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
            </div>
          <div class="col-xs-12 col-md-12">
              <a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
            </div>

    </div>


  </div>
  <div class="col-md-6">
    
    <div class="hero-split--video video-wrapper">
        <iframe src="https://www.youtube.com/embed/DpWDOXN5DWU?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
    
    
  </div>

  </div>
  </div>
</div>
</section>

<h3 class="content-header">With Nav</h3>
<section class="hero-split cozy overlay-black bg-pattern-pentagon">
  
    <div class="hero-split--navigation">
          <div class="container">
              <div class="row">

                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Pri at omnis</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://slipsum.com/lite/">Tollit phaedrum sententiae</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://baconipsum.com/">Vis graeci</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://hipsteripsum.me/">Tattooed Williamsburg</a>
                  </div>
                  <div class="col-sm-6 col-md-4 col-lg-4">
                      <a class="secondary-button button-block" data-match-height="hero-button" href="http://chrisvalleskey.com/fillerama/">Atomorum elaboraret ei pri</a>
                  </div>



              </div>
          </div>
      </div>
  


  <div class="hero-split--content">
  <div class="container">
  <div class="row">
  <div class="col-xs-12 col-md-6">
      <h1 class="hero-split--heading">Lorem ipsum dolor sit (37 characters)</h1>

      <div class="hero-split--text"><p>Lorem ipsum dolor sit amet, <a href='#'>consectetur adipisicing</a> 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>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 <a href='#'>culpa qui officia</a> deserunt mollit anim id est laborum.</p></div>

      <div class="row">
          <div class="col-xs-12 col-md-12">
              <a data-match-height="hero-buttons" class="hero-button button-block" href="http://lorizzle.nl/">Sed ut perspiciatis unde</a>
            </div>
          <div class="col-xs-12 col-md-12">
              <a data-match-height="hero-buttons" class="hero-button button-block" href="http://cupcakeipsum.com/">Duo omnes scripta</a>
            </div>

    </div>


  </div>
  <div class="col-md-6">
    <div class="hero-split--image">
      <img class="img-responsive fadeIn" src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="tech 2">
    </div>
  </div>

  </div>
  </div>
</div>
</section>

Navigation

HTML

									
										<div class="header-container">
	<div class="nav-elements-container">
		<!-- <quick-nav> -->
		<nav id="header" class="quick-nav clearfix" data-search-style="default">
			<div class="quick-nav-wrapper">
				<ul class="no-pad-wrapper border-box clearfix no-bullets">
					<li>
						<a href="http://www.library.stonybrook.edu/" class="clearfix">
							<span class="label clearfix">Libraries</span>
						</a>
					</li>
					<li>
						<a href="http://www.stonybrook.edu/sb/calendars.shtml" class="clearfix">
							<span class="label clearfix">Calendar<span class="hide-accessible-540">s</span></span>
						</a>
					</li>
					<li>
						<a href="http://www.stonybrook.edu/newsroom">
							<span class="label clearfix">News<span class="hide-accessible-540">room</span></span>
						</a>
					</li>
					<li class="tablet mobile desktop">
						<a href="http://www.stonybrook.edu/sb/directories.shtml">
							<span class="label clearfix">Directory</span>
						</a>
					</li>
					<li>
						<a href="http://it.stonybrook.edu/services/solar/">
							<span class="label clearfix">Solar</span>
						</a>
					</li>
					<li class="tablet mobile">
						<a href="http://www.stonybrook.edu/mycloud/">
							<span class="label clearfix">Email</span>
						</a>
					</li>
					<li>
						<span class="more-trigger">
		                        		<span class="label clearfix"><i class="icon sbuicon-caret-right clearfix"></i>More<span class="extra-label">&nbsp;Links</span><span class="extra-label-mobile">...</span></span>
						</span>
					</li>
					<!--<li class="desktop for-info">
		                        	<span class="audience-trigger">
		                        		<i class="icon fa fa-ellipsis-h clearfix"></i>
		                        		<span class="label clearfix"><i class="icon sbuicon-caret-right clearfix"></i>Info for</span>
		                        	</span>
		                        </li>-->
				</ul>
			</div>
		</nav>
		<!-- </quick-nav> -->
		<!-- <more-nav> -->
		<nav class="more-nav-v3 hide-accessible clearfix">
			<div class="wrapper more-nav-v3-wrapper">
				<div class="more-nav-v3-col">
					<strong>Info For</strong>
					<ul class="border-box clearfix">
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/for-students/" class="clearfix">Students</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/faculty-staff/" class="clearfix">Faculty &amp; Staff</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/alumni.shtml" class="clearfix">Alumni &amp; Friends</a>
						</li>
						<li class="clearfix">
							<a href="http://mobile.cc.stonybrook.edu/sb/undergraduate-admissions/parents/" class="clearfix">Parents</a>
						</li>
						<li class="clearfix">
							<a href="http://mobile.cc.stonybrook.edu/sb/community-relations/" class="clearfix">Neighbors</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/economic-development/" class="clearfix">Economic Development</a>
						</li>
						<li class="clearfix">
							<a href="http://sb.cc.stonybrook.edu/news/media_relations/reporters_toolkit.php" class="clearfix">Media</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/arts" class="clearfix">Arts &amp; Culture</a>
						</li>
					</ul>
				</div>
				<div class="more-nav-v3-col">
					<strong>Find</strong>
					<ul class="border-box clearfix">
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/search/people/" class="clearfix">People Directory</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/a-z.shtml" class="clearfix">A-Z Web Directory</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/calendars.shtml" class="clearfix">Calendars</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/maps.shtml" class="clearfix">Campus Maps</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/directions.shtml" class="clearfix">Directions</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/parking/" class="clearfix">Parking</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/sb/majors.shtml" class="clearfix">Majors &amp; Minors</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/jobs/" class="clearfix">Jobs</a>
						</li>
					</ul>
				</div>
				<div class="more-nav-v3-col">
					<strong>Shortcuts</strong>
					<ul class="border-box clearfix">
						<li class="clearfix">
							<a href="http://library.stonybrook.edu/" class="clearfix">Libraries</a>
						</li>
						<li class="clearfix">
							<a href="http://it.stonybrook.edu/services/solar" class="clearfix">Solar</a>
						</li>
						<li class="clearfix">
							<a href="http://blackboard.stonybrook.edu/" class="clearfix">Blackboard</a>
						</li>
						<li class="clearfix">
							<a href="http://stonybrook.edu/mycloud" class="clearfix">Google Apps</a>
						</li>
						<li class="clearfix">
							<a href="stonybrook.edu/medicine-webmail/" class="clearfix">Medicine Email</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/brand" class="clearfix">Brand Toolkit</a>
						</li>
						<li class="clearfix">
							<a href="http://it.stonybrook.edu/it-system-status" class="clearfix">IT System Status</a>
						</li>
						<li class="clearfix">
							<a href="http://stonybrook.edu/happenings" class="clearfix">Happenings</a>
						</li>
					</ul>
				</div>
				<div class="more-nav-v3-col">
					<strong>Offices &amp; Services</strong>
					<ul class="border-box clearfix">
						<li class="clearfix">
							<a href="http://stonybrook.edu/bursar/" class="clearfix">Bursar</a>
						</li>
						<li class="clearfix">
							<a href="http://stonybrook.edu/campus-safety/" class="clearfix">Campus Safety</a>
						</li>
						<li class="clearfix">
							<a href="http://career.stonybrook.edu/" class="clearfix">Career Center</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/hr/" class="clearfix">Human Resources</a>
						</li>
						<li class="clearfix">
							<a href="http://it.stonybrook.edu/" class="clearfix">IT Services</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/registrar/" class="clearfix">Registrar</a>
						</li>
						<li class="clearfix">
							<a href="http://www.stonybrook.edu/pres/" class="clearfix">Office of the President</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- </more-nav> -->
		<!-- <audience-nav> -->
		<!-- </audience-nav> -->
	</div>
	<!-- <logo-container> -->
	<div class="logo-container page-cat-main clearfix border-box">
		<header class="no-pad-wrapper">
			<div class="logo-wrapper">
				<div class="logo">
					<a href="http://www.stonybrook.edu/"><img src="//mobile.cc.stonybrook.edu/sb/img/branding/logo/sbu/primary/300/stony-brook-university-logo-horizontal-300.png" title="Stony Brook University"></a>
				</div>
				<div class="site-tagline">The State University of <span>New York</span></div>
			</div>
		</header>
	</div>
	<!-- </logo-container> -->
</div>

<div class="main-nav-container clearfix">
	<!-- <site-nav> -->
	<nav class="site-nav default border-box clearfix">
		<div class="no-pad-wrapper clearfix">
			<div class="menu-trigger border-box clearfix"><i class="icon sbuicon-bars"></i></div>
			<ul class="main-nav-list border-box clearfix hide-accessible-mobile" style="display: block;">
				<li class="clearfix home">
					<a href="http://www.stonybrook.edu/" class="clearfix">
						<span class="label clearfix"><i class="sbuicon-home"><span class="hide-accessible">Home</span></i>
						</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/about" class="clearfix">
						<span class="label clearfix">About</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/sb/far-beyond/admissions" class="clearfix">
						<span class="label clearfix">Admissions</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/academics" class="clearfix">
						<span class="label clearfix">Academics</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/research/" class="clearfix">
						<span class="label clearfix">Research</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/athletics/" class="clearfix">
						<span class="label clearfix">Athletics</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrookmedicine.edu/" class="clearfix">
						<span class="label clearfix">Medicine</span>
					</a>
				</li>
				<li class="clearfix">
					<a href="http://www.stonybrook.edu/giving/" class="clearfix">
						<span class="label clearfix">Giving</span>
					</a>
				</li>
			</ul>
			<div class="search-container default clearfix border-box" style="top: -127px;">
				<form class="search-wrapper" action="http://stonybrook.edu/search">
					<input type="text" id="search-form-query1" name="q" title="Search" value="" class="populate" size="30" placeholder="Search SBU">
					<button name="submit" type="submit" class="btn btn-success" id="search-form-submit1" alt="Do search">
						<i class="icon sbuicon-search2"></i>
					</button>
				</form>
			</div>
		</div>
		<div class="clearfix campaign-badge">
			<a href="http://www.stonybrook.edu/campaign" class="arrow-after">
				<span class="label hide-accessible clearfix">The Campaign for Stony Brook</span>
				<img src="http://www.stonybrook.edu/sb/far-beyond/img/branding/logo/campaign-lockup-two-line-358-60.png" alt="The Campaign for Stony Brook logo">
				<div class="join-us"><span class="arrow-after">Join us!</span></div>
			</a>
		</div>
	</nav>
	<!-- </site-nav> -->
</div>

<script>
	$('.menu-trigger').on('click', function(event) {
		$(this).toggleClass('selected');
		var icon = $(this).find('.icon');
		$mainNavList = $('.main-nav-list');

		if ($mainNavList.hasClass('open')) {
			icon.removeClass('sbuicon-close');
			icon.addClass('sbuicon-bars');
			$mainNavList.fadeIn(0, function() {
				$mainNavList.removeClass('open')
					.slideUp('fast', function() {
						$mainNavList.addClass('hide-accessible-mobile').fadeIn('fast');
					});
			});
		} else {
			icon.removeClass('sbuicon-bars');
			icon.addClass('sbuicon-close');
			$mainNavList.fadeOut(0, function() {
				$mainNavList.removeClass('hide-accessible-mobile').addClass('open')
					.slideDown('fast');
			});
		}

	});
	// section subnav

    $('.section-nav-trigger a').on('click',function(event){
        event.preventDefault();
        $(this).toggleClass('active');
        $sectionNav = $(this).parent().next('.section-nav');

        if($sectionNav.hasClass('open')) {
            $sectionNav.fadeIn(0,function(){
              $sectionNav.removeClass('open')
                .slideUp('fast',function() {
                    $sectionNav.addClass('hide-accessible-mobile-960').fadeIn('fast');
                });
            });
        } else {
            $sectionNav.fadeOut(0,function(){
              $sectionNav.removeClass('hide-accessible-mobile-960').addClass('open')
                .slideDown('fast');
            });
        }

    });

    // Get the text of the currently selected section nav and update the dropdown
    if($('.section-nav .selected').length) {
    	$('.section-nav-trigger a').text($('.section-nav .selected').text());
    }

	$('input[type="text"]').on('focus',function() {
		$(this).addClass('focus');
	}).on('focusout',function() {
		if($(this).val().length == 0) {
			$(this).removeClass('focus');
		}
	});

	$('.search-container button').on('click',function(event) {
		var inputEl = $(this).closest('.search-container').find('input');
		if($(inputEl).val().length == 0) {
			event.preventDefault();
			inputEl.focus();
		} else {
			if(!($(inputEl).hasClass('vasearch'))) {
				var queryString = inputEl.val();
				var searchUrl = "http://www.stonybrook.edu/search/?q="+queryString;
				event.preventDefault();
				event.stopPropagation();
				inputEl.val('').focusout();
				window.open(searchUrl, '_self');
			}
		}
	});

	$('.search-container input').keypress(function(event) {
		if (event.keyCode == 13) {
			var inputEl = $(this);
			if($(inputEl).val().length == 0) {
				event.preventDefault();
				inputEl.focus();
			} else {
				if(!($(inputEl).hasClass('vasearch'))) {
					var queryString = inputEl.val();
					var searchUrl = "http://www.stonybrook.edu/search/?q="+queryString;
					event.preventDefault();
					event.stopPropagation();
					inputEl.val('').focusout();
					window.open(searchUrl, '_self');
				}
			}
		}
	});

</script>

Background Image Card Sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

Lorem ipsum dolor sit (37 characters)

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.

Call to Action Text

This pattern contains: molecules-simple-blurb

HTML

									
										<section>

<div class="container-fluid">

    <div class="row position-relative">

        <div class="hidden-xs col-md-6 background-image-card" data-background="../../placeholders/images/sbu/regatta-800x450.jpg" style="background-image: url('../../placeholders/images/sbu/regatta-800x450.jpg');"></div>

        <div class="col-xs-12 col-md-6 col-md-offset-6">

            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>
            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>

          </div>
    </div>
</div>
</section>

<section>
<div class="container-fluid">

    <div class="row position-relative">

        <div class="hidden-xs col-md-6 col-md-offset-6 background-image-card" data-background="../../placeholders/images/sbu/regatta-800x450.jpg" style="background-image: url('../../placeholders/images/sbu/regatta-800x450.jpg');"></div>

        <div class="col-xs-12 col-md-3">

            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>


          </div>
          <div class="col-xs-12 col-md-3">

              <div class="simple-blurb-card" data-match-height="simple-blurb-card">
              
              
              
              
              
              
              
              
              
              
                  <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
              
                  <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
              
                  <div class="simple-blurb-card--text">
                      <p>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>
                  </div>
              
              
                  <div class="simple-blurb-card--cta">
                      <a href="#" class="default-button">Call to Action Text</a>
                  </div>
              
              </div>


            </div>
    </div>
</div>
</section>

<section>
<div class="container">

    <div class="row position-relative">

        <div class="hidden-xs col-md-6 background-image-card" data-background="../../placeholders/images/sbu/regatta-800x450.jpg" style="background-image: url('../../placeholders/images/sbu/regatta-800x450.jpg');"></div>

        <div class="col-xs-12 col-md-6 col-md-offset-6">

            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>
            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>

          </div>
    </div>
</div>
</section>

<section>

<div class="container">

    <div class="row position-relative">

        <div class="hidden-xs col-md-6 col-md-offset-6 background-image-card" data-background="../../placeholders/images/sbu/regatta-800x450.jpg" style="background-image: url('../../placeholders/images/sbu/regatta-800x450.jpg');"></div>

        <div class="col-xs-12 col-md-6">

            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>
            <div class="simple-blurb-card" data-match-height="simple-blurb-card">
            
            
            
            
            
            
            
            
            
            
                <h2 class="simple-blurb-card--heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</h2>
            
                <h3 class="simple-blurb-card--subheading">Lorem ipsum dolor sit (37 characters)</h3>
            
                <div class="simple-blurb-card--text">
                    <p>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>
                </div>
            
            
                <div class="simple-blurb-card--cta">
                    <a href="#" class="default-button">Call to Action Text</a>
                </div>
            
            </div>

          </div>
    </div>
</div>
</section>

Slideout Panel

SOLAR.STONYBROOK.EDU

Close

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad, vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

NetID.STONYBROOK.EDU

Close

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad, vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

WiFi.STONYBROOK.EDU

Close

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad, vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis. Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus? Ab porro fuga consequatur quisquam illo quae quas tenetur.

Lorem Ipsum

HTML

									
											<!-- SOLAR -->
	<div class="panelSOLAR slideout-panel from-right">
		<header class="slideout-panel-header">
			<h3 class="slideout-panel-title white">&nbsp;SOLAR<span class="lighter">.STONYBROOK.EDU</h3>
			<a href="#0" class="slideout-panel-close">Close</a>
		</header>

		<div class="slideout-panel-container">
			<div class="slideout-panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>
			</div>
			<!-- slideout-panel-content -->
		</div>
		<!-- slideout-panel-container -->
	</div>
	<!-- slideout-panel -->

	<!-- NetID -->
	<div class="panelNetID slideout-panel from-right">
		<header class="slideout-panel-header">
			<h3 class="slideout-panel-title white">&nbsp;NetID<span class="lighter">.STONYBROOK.EDU</h3>
			<a href="#0" class="slideout-panel-close">Close</a>
		</header>

		<div class="slideout-panel-container">
			<div class="slideout-panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>
			</div>
			<!-- slideout-panel-content -->
		</div>
		<!-- slideout-panel-container -->
	</div>
	<!-- slideout-panel -->

	<!-- WiFi -->
	<div class="panelWiFi slideout-panel from-right">
		<header class="slideout-panel-header">
			<h3 class="slideout-panel-title white">&nbsp;WiFi<span class="lighter">.STONYBROOK.EDU</h3>
			<a href="#0" class="slideout-panel-close">Close</a>
		</header>

		<div class="slideout-panel-container">
			<div class="slideout-panel-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque similique, at excepturi adipisci repellat ut veritatis officia, saepe nemo soluta modi ducimus velit quam minus quis reiciendis culpa ullam quibusdam eveniet. Dolorum alias ducimus, ad,
					vitae delectus eligendi, possimus magni ipsam repudiandae iusto placeat repellat omnis veritatis adipisci aliquam hic ullam facere voluptatibus ratione laudantium perferendis quos ut. Beatae expedita, itaque assumenda libero voluptatem adipisci maiores
					voluptas accusantium, blanditiis saepe culpa laborum iusto maxime quae aperiam fugiat odit consequatur soluta hic. Sed quasi beatae quia repellendus, adipisci facilis ipsa vel, aperiam, consequatur eaque mollitia quaerat. Iusto fugit inventore eveniet
					velit.
				</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magnam accusamus obcaecati nisi eveniet quo veniam quibusdam veritatis autem accusantium doloribus nam mollitia maxime explicabo nemo quae aspernatur impedit cupiditate dicta molestias
					consectetur, sint reprehenderit maiores. Tempora, exercitationem, voluptate. Sapiente modi officiis nulla sed ullam, amet placeat, illum necessitatibus, eveniet dolorum et maiores earum tempora, quas iste perspiciatis quibusdam vero accusamus veritatis.
					Recusandae sunt, repellat incidunt impedit tempore iusto, nostrum eaque necessitatibus sint eos omnis! Beatae, itaque, in. Vel reiciendis consequatur saepe soluta itaque aliquam praesentium, neque tempora. Voluptatibus sit, totam rerum quo ex nemo
					pariatur tempora voluptatem est repudiandae iusto, architecto perferendis sequi, asperiores dolores doloremque odit. Libero, ipsum fuga repellat quae numquam cumque nobis ipsa voluptates pariatur, a rerum aspernatur aliquid maxime magnam vero dolorum
					omnis neque fugit laboriosam eveniet veniam explicabo, similique reprehenderit at. Iusto totam vitae blanditiis. Culpa, earum modi rerum velit voluptatum voluptatibus debitis, architecto aperiam vero tempora ratione sint ullam voluptas non! Odit
					sequi ipsa, voluptatem ratione illo ullam quaerat qui, vel dolorum eligendi similique inventore quisquam perferendis reprehenderit quos officia! Maxime aliquam, soluta reiciendis beatae quisquam. Alias porro facilis obcaecati et id, corporis accusamus?
					Ab porro fuga consequatur quisquam illo quae quas tenetur.</p>
			</div>
			<!-- slideout-panel-content -->
		</div>
		<!-- slideout-panel-container -->
	</div>
	<!-- slideout-panel -->

	<section class="fluffy" style="background: url('') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
		<div id="tile-wrapper">
			<div id="tile-main">
				<div class="inner">
					<h2 class="section-title white">Lorem Ipsum</h2>
					<div class="tiles">
						<article class="style1 panelSOLAR-btn">
							<span class="image">
												<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="">
											</span>
							<a href="#">
								<h2>SOLAR</h2>
								<div class="content">
									<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
								</div>
							</a>
						</article>
						<article class="style1 panelNetID-btn">
							<span class="image">
												<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="">
											</span>
							<a href="#">
								<h2>NetID</h2>
								<div class="content">
									<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
								</div>
							</a>
						</article>
						<article class="style1 panelWiFi-btn">
							<span class="image">
												<img src="../../placeholders/images/sbu/regatta-800x800.jpg" alt="">
											</span>
							<a href="#">
								<h2>WiFi</h2>
								<div class="content">
									<p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
								</div>
							</a>
						</article>
					</div>
				</div>
			</div>
		</div>
	</section>


	<script>
		jQuery(document).ready(function($) {
			//open SOLAR panel
			$('.panelSOLAR-btn').on('click', function(event) {
				event.preventDefault();
				$('.panelSOLAR').addClass('is-visible');
			});
			//close SOLAR panel
			$('.panelSOLAR').on('click', function(event) {
				if ($(event.target).is('.slideout-panel') || $(event.target).is('.slideout-panel-close')) {
					$('.panelSOLAR').removeClass('is-visible');
					event.preventDefault();
				}
			});

			//open NetID panel
			$('.panelNetID-btn').on('click', function(event) {
				event.preventDefault();
				$('.panelNetID').addClass('is-visible');
			});
			//close NetID panel
			$('.panelNetID').on('click', function(event) {
				if ($(event.target).is('.slideout-panel') || $(event.target).is('.slideout-panel-close')) {
					$('.panelNetID').removeClass('is-visible');
					event.preventDefault();
				}
			});

			//open WiFi panel
			$('.panelWiFi-btn').on('click', function(event) {
				event.preventDefault();
				$('.panelWiFi').addClass('is-visible');
			});
			//close WiFi panel
			$('.panelWiFi').on('click', function(event) {
				if ($(event.target).is('.slideout-panel') || $(event.target).is('.slideout-panel-close')) {
					$('.panelWiFi').removeClass('is-visible');
					event.preventDefault();
				}
			});

			//open  panel
			$('.panelWiFi-btn').on('click', function(event) {
				event.preventDefault();
				$('.panelWiFi').addClass('is-visible');
			});
			//close WiFi panel
			$('.panelWiFi').on('click', function(event) {
				if ($(event.target).is('.slideout-panel') || $(event.target).is('.slideout-panel-close')) {
					$('.panelWiFi').removeClass('is-visible');
					event.preventDefault();
				}
			});

		});
	</script>
	<!-- Resource jQuery -->

Sbu Slider

SBU Video Production Group Honored at the 37th Annual Telly Awards

Takes home four awards including top silver award for Lab Safety video.

Continue Reading
Nappi Named Interim Chief Information Security Officer

Matthew Nappi assumed the position of Interim Chief Information Security Officer (CISO) at Stony Brook University on June 20, 2016.

Continue Reading
Research Your Next Tech Idea or Purchase with Gartner Campus Access

Gartner is a leading information technology firm that provides research and analysis services to inform and support decision making in higher education and other industry sectors.

Learn More

HTML

									
										<section class="sbu-hero bg-asphalt" id="news">
  <ul class="sbu-hero-slider autoplay">



     <li id="section-16426" class="overlay-gray is-moving move-left">
      <div class="sbu-full-width">
        <div class="container">




          <div class="col-md-12 no-padding">
              <h2 class="sbu-hero-title">SBU Video Production Group Honored at the 37th Annual Telly Awards</h2>
              <div class="sbu-hero-content"><p>Takes home four awards including top silver award for Lab Safety video.</p>
</div>




                    <a data-match-height="hero-buttons" class="sbu-btn" href="https://it.stonybrook.edu/news/articles/sbu-video-production-group-honored-at-the-37th-annual-telly-awards" style="">Continue Reading</a>


          </div>




</div>
      </div>
    </li>



     <li id="section-16311" class="overlay-gray is-moving move-left">
      <div class="sbu-full-width">
        <div class="container">




          <div class="col-md-12 no-padding">
              <h2 class="sbu-hero-title">Nappi Named Interim Chief Information Security Officer</h2>
              <div class="sbu-hero-content"><p>Matthew Nappi assumed&nbsp;the position of Interim Chief Information Security Officer (CISO) at Stony Brook University on June 20, 2016.</p>
</div>




                    <a data-match-height="hero-buttons" class="sbu-btn" href="http://it.stonybrook.edu/news/articles/nappi-named-interim-chief-information-security-officer-ciso-doesschate-to-lead-it" style="">Continue Reading</a>


          </div>




</div>
      </div>
    </li>



     <li id="section-16551" class="overlay-gray move-left">
      <div class="sbu-full-width">
        <div class="container">




          <div class="col-md-12 no-padding">
              <h2 class="sbu-hero-title">Research Your Next Tech Idea or Purchase with Gartner Campus Access</h2>
              <div class="sbu-hero-content"><p>Gartner is a leading information technology firm that provides research and analysis services to inform and support decision making in higher education and other industry sectors.</p>
</div>




                    <a data-match-height="hero-buttons" class="sbu-btn" href="http://it.stonybrook.edu/services/gartner-campus-access" style="">Learn More</a>


          </div>




</div>
      </div>
    </li>






  </ul> <!-- .sbu-hero-slider -->





  <div class="sbu-slider-nav">
    <nav>
      <span class="sbu-marker item-5"></span>

      <ul>

                <li class=""><a href="#section-16426">•</a></li>


                <li class=""><a href="#section-16311">•</a></li>


                <li class=""><a href="#section-16551">•</a></li>



      </ul>
    </nav>
  </div> <!-- .sbu-slider-nav -->
</section>

Lorem ipsum dolor sit (37 characters)
January 16th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
February 28th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
March 20th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
May 20th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
July 9th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
August 30th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
September 15th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
November 1st, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
December 10th, 2014
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
January 19th, 2015
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
Event title here
March 3rd, 2015
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

HTML

									
										
<section class="sbu-horizontal-timeline">
    <div class="timeline">
        <div class="events-wrapper">
            <div class="events">
                <ul class="no-bullets">
                    <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
                    <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
                    <li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
                    <li><a href="#0" data-date="20/05/2014">20 May</a></li>
                    <li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
                    <li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
                    <li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
                    <li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
                    <li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
                    <li><a href="#0" data-date="19/01/2015">29 Jan</a></li>
                    <li><a href="#0" data-date="03/03/2015">3 Mar</a></li>
                </ul>

                <span class="filling-line" aria-hidden="true"></span>
            </div> <!-- .events -->
        </div> <!-- .events-wrapper -->
            
        <ul class="sbu-timeline-navigation no-bullets">
            <li><a href="#0" class="prev inactive">Prev</a></li>
            <li><a href="#0" class="next">Next</a></li>
        </ul> <!-- .sbu-timeline-navigation -->
    </div> <!-- .timeline -->

    <div class="events-content">
        <ul class="no-bullets">
            <li class="selected" data-date="16/01/2014">
                <h2>Lorem ipsum dolor sit (37 characters)</h2>
                <em>January 16th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="28/02/2014">
                <h2>Event title here</h2>
                <em>February 28th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="20/04/2014">
                <h2>Event title here</h2>
                <em>March 20th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="20/05/2014">
                <h2>Event title here</h2>
                <em>May 20th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="09/07/2014">
                <h2>Event title here</h2>
                <em>July 9th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="30/08/2014">
                <h2>Event title here</h2>
                <em>August 30th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="15/09/2014">
                <h2>Event title here</h2>
                <em>September 15th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="01/11/2014">
                <h2>Event title here</h2>
                <em>November 1st, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="10/12/2014">
                <h2>Event title here</h2>
                <em>December 10th, 2014</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="19/01/2015">
                <h2>Event title here</h2>
                <em>January 19th, 2015</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>

            <li data-date="03/03/2015">
                <h2>Event title here</h2>
                <em>March 3rd, 2015</em>
                <p> 
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
                </p>
            </li>
        </ul>
    </div> <!-- .events-content -->
</section>

Vertical Timeline

The swallow may fly south with the sun

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.
All right. Well, take care of yourself, Han

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.
Veggies sunt bona vobis, proinde vos

Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.
Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.

HTML

									
										
    <ul class="vertical-timeline">
        

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-th-large"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">The swallow may fly south with the sun</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-film"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">All right. Well, take care of yourself, Han</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>

        <li>
            <div class="vertical-timeline--item-icon"><i class="sbuicon-music"></i></div>
            <div class="vertical-timeline--item-content-wrap">
                <h4 class="vertical-timeline--item-heading">Veggies sunt bona vobis, proinde vos</h4>
                <div class="vertical-timeline--item-content">
                    <p>Donec malesuada enim a odio fringilla, nec porttitor orci lacinia. Mauris vel ornare ante. Pellentesque iaculis nisi id ipsum interdum dictum non tempus justo. Donec eget dolor at turpis sodales luctus.</p><p> Duis consectetur leo quis magna hendrerit egestas. Vivamus dignissim turpis magna, eget volutpat urna porta id. Praesent volutpat fermentum odio, eu facilisis quam sollicitudin sit amet. Fusce eget lorem varius, auctor dui non, tempor ligula. Nullam quis metus nec tortor sollicitudin tincidunt sed vel lorem. Nulla sed porttitor augue. Integer tincidunt eu diam non molestie. In vel scelerisque libero. Aliquam gravida at nibh vulputate lobortis. Nulla bibendum imperdiet ipsum a lacinia.</p>
                </div>
            </div>
        </li>
    </ul>