Pull Quote — Free HTML CSS JS Blockquote Snippet

The pull quote is a publishing staple: a sentence lifted out of the body copy, enlarged and set apart so a skimming reader catches the single idea that matters most. Newspapers, long-form articles, case studies, and marketing pages all use it to break up dense text and give the eye a place to rest. This component implements the pattern the way modern editorial sites do — a card with a coloured accent rule, a floating quotation-mark badge, the quote in a large italic serif, an author byline with an avatar, and a copy-to-clipboard button so readers can share the line in one click. It is built entirely in semantic HTML, CSS, and a few lines of vanilla JavaScript with no dependencies.

Semantic HTML structure

The markup uses the correct elements for the job, which matters for both accessibility and SEO. The quote lives inside a <figure> element, the quote text itself is a <blockquote>, and the attribution sits in a <figcaption> — the same structure the HTML spec recommends for quotations with a visible source. Screen readers announce the figure as a self-contained unit, and search engines can associate the citation with the quoted text. The surrounding body paragraphs use plain <p> tags so the pull quote reads as a genuine interruption of the article flow rather than a detached widget.

The floating quotation-mark badge

The decorative quote mark is an inline <svg> positioned with position: absolute and pulled up out of the card with a negative top: -14px. It sits inside a circular indigo badge with a soft drop shadow, half-overlapping the top edge of the card. This overlap trick — an element straddling a container border — is a common editorial flourish that adds depth without an image. Because the mark is SVG, it stays razor-sharp at any zoom level and inherits the accent colour, so re-theming the component is a one-line change.

Typography and the accent rule

The quote text uses a large italic serif at 25px with tightened letter-spacing and a line-height of 1.42 — values chosen so two or three lines of text feel like a deliberate, composed statement rather than running prose. A 4px indigo border-left runs down the card with an asymmetric border-radius (square on the accent side, rounded on the other) so the rule reads as a margin marker, the way a highlighter or editor's pen would mark an important passage. The body paragraphs deliberately use a muted slate colour while the quote is near-black, creating the contrast that makes the eye jump to the quote first.

Copy-to-clipboard with a robust fallback

Clicking the Copy button writes the quote plus its attribution to the clipboard using the asynchronous navigator.clipboard.writeText() API. Because that API only works in secure contexts (HTTPS or localhost), the handler wraps it in a try/catch and falls back to the legacy approach: it creates a hidden <textarea>, selects its contents, and calls document.execCommand('copy') before removing the element. This two-tier strategy means the button works in modern browsers, older browsers, and insecure preview iframes alike.

Confirmation feedback and state reset

On a successful copy the button gains a .copied class that swaps the clipboard icon for a green checkmark and changes the label to "Copied" — using a pure-CSS icon swap (display: none toggled by the class) rather than rebuilding DOM. A setTimeout reverts the button to its idle state after 1.8 seconds, and the timer is cleared on every click with clearTimeout so rapid repeated clicks never leave the button stuck in a half-reset state. To customise the component, edit the quote text, the byline name and role, the avatar initials, and swap the #6366f1 accent for your brand colour — the badge, rule, and avatar gradient all reference it.