Quotes

Documentation and examples of pull quotes.

Typography

We use Montserrat, our complimentary font. For typography styling utilities and more information visit the typography section.

Design

Using pre-defined CSS styling via classes, various pull quote styles can be applied to the <blockquote> elements as shown below.

Blockquote

<blockquote class=”blockquote”>This is an example of a block quote</blockquote>

Large Blockquote

<blockquote class=”blockquote-large”>This is an example of a large block quote</blockquote>

Large Blockquote with Background

<blockquote class=”blockquote-large textWhite”>This is an example of a large block quote</blockquote>

Positioning

CSS classes that are used to position block quotes

Default

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
</p>
<blockquote class=”blockquote”>
This is an example of a block quote
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
</p>

Center

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
</p>
<blockquote class=”blockquote blockquote-center”>
This is an example of a block quote
</blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
</p>