Skip to content

Quote

Full width version of a blockquote, with optional image.

Table of Contents

  1. Anatomy
  2. Usage Guidelines
  3. WordPress
  4. Specifications
    1. Properties
  5. Changelog
  6. Examples

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 markup Yes-
attributionstring quote attribution No-
imageinteger WordPress image ID No-
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>