Quotes

The <blockquote> tag is commonly used for both long quotations and pull quotes. Tyfy provides styles for basic quotations and classes that allow the <blockquote> tag to be used for pull quotes.

Classes

.pullquote

Applied to a <blockquote> to render as a pull quote.

.pullquote-roof-fixed

Added to the pullquote class to display a decorative, fixed-width rule above the pullquote; the decorative rule uses an svg background and the $tyicons-quote-right icon.

.pullquote-roof-full

Added to the pullquote class to display a decorative, full-width rule above the pullquote; the decorative rule uses an svg background and the $tyicons-quote-right icon.

.float-left

Added to the pullquote class to float the pull quote on the left. The width of the floated quote is 50% of the parent. The style is responsive. The screen width must be at least $tybreak-float for the quote to be floated.

.float-right

Added to the pullquote class to float the pull quote on the right. The width of the floated quote is 50% of the parent. The style is responsive. The screen width must be at least $tybreak-float for the quote to be floated.

Variables

$tybreak-float

40em !default;

Minimum screen width for the float classes take effect.

$tybreak-quote

40em !default;

Minimum screen width for quotes to have increased left and right margin tyspacing(md) to tyspacing(lg).

$tycolor-border

mix($tycolor-fg,$tycolor-bg,12%) !default;

Color of the decorative rule on pullquotes using the pullquote-roof-fixed or pullquote-roof-full class.

$tyfont-size

(sm:-1, h6:0, h5:1, h4:2, h3:3, h2:4, h1:6, quote:2, lede:2) !default;

A SASS map of values indicating the scale step for each of the font size variables; the quote size is used for pull quotes.

$tyspacing

(sm:1, md:2, lg:3, indent:3) !default;

SASS map of values indicating the number of grid units for each spacing variable value; the medium value is used for the left and right margins for <blockquote>, increasing to the large value at the $tybreak-quote breakpoint.

Examples

Block Quote

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla interdum erat sit amet lectus mattis, eu facilisis lorem finibus. Cras odio mauris, varius nec tempor nec, elementum eget augue.</p>
<blockquote>
	“A regular block quote magna ut lorem cursus, sed molestie turpis dictum. Maecenas at imperdiet justo, sit amet vulputate ligula. Aliquam erat volutpat. Sed non dignissim neque, non varius arcu.”
</blockquote>

Pull Quote

<p>Quisque finibus, nisl et luctus congue, velit lectus commodo sem, sit amet sodales dui ex eget dolor. Nunc ac diam diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc ullamcorper, est sed rutrum vulputate, augue erat euismod nibh, id bibendum neque lorem at nulla.</p>
<blockquote class="pullquote">
	“A block quote as pull quote donec nulla sem, porta nec dolor a, facilisis gravida nibh. Mauris vel dolor metus. Integer ut pharetra lacus.”
</blockquote>

Pull Quote, Fixed-Width Roof

<p>Phasellus id imperdiet sapien, mollis facilisis dui. Aliquam sed euismod nibh. Maecenas quis nisi sed nisl luctus vehicula. Aliquam vitae lacinia sem. Vestibulum erat leo, interdum sed purus eu, tincidunt sagittis ex. Cras ut bibendum purus. Proin non bibendum orci. Pellentesque porta ut risus eget aliquam. Vestibulum lectus libero, condimentum a mauris et, luctus gravida neque.</p>
<blockquote class="pullquote pullquote-roof-fixed">
	<p>Quis natus excepturi consectetur necessitatibus. Pariatur culpa rerum saepe aperiam molestiae. Optio aut recusandae amet aperiam.</p>
</blockquote>

Pull Quote, Full-Width Roof

<p>Phasellus id imperdiet sapien, mollis facilisis dui. Aliquam sed euismod nibh. Maecenas quis nisi sed nisl luctus vehicula. Aliquam vitae lacinia sem. Vestibulum erat leo, interdum sed purus eu, tincidunt sagittis ex. Cras ut bibendum purus. Proin non bibendum orci. Pellentesque porta ut risus eget aliquam. Vestibulum lectus libero, condimentum a mauris et, luctus gravida neque.</p>
<blockquote class="pullquote pullquote-roof-full">
	<p>Quis natus excepturi consectetur necessitatibus. Pariatur culpa rerum saepe aperiam molestiae. Optio aut recusandae amet aperiam.</p>
</blockquote>

Pull Quote, Floated

<blockquote class="pullquote float-right pullquote-roof-full">
	<p>“Et voluptatem sed sit alias sunt. Qui qui dolores ipsa aliquid est dolor. Labore totam sit repellendus illo quod. Mollitia id voluptatem rerum. Soluta asperiores dolores ullam deleniti provident.”</p>
	<cite>– Aaron Pinero, designer</cite>
</blockquote>
<p>Etiam fermentum efficitur nisl, eu tempor eros lobortis et. Sed dapibus nisi eget euismod tincidunt. Aenean mattis imperdiet ex, gravida rutrum quam. Praesent condimentum, augue nec elementum ultricies, arcu magna convallis dui, id accumsan ex diam in tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur non metus et enim iaculis imperdiet.</p>
<p>Phasellus a metus nisl. Pellentesque condimentum lorem eu magna faucibus, ut volutpat felis pellentesque. Nulla a consectetur nisi. Sed eu nulla bibendum, tincidunt eros a, sodales sapien. Cras scelerisque vehicula massa, euismod hendrerit nunc suscipit in. Ut in tortor vitae ligula eleifend tristique ac vel ex.</p>