Foundation 5 BlockQuotes
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic"></script>
<a class="icon-font" href="#" data-icon="@">link here</a>
<blockquote class="bq1">
<p>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.</p> <cite>Andrew Winters, <a href="#!">Albany Post</a></cite>
</blockquote>
<blockquote class="bq2">
<p>Speech marks. Curly quotes. That annoying thing cool people do with their fingers to emphasize a buzzword, shortly before you hit them.</p>
<img src="http://surface.surgd.com/fiddle/profile-sm.jpg" alt="OptimaHost" />
<cite>Faye Winters <a href="#!">Technical Director, Albany Post</a></cite>
<div class="clearfix"></div>
</blockquote>
CSS
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic);
body {
padding: 60px;
font-family:'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
}
.icon-font:before {
content: attr(data-icon);
font-family: icon;
margin-right: 5px;
}
blockquote.bq1 {
position: relative;
border: thin solid #efefef;
padding:25px 0.7rem;
margin: 3rem 0.7rem 3rem 0.7rem;
}
blockquote.bq1:before, blockquote.bq1:after {
font-family:'FontAwesome';
color: #FFF;
cursor: default;
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 1rem;
background-color: #E8522F;
border-radius: 100%;
text-align: center;
vertical-align: middle;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
blockquote.bq1:before {
top: -20px;
left: 10px;
content:"\f10d";
}
blockquote.bq1:after {
bottom: -20px;
right: 10px;
content:"\f10e";
}
blockquote.bq1 p {
margin-bottom: 0;
font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #111;
text-align: center;
}
blockquote.bq1 cite {
display: block;
font-size: 0.8125rem;
color: #111;
margin:0;
}
blockquote.bq1 cite:before {
content:"\2014 \0020";
}
blockquote.bq1 cite a, blockquote.bq1 cite a:visited {
color: #E8522F;
}
blockquote.bq2 {
position: relative;
border: thin solid #efefef;
padding:25px 0.7rem;
margin: 3rem 0.7rem 3rem 0.7rem;
}
blockquote.bq2:before, blockquote.bq2:after {
font-family:'FontAwesome';
color: #FFF;
cursor: default;
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 1rem;
background-color: #E8522F;
...
JavaScript
$(document).foundation();