Unity Pattern Lab

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>