Create Unique Block Quotes to Showcase Inline Content

You work hard on your website's copy. Everything has been keyword optimized, grammatically checked, and meticulously planned to appeal to your website's target market. You've probably even included several powerful quotes from executive leadership or eye-catching facts regarding how important your services or products are. One way to pull a reader's attention to those types of quotes is by using block quotes. Block quotes emphasize excerpts of particular text, and it's a great way to grab a reader's attention when all they want to do is scan your copy. 

All it takes to get these block quotes are just a little CSS and JavaScript, and your website will have a new way to draw a visitor's attention to the parts that are most important to your website. 

HTML

The HTML here uses only the Blockquote element, provided by most WYSIWYG editors, and bootstrap around it for a global style.

CSS

Some general styles for the Blockquote and its before pseduo-element. This allows you to only have to use the blockquote HTML tag and the CSS will add the padding, margins, and quote image for you!

Want to see how this tutorial could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Make sure to click on each element to see how the expand/collapse functionality looks.