Blockquote

Formatted block for quoted text.

html

<blockquote class="quote quote--classic" style="--accent:#E8A020;border-radius:8px;">
  <svg class="quote__mark" viewBox="0 0 32 24" width="28" height="21" aria-hidden="true"><path d="M0 24V14.5C0 6.5 5 1 13 0l1.5 4C9 5.5 6 9 6 14h7v10H0zm18 0V14.5C18 6.5 23 1 31 0l1.5 4C27 5.5 24 9 24 14h7v10H18z" fill="currentColor"/></svg>
  <p class="quote__text">Design is not just what it looks like and feels like. Design is how it works.</p>
  <footer class="quote__cite">&#8212; Steve Jobs</footer>
</blockquote>
<style>
.quote { font: 17px/1.6 Georgia, "Times New Roman", serif; color: #241430; background: #FAF7F2; max-width: 420px; padding: 20px 24px; margin: 0; }
.quote__mark { color: var(--accent); display: block; margin-bottom: 8px; }
.quote__text { margin: 0 0 10px; }
.quote__cite { font: 500 14px/1.4 system-ui, sans-serif; color: #24143099; }
.quote--classic { border-left: 4px solid var(--accent); }
.quote--boxed { border: 1.5px solid var(--accent); box-shadow: 0 8px 24px rgba(36,20,48,.12); }
.quote--minimal { padding-left: 0; }
.quote--minimal .quote__mark { display: none; }
</style>

tailwind

<blockquote style="--accent:#E8A020;border-radius:8px;" class="quote-tw quote-tw--classic font-serif text-[17px] leading-relaxed text-[#241430] bg-[#FAF7F2] max-w-[420px] px-6 py-5 m-0">
  <svg class="quote-tw__mark block mb-2" style="color:#E8A020" viewBox="0 0 32 24" width="28" height="21" aria-hidden="true"><path d="M0 24V14.5C0 6.5 5 1 13 0l1.5 4C9 5.5 6 9 6 14h7v10H0zm18 0V14.5C18 6.5 23 1 31 0l1.5 4C27 5.5 24 9 24 14h7v10H18z" fill="currentColor"/></svg>
  <p class="m-0 mb-2.5">Design is not just what it looks like and feels like. Design is how it works.</p>
  <footer class="font-sans text-sm text-[#24143099]">&#8212; Steve Jobs</footer>
</blockquote>
<style>
.quote-tw--classic { border-left: 4px solid var(--accent); }
.quote-tw--boxed { border: 1.5px solid var(--accent); box-shadow: 0 8px 24px rgba(36,20,48,.12); }
.quote-tw--minimal { padding-left: 0; }
.quote-tw--minimal .quote-tw__mark { display: none; }
</style>

react

export function Blockquote({
  quote = "Design is not just what it looks like and feels like. Design is how it works.",
  citation = "Steve Jobs",
  style = "classic",
  accent = "#E8A020",
  radius = 8,
}) {
  const wrap = {
    classic: { borderLeft: `4px solid ${accent}` },
    boxed: { border: `1.5px solid ${accent}`, boxShadow: "0 8px 24px rgba(36,20,48,.12)" },
    minimal: { paddingLeft: 0 },
  }[style] ?? {};
  return (
    <blockquote style={{ font: "17px/1.6 Georgia, 'Times New Roman', serif", color: "#241430", background: "#FAF7F2",
      maxWidth: 420, padding: "20px 24px", margin: 0, borderRadius: radius, ...wrap }}>
      {style !== "minimal" && (
        <svg style={{ color: accent, display: "block", marginBottom: 8 }} viewBox="0 0 32 24" width="28" height="21" aria-hidden="true">
          <path d="M0 24V14.5C0 6.5 5 1 13 0l1.5 4C9 5.5 6 9 6 14h7v10H0zm18 0V14.5C18 6.5 23 1 31 0l1.5 4C27 5.5 24 9 24 14h7v10H18z" fill="currentColor" />
        </svg>
      )}
      <p style={{ margin: "0 0 10px" }}>{quote}</p>
      <footer style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#24143099" }}>&#8212; {citation}</footer>
    </blockquote>
  );
}