Skip to Content

Create Unique Block Quotes to Showcase Inline Content

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. 

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. 


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.

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev
Solodev Logo

©2024 Solodev. All rights reserved worldwide.