7 Pure CSS1 with JSPublished 2026-10-04Free · no sign-up
Eight quote styles: an editorial pull quote, a documentation quote with a left border, a testimonial card, a gradient quote with a highlighted phrase, a large centred quote, a social post quote, a floated sidebar pull quote and a quote strip with Previous and Next buttons.
An editorial pull quote with a large decorative quotation mark, the quote in a serif face and the attribution in a figcaption. Using figure, blockquote and figcaption keeps the quote and its source correctly associated.
View code
<figure class="bq1">
<blockquote><p>Good design is as little design as possible, but never less than the problem needs.</p></blockquote>
<figcaption>Dana Kim, <cite>Notes from the Studio</cite></figcaption>
</figure>
The plain documentation-style quote: a thick coloured border on the left, a little indent and a slightly brighter text colour. It suits long-form articles where quotes should stand out without breaking the reading flow.
View code
<blockquote class="bq2"><p>Ship small changes often. Big releases hide small mistakes.</p><footer>Team handbook, section 4</footer></blockquote>
A testimonial card with the quote, a person's avatar, name and role, and an optional star line. Use only real quotes from real customers with their permission; this demo uses obviously placeholder names you should replace.
View code
<figure class="bq3">
<blockquote><p>"Setting up the shop took one afternoon. The order emails alone save me an hour a week."</p></blockquote>
<figcaption><span class="av" aria-hidden="true">JD</span><span><b>Jane Doe</b><small>Owner, Example Bakery</small></span></figcaption>
</figure>
A bold quote block on a gradient background for landing pages, with the key phrase highlighted using a marker-style background on a mark element. The highlight is real semantics, so it is meaningful beyond its looks.
View code
<figure class="bq4">
<blockquote><p>We cut our checkout time in half and <mark>doubled repeat orders</mark> in the first season.</p></blockquote>
<figcaption>Owner of a placeholder shop, replace with a real quote</figcaption>
</figure>
A centred quote with very large type for a section break, flanked by thin decorative rules and a small attribution beneath. clamp() scales the quote with the screen width so it stays big on desktop and readable on phones.
View code
<figure class="bq5">
<blockquote><p>Make it simple. Make it work. Then make it beautiful.</p></blockquote>
<figcaption>Studio motto</figcaption>
</figure>
A quote styled like a social media post, with an avatar, display name, handle and date. It is an article with a time element for the date, and it avoids copying any platform's logo or exact interface.
View code
<article class="bq6">
<header><span class="av" aria-hidden="true">RS</span><div><b>Rae Santos</b><small>@raemakes</small></div></header>
<p>Finally moved my shop off spreadsheets. Inventory just updates itself now and I have my evenings back.</p>
<time datetime="2026-09-21">21 Sep 2026</time>
</article>
A pull quote floated beside article text, repeating a line from the article for emphasis, as magazines do. Because it duplicates text that is already in the article, it is marked aria-hidden so screen readers do not read it twice.
View code
<article class="art">
<aside class="pq" aria-hidden="true">"Every piece leaves the studio wrapped by hand."</aside>
<p>We started with one kiln and a market stall. Today the studio ships across the country, but the process has not changed. Every piece leaves the studio wrapped by hand, in recycled paper, with a note from whoever made it.</p>
</article>
A small strip that cycles through three short quotes, with Previous and Next buttons so people control the pace instead of an automatic timer. The quote region is a polite live region, so each change is announced once.