blockquote quote centered editorial typography line-accent blog article pull quote editorial content blockquote testimonial highlight standard left-border blockquotes feel generic quotation mark icons look dated need clean editorial quote styling
Blockquote Centered
Fetch snippet JSON:
curl https://webspire.de/snippets/text/blockquote-centered.json Preview
Background
Customize
Quick Start
<blockquote class="blockquote-centered"><p>Quote text here.</p></blockquote>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 692 bytes · 36 lines
- Custom Properties
-
--bq-accent--bq-accent-width--bq-bg - Classes
-
.blockquote-centered
blockquote quote centered editorial typography line-accent
A centered blockquote with two thin horizontal lines (::before and ::after) as accents instead of quotation marks or left borders. Uses the heading font for emphasis. Background uses subtle tinting for visual separation.
Article blockquote
<blockquote class="blockquote-centered">
<p class="text-xl font-semibold">Good design is as little design as possible.</p>
<cite class="mt-3 block text-sm font-normal text-slate-500">— Dieter Rams</cite>
</blockquote>Custom accent
<blockquote class="blockquote-centered" style="--bq-accent: oklch(0.6 0.2 250); --bq-accent-width: 48px">
<p class="text-lg">Simplicity is the ultimate sophistication.</p>
</blockquote>