25 CSS Blockquotes04 / 25

CSS onlyMIT licensed

Responsive CSS Center-Aligned Quote Banner

The full-width statement banner that anchors landing pages and section breaks: a quote centered on both axes with grid place-content, sized by clamp() so it is fluid between 28px and 56px without a single media query, and balanced with text-wrap: balance so no lonely word ever wraps alone. Flanking hairline rules are drawn by the grid itself (two 1px column tracks), and a subtle radial spotlight lifts the center of the banner — the whole composition is 100% CSS layout primitives, no absolute positioning anywhere.

Published

Live Demo
Try it

The code

<section class="bq-04" aria-label="Center aligned quote banner demo">
  <div class="bq-04__stage">
    <figure class="bq-04__banner">
      <p class="bq-04__kicker">From the keynote</p>
      <blockquote>
        <p>Make the easy path and the right path the same path.</p>
      </blockquote>
      <figcaption class="bq-04__by">
        <span class="bq-04__line" aria-hidden="true"></span>
        <span><strong>Amara Chen</strong> — Head of Platform, Fieldday</span>
        <span class="bq-04__line" aria-hidden="true"></span>
      </figcaption>
    </figure>
    <p class="bq-04__chip" aria-hidden="true">place-content:center · clamp() · text-wrap:balance</p>
  </div>
</section>
.bq-04,
.bq-04 *,
.bq-04 *::before,
.bq-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-04 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.17 0.02 285);
  --ink: oklch(0.96 0.01 280);
  --mut: oklch(0.68 0.03 285);
  --acc: oklch(0.78 0.12 330);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-04__stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 30px;
  padding: clamp(20px,5vw,56px);
  text-align: center;
  background: radial-gradient(60% 45% at 50% 42%,oklch(0.28 0.06 320/.55),transparent 70%),var(--bg);
  overflow-y: auto;
}

.bq-04__banner {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 900px;
}

.bq-04__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acc);
}

.bq-04__banner blockquote p {
  font-size: clamp(28px,2.2vw + 16px,56px);
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 22ch;
}

.bq-04__by {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(100%,560px);
  font-size: 14px;
  color: var(--mut);
}

.bq-04__by strong {
  color: var(--ink);
  font-weight: 650;
}

.bq-04__line {
  height: 1px;
  background: color-mix(in oklch,var(--ink) 22%,transparent);
}

