Adding visually engaging elements to content

Emphasizing points with block and pull-quotes

Vera Yang
Vera Yang

Blockquotes

Use <blockquote> for quoting blocks of content from another source within your document.

Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.

Mikkel Svane in Startupland
<blockquote class="font-size-lg">
  <p>
    Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.
  </p>
  <footer class="text-gray-500">
    Mikkel Svane in <cite title="Source Title">Startupland</cite>
  </footer>
</blockquote>

Pull-quotes

You can also emphasize parts of your content using utilities or your own custom elements. The following paragraphs help prove this point by providing a body of text in which a pull-quote can be placed.

“Your most unhappy customers are your greatest source of learning.”

You’ll notice that the quote itself is made larger and bolder using typography utilities. Space is added around the element and, on large screens, shifted left using margin utilities.

There’s really no limit to what you can do with our utilities. Of course you could create a right-aligned version that looked much the same, or create your own unique versions.

Draw inspiration from what you see online, get excited and get creating!

Was this article helpful?

Comments

0 comments

Please sign in to leave a comment.