← All elements
<figure class="tq"><div class="st">★★★★★</div><blockquote>Switched in an afternoon and never looked back.</blockquote><figcaption><i></i><span><b>Maya Reyes</b>Product designer</span></figcaption></figure>About this card
A review card with an oversized quote mark, star row and author line, styled with gradients only.
How it works
A large serif quotation mark is a pseudo-element placed in the top-right corner in a pale tint, behind the text. The stars are plain characters with letter-spacing, and the avatar is a gradient circle, so the card needs no images.
Ways to customise it
- Change the tint #ede9fe to match your palette.
- Replace the avatar with a real photo.
- Swap the stars for a score.
Good to know
Use a blockquote with a figcaption as here so the quote and its author stay associated. Keep star ratings accompanied by a text value for screen readers.
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.