Skip to content
Breakdance Extended
← All modules
Stable
Element Since v0.5.0

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