← All elements
<blockquote class="pq"><p>Good CSS is the art of saying less and meaning more.</p><cite>Design handbook</cite></blockquote>About this card
A bold pull quote with a thick accent bar on the left and a small attribution beneath.
How it works
A tall gradient bar is a pseudo-element on the left, and the large serif text uses a heavy weight with a tight line height. The citation is small uppercase sans-serif for contrast.
Ways to customise it
- Change the gradient bar colours.
- Use a different serif family.
- Increase the text size for a hero quote.
Good to know
A blockquote with a cite element is the right markup. Keep the font stack to system fonts if you want to avoid downloads.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.