8 results

Preview
Brutal Quote
Thick rules and uppercase
Preview
Chic Quote
Serif type and a thin rule
Preview
Dense Quote
Tight gaps and mono type
Preview
Editorial Quote
Measure against a heading
Preview
Mark Pull
A pull that enlarges a marked phrase
Preview
Modern Quote
Red on a short white plane
Preview
Pull Quote
A large quote that splits the page
Preview
Soft Quote
Large radii and a pale plane

Soft Quote

Large radii and a pale plane

Preview

PalettePetal

HTML

<blockquote>
  <p>Measure, then stop.</p>
  <footer>Archive</footer>
</blockquote>

CSS

:root {
  --ink: #3d2a32;
  --paper: #fff7f8;
  --accent: #c45c7a;
  --accent-2: #7a8fbf;
  --on-accent: #ffffff;
  --muted: #8a6f78;
  --line: #f0d4dc;
  --chip: #ffe8ee;
}

blockquote {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-family: system-ui, sans-serif;
}

p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0;
}

footer {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}

Tailwind

<style>
:root {
  --ink: #3d2a32;
  --paper: #fff7f8;
  --accent: #c45c7a;
  --accent-2: #7a8fbf;
  --on-accent: #ffffff;
  --muted: #8a6f78;
  --line: #f0d4dc;
  --chip: #ffe8ee;
}
</style>
<blockquote class="m-0 pl-[0.9rem] [border-left:3px_solid_var(--accent)] text-[var(--ink)] font-[system-ui,_sans-serif]">
  <p class="m-0 text-[1.15rem] font-semibold tracking-[0]">Measure, then stop.</p>
  <footer class="mt-[0.4rem] text-[var(--muted)] text-[0.8rem]">Archive</footer>
</blockquote>