Skip to content

Quote

Full width version of a blockquote, with optional image.

Anatomy

  1. Image
  2. Content
  3. Attribution

Usage Guidelines

This component allows a standard blockquote element to have a related image and attribution.

WordPress

This component can be added to post content with the Wide Quote block in the Gutenberg editor.

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
contentstring Inner HTML markupYes-
attributionstring quote attributionNo-
imageinteger WordPress image IDNo-
classstring list of additional classes to apply to main element.No-

Changelog

6.14.0 (2024-07-31)

5.1.0 (2023-07-03)

  • fix: swap default heading level class based on feature flag (22abfaa)

1.36.0 (2022-07-21)

  • fix: changing the order of the quote content in mobile view (#288) (36d8dd1)

1.35.0 (2022-06-30)

  • fix: make sure image sizes correctly when space is limited (4935cc6)

1.22.0 (2021-07-02)

  • fix: add correct spacing on all breakpoints (#122) (1323365)

1.19.0 (2021-04-26)

1.3.0 (2020-05-08)

  • fix: add blockquote element (55ee018)

1.0.0

  • quote added

Examples

Default

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

– Consectetur Purus Cursus
<x-quote attribution="Consectetur Purus Cursus">
	<x-slot name="content">
		Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
	</x-slot>
</x-quote>

Image

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

– Consectetur Purus Cursus
<x-quote attribution="Consectetur Purus Cursus" image="user-placeholder.svg">
	<x-slot name="content">
		Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.
	</x-slot>
</x-quote>