Blockquote
Quotes with author citation and an optional quote icon.
Topics: Accessibility · Content
Highlights
Semantic blockquote and cite
Inline or stacked quote icon
Full typography and color control
Accessibility
Uses blockquote and figcaption, the quote icon is decorative.
Privacy
No external requests.
Live demo
See it in action
Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.
Variant 1
Large quote with icon above
A semantic blockquote with the author as a caption. The quote icon is decorative and hidden from screen readers.
Accessibility is not a feature you add at the end. It is the way you build from the first element.Mirko Schubert, developer of Breakdance Extended
Variant 2
Inline icon, centered
The icon sits inline with the text, everything is centered. Typography comes from the global presets of this site.
If a website needs a cookie banner for its map, the map is the problem.Sample quote for this demo
Variant 3
Pull quote with a side border
No icon, a colored border on the start side and a subtle background. Useful inside long articles.
Less JavaScript on the page means fewer things that can break for someone using a screen reader.Sample pull quote