Pull Quote — Free HTML CSS JS Blockquote Snippet

<article class="pq-article">
  <p class="pq-para">Good design is invisible. When an interface works, the people using it never notice the hundreds of decisions that went into it — they simply get what they came for and move on with their day.</p>

  <figure class="pq-quote">
    <svg class="pq-mark" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11H6a1 1 0 0 1-1-1V7a3 3 0 0 1 3-3h1a1 1 0 0 1 0 2H8a1 1 0 0 0-1 1v1h3a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3 1 1 0 0 1 0-2 1 1 0 0 0 1-1zm9 0h-4a1 1 0 0 1-1-1V7a3 3 0 0 1 3-3h1a1 1 0 0 1 0 2h-1a1 1 0 0 0-1 1v1h3a1 1 0 0 1 1 1v3a3 3 0 0 1-3 3 1 1 0 0 1 0-2 1 1 0 0 0 1-1z"/></svg>
    <blockquote class="pq-text" id="pqText">The best interface is the one you never have to think about.</blockquote>
    <figcaption class="pq-cite">
      <span class="pq-avatar">JR</span>
      <span class="pq-byline"><strong>Jordan Rivera</strong><span>Principal Designer, Northwind</span></span>
    </figcaption>
    <button class="pq-copy" id="pqCopy" type="button" aria-label="Copy quote">
      <svg class="pq-ico-copy" viewBox="0 0 24 24" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
      <svg class="pq-ico-check" viewBox="0 0 24 24" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
      <span class="pq-copy-label">Copy</span>
    </button>
  </figure>

  <p class="pq-para">That invisibility is hard-won. It comes from removing everything that does not earn its place, then testing what remains against real people doing real tasks under real pressure.</p>
</article>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, 'Times New Roman', serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }

.pq-article { max-width: 620px; }
.pq-para { font-size: 17px; line-height: 1.75; color: #475569; margin: 0 0 22px; }

.pq-quote {
  position: relative;
  margin: 34px 0;
  padding: 28px 30px 26px 34px;
  background: #fff;
  border-left: 4px solid #6366f1;
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08);
}

.pq-mark {
  position: absolute;
  top: -14px; left: 22px;
  width: 36px; height: 36px;
  padding: 7px;
  fill: #fff;
  background: #6366f1;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.pq-text {
  font-size: 25px;
  line-height: 1.42;
  font-weight: 600;
  font-style: italic;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.pq-cite { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.pq-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700;
  border-radius: 50%;
}
.pq-byline { display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
.pq-byline strong { font-size: 14px; font-weight: 700; color: #1e293b; font-style: normal; }
.pq-byline span { font-size: 12.5px; color: #94a3b8; }

.pq-copy {
  position: absolute;
  top: 16px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: system-ui, sans-serif; font-size: 12px; font-weight: 600;
  color: #64748b; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pq-copy:hover { background: #e2e8f0; color: #475569; }
.pq-copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pq-ico-check { display: none; }

.pq-copy.copied { background: #ecfdf5; border-color: #a7f3d0; color: #059669; }
.pq-copy.copied .pq-ico-copy { display: none; }
.pq-copy.copied .pq-ico-check { display: block; }

@media (max-width: 520px) {
  .pq-text { font-size: 21px; }
  .pq-copy-label { display: none; }
  .pq-copy { padding: 7px; }
}

const quote = document.getElementById('pqText');
const copyBtn = document.getElementById('pqCopy');
const label = copyBtn.querySelector('.pq-copy-label');
let resetTimer = null;

copyBtn.addEventListener('click', async () => {
  const text = quote.textContent.trim();
  try {
    await navigator.clipboard.writeText('"' + text + '" — Jordan Rivera');
  } catch (e) {
    // Fallback for non-secure contexts / older browsers
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.position = 'fixed';
    ta.style.opacity = '0';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  }

  copyBtn.classList.add('copied');
  if (label) label.textContent = 'Copied';

  clearTimeout(resetTimer);
  resetTimer = setTimeout(() => {
    copyBtn.classList.remove('copied');
    if (label) label.textContent = 'Copy';
  }, 1800);
});