Block quotes give your website's most important content a way to stand out in the eyes of skimming readers.
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.
The HTML here uses only the Blockquote element, provided by most WYSIWYG editors, and bootstrap around it for a global style.
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.