Bold Moves Buttons
Lorem ipsum dolor sit (37 characters)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Read Story
This pattern contains:
molecules-bold-moves-button
HTML
<div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<a href="#" class="bold-moves-box--title">
<h3>Lorem ipsum dolor sit (37 characters)</h3>
</a>
<a href="#" class="bold-moves-box--story">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<span class="bold-moves-box--fullStory">Read Story</span>
</a>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--title">
<h3>The swallow may fly south with the sun</h3>
</a>
<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--story">
<p>The Knights Who Say Ni demand a sacrifice! Found them? In Mercia?! The coconut's tropical! Where'd you get the coconuts? Why do you think that she is a witch? I am your king. You don't vote for kings. But you are dressed as one. Oh, ow!</p>
<span class="bold-moves-box--fullStory">Read Story</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--title">
<h3>All right. Well, take care of yourself, Han</h3>
</a>
<a href="http://chrisvalleskey.com/fillerama/" class="bold-moves-box--story">
<p>I'm surprised you had the courage to take the responsibility yourself. Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. You don't be.</p>
<span class="bold-moves-box--fullStory">Read Story</span>
</a>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="bold-moves-box" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<a href="http://veggieipsum.com" class="bold-moves-box--title">
<h3>Veggies sunt bona vobis, proinde vos</h3>
</a>
<a href="http://veggieipsum.com" class="bold-moves-box--story">
<p>Bush tomato gumbo potato garbanzo ricebean burdock daikon coriander kale quandong. Bok choy celery leek avocado shallot horseradish aubergine parsley. Bok choy bell pepper kale celery desert raisin kakadu plum bok choy bunya nuts.</p>
<span class="bold-moves-box--fullStory">Read Story</span>
</a>
</div>
</div>
</div>
Circle Band Buttons
This pattern contains:
molecules-circle-band-button
HTML
<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
<div class="row">
<ul class="list-inline">
<li>
<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button" href="#" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
</ul>
</div>
<ul class="list-inline">
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--small" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
</ul>
<ul class="list-inline">
<li>
<a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/sac-1200x1200.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/library-640x640.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
<li>
<a class="circle-band-button--large" href="#" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</a>
<!--
Alternatively can use div, but why?
<div class="circle-band-button" style="background-image: url('../../placeholders/images/sbu/regatta-800x800.jpg')">
<span class="circle-band-button--label">Main Campus</span>
</div>-->
</li>
</ul>
Dual Tone Buttons
This pattern contains:
molecules-dual-tone-button
HTML
<a href="#" class="dual-tone-button">
<div class="dual-tone-button--content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)</div>
<span class="dual-tone-button--icon sbuicon-shield"></span></a>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="http://chrisvalleskey.com/fillerama/" class="dual-tone-button">
<div class="dual-tone-button--content">On second thoughts, let's not go there. It is a silly place. You don't</div>
<span class="dual-tone-button--icon sbuicon-th-large"></span></a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="http://chrisvalleskey.com/fillerama/" class="dual-tone-button">
<div class="dual-tone-button--content">You don't believe in the Force, do you? The Force is strong with this one</div>
<span class="dual-tone-button--icon sbuicon-film"></span></a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="http://veggieipsum.com" class="dual-tone-button">
<div class="dual-tone-button--content">Postulo esse magis azuki bean burdock brussels sprout quandong komatsun</div>
<span class="dual-tone-button--icon sbuicon-music"></span></a>
</div>
</div>
Event Stamp Buttons
HTML
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="event-stamp-button">
<div class="display--flex-mobile">
<div class="event-stamp-button--date" data-match-height="event-stamp-button">
<time datetime="2016-09-01">
<span class="event-stamp-button--month">SEPT</span>
<span class="event-stamp-button--day">01</span>
</time>
</div>
<div class="event-stamp-button--text">
<a href="#">Mini Byte: New to Mac</a>
</div>
</div>
</div>
</div>
Far Beyond Event Buttons
HTML
<div class="bg-red fluffy">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://lorizzle.nl/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">1</span><span class="farbeyond-event-button--month">Jan</span></div>
<div class="farbeyond-event-button--title">Lorizzle pimpin' dolizzle sit amet I</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://www.malevole.com/mv/misc/text/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">8</span><span class="farbeyond-event-button--month">Jun</span></div>
<div class="farbeyond-event-button--title">Hong Kong Phooey, number one super g</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://www.niemanlab.org/journo-ipsum/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">26</span><span class="farbeyond-event-button--month">May</span></div>
<div class="farbeyond-event-button--title">Blog meme masthead DocumentCloud Fou</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://web20ipsum.com">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">31</span><span class="farbeyond-event-button--month">Aug</span></div>
<div class="farbeyond-event-button--title">Webtwo ipsum dolor sit amet, eskobo</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://www.cheeseipsum.co.uk/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">28</span><span class="farbeyond-event-button--month">Dec</span></div>
<div class="farbeyond-event-button--title">Cauliflower cheese cream cheese baby</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://veggieipsum.com">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">10</span><span class="farbeyond-event-button--month">Feb</span></div>
<div class="farbeyond-event-button--title">Veggies sunt bona vobis, proinde vos</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://baconipsum.com/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">22</span><span class="farbeyond-event-button--month">Mar</span></div>
<div class="farbeyond-event-button--title">Bacon ipsum dolor sit amet spare rib</div>
</a>
</div>
<div class="col-md-3">
<a class="farbeyond-event-button" href="http://chrisvalleskey.com/fillerama/">
<div class="farbeyond-event-button--date"><span class="farbeyond-event-button--day">25</span><span class="farbeyond-event-button--month">Oct</span></div>
<div class="farbeyond-event-button--title">The swallow may fly south with the sun</div>
</a>
</div>
</div>
</div>
</div>
Polaroid Buttons
This pattern contains:
molecules-polaroid-button
HTML
<a href="#" class="polaroid-card">
<img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
<h2 class="polaroid-card--heading">Lorem ipsum dolor sit (37 characters)</h2>
</a>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="#" class="polaroid-card">
<img class="polaroid-card--image" src="../../placeholders/images/sbu/sac-1600x900.jpg" />
<h2 class="polaroid-card--heading">The swallow may fly south with the sun</h2>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="#" class="polaroid-card">
<img class="polaroid-card--image" src="../../placeholders/images/sbu/library-640x360.jpg" />
<h2 class="polaroid-card--heading">All right. Well, take care of yourself, Han</h2>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a href="#" class="polaroid-card">
<img class="polaroid-card--image" src="../../placeholders/images/sbu/regatta-800x450.jpg" />
<h2 class="polaroid-card--heading">Veggies sunt bona vobis, proinde vos</h2>
</a>
</div>
</div>
Promo Box Buttons
This pattern contains:
molecules-promo-box-button
HTML
<a class="promo-box-button" href="#" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="promo-box-button--label">Sed ut perspiciatis unde</span>
</a>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="promo-box-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="promo-box-button--label">Atomorum elaboraret ei pri</span>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="promo-box-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="promo-box-button--label">Pri at omnis</span>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="promo-box-button" href="http://veggieipsum.com" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="promo-box-button--label">Ex enim aperiam sit</span>
</a>
</div>
</div>
Rounded Image Buttons
This pattern contains:
molecules-rounded-image-button
HTML
<a class="rounded-image-button" href="#" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="rounded-image-button--label">Lorem ipsum dolor sit (37 characters)</span>
</a>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="rounded-image-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="rounded-image-button--label">The swallow may fly south with the sun</span>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="rounded-image-button" href="http://chrisvalleskey.com/fillerama/" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="rounded-image-button--label">All right. Well, take care of yourself, Han</span>
</a>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<a class="rounded-image-button" href="http://veggieipsum.com" style="background-image: url('../../placeholders/images/students-walking.jpg')">
<span class="rounded-image-button--label">Veggies sunt bona vobis, proinde vos</span>
</a>
</div>
</div>