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

Modern Quote

Red on a short white plane

Preview

PaletteSwiss

HTML

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

CSS

:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

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: 650;
  letter-spacing: 0;
}

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

Tailwind

<style>
:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}
</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-[650] tracking-[0]">Measure, then stop.</p>
  <footer class="mt-[0.4rem] text-[var(--muted)] text-[0.8rem]">Archive</footer>
</blockquote>