.bq-04__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid color-mix(in oklch,var(--ink) 16%,transparent);
  border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
  .bq-04 * {
    transition-duration: .01ms !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Blockquote from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Responsive CSS Center-Aligned Quote Banner
Source: https://codefronts.com/snippets/css-blockquotes/responsive-css-center-aligned-quote-banner/

The full-width statement banner that anchors landing pages and section breaks: a quote centered on both axes with grid place-content, sized by clamp() so it is fluid between 28px and 56px without a single media query, and balanced with text-wrap: balance so no lonely word ever wraps alone. Flanking hairline rules are drawn by the grid itself (two 1px column tracks), and a subtle radial spotlight lifts the center of the banner — the whole composition is 100% CSS layout primitives, no absolute positioning anywhere.
## HTML
```html
<section class="bq-04" aria-label="Center aligned quote banner demo">
  <div class="bq-04__stage">
    <figure class="bq-04__banner">
      <p class="bq-04__kicker">From the keynote</p>
      <blockquote>
        <p>Make the easy path and the right path the same path.</p>
      </blockquote>
      <figcaption class="bq-04__by">
        <span class="bq-04__line" aria-hidden="true"></span>
        <span><strong>Amara Chen</strong> — Head of Platform, Fieldday</span>
        <span class="bq-04__line" aria-hidden="true"></span>
      </figcaption>
    </figure>
    <p class="bq-04__chip" aria-hidden="true">place-content:center · clamp() · text-wrap:balance</p>
  </div>
</section>
```
## CSS
```css
.bq-04,
.bq-04 *,
.bq-04 *::before,
.bq-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bq-04 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  --bg: oklch(0.17 0.02 285);
  --ink: oklch(0.96 0.01 280);
  --mut: oklch(0.68 0.03 285);
  --acc: oklch(0.78 0.12 330);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: var(--ink);
}

.bq-04__stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 30px;
  padding: clamp(20px,5vw,56px);
  text-align: center;
  background: radial-gradient(60% 45% at 50% 42%,oklch(0.28 0.06 320/.55),transparent 70%),var(--bg);
  overflow-y: auto;
}

.bq-04__banner {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 900px;
}

.bq-04__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acc);
}

.bq-04__banner blockquote p {
  font-size: clamp(28px,2.2vw + 16px,56px);
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -.025em;
  text-wrap: balance;
  max-width: 22ch;
}

.bq-04__by {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  width: min(100%,560px);
  font-size: 14px;
  color: var(--mut);
}

.bq-04__by strong {
  color: var(--ink);
  font-weight: 650;
}

.bq-04__line {
  height: 1px;
  background: color-mix(in oklch,var(--ink) 22%,transparent);
}

.bq-04__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--mut);
  padding: 7px 13px;
  border: 1px solid color-mix(in oklch,var(--ink) 16%,transparent);
  border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
  .bq-04 * {
    transition-duration: .01ms !important;
  }
}
```

How this works

Three modern declarations do all the work that used to take media queries and positioning hacks:

.banner{ display:grid; place-content:center;   /* both axes */
  min-height:100svh; text-align:center; }

.banner p{
  font-size:clamp(28px, 2.2vw + 16px, 56px);   /* fluid, capped */
  text-wrap:balance;                            /* even rag */
  max-width:22ch; }

Read the clamp() as a sentence: never smaller than 28px, never larger than 56px, and in between grow at 2.2% of the viewport width plus a 16px base. The additive base matters — a pure vw value hits its floor abruptly and zooms badly; mixing a px term keeps browser zoom working (accessibility auditors check this).

text-wrap:balance is the 2024-era upgrade searchers haven't met yet: the browser redistributes line breaks so all lines are near-equal length — the difference between a quote that looks typeset and one that ends on a single dangling word. It's allowed on the quote because the block is short (balance is capped around 6 lines by design). The attribution row uses grid columns 1fr auto 1fr where the outer tracks are the hairlines themselves — background:currentColor; height:1px; align-self:center — so the rules always exactly fill the leftover space at any width.

Make it yours

  • Photo backdrop: layer linear-gradient(oklch(0.15 0.02 260/.72), …), url(hero.jpg) center/cover under the same grid — the centering logic is independent of the backdrop.
  • Narrower measure: max-width:22ch is tuned for display sizes; for longer quotes use 30ch and drop the clamp ceiling to 40px so the block stays banner-like, not article-like.
  • Kicker on top: the small-caps 'FROM THE KEYNOTE' line is optional — delete it, or repoint it at your section label; the grid rows just close up.
  • Section, not screen: swap min-height:100svh for padding-block:clamp(64px,12vw,140px) to use the same banner as an in-page section divider.

Gotchas — read before shipping

  • place-content centers the grid's content box, but only if the container has height — min-height:100svh (not height on a child) is what makes vertical centering real.
  • clamp() with a pure vw middle term breaks page zoom (text can't grow); always add a px or rem term to the preferred value.
  • text-wrap:balance silently does nothing past ~6 lines and costs layout time on long text — it's for headlines and quotes, not paragraphs (use text-wrap:pretty there).
  • max-width in ch units is measured in the element's OWN font — if you set it on a wrapper with a smaller font, your 22ch is not the 22ch you think it is.

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by text-wrap:balance; without it everything still renders — the rag is just uneven. clamp(), place-content and svh are years older. oklch cosmetics as usual.

Techniques used in this demo

text-wrap: prettyMDN ↗color-mix()MDN ↗radial-gradient()MDN ↗grid-templateMDN ↗clamp()MDN ↗place-items / place-contentMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →