The blockquote element represents a section that is being quoted from another source. Good blockquotes should include a citation, but one is not required. Stylistically, these can look a lot like pull-quotes by using :before
and :after
pseudo elements for the curly quotes, or, authors can include them inline.
The contents of blockquote
are limited to headings and paragraphs. header
, footer
, or cite
tags are not allowed. For more examples, see A List Apart's sample blockquote patterns.
Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web
<figure>
<blockquote cite="">
<p></p>
</blockquote>
<figcaption>
<cite>
<small><a href=""></a></small>
</cite>
</figcaption>
</figure>
$cite-display: block !default;
$cite-text-align: right !default;
$cite-font-size: inherit !default;
// Use our pre-defined markup and add a class
// to your custom blockquote element.
// For example:
//
// .blockquote { @include blockquote("-"); }
//
// "-" is your citation flourish. For example:
//
// I always say important things because I'm so smart
// - author name
// Citation Mixin for Custom Styling
@mixin cite-style($display, $text-align, $font-size) {
display: $display;
font-size: $font-size;
text-align: $text-align;
}
%cite {
@include cite-style($cite-display, $cite-text-align, $cite-font-size);
}
@mixin blockquote($citation-flourish) {
p {
&:last-of-type {
margin-bottom: -#{$line-height/2}em;
}
}
+ figcaption {
@extend %cite;
&:before {
content: $citation-flourish;
}
}
}