§ 4.3 Block Quotes

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

Trent Walton
HTML
<figure>
	<blockquote cite="">
		<p></p>
	</blockquote>
	<figcaption>
		<cite>
			<small><a href=""></a></small>
		</cite>
	</figcaption>
</figure>
_typeplate.scss
$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;
		}
	}
}
↑ back to top