Skip to main content
British Red Cross homepage

Quote

The Quote component is used to highlight a section of text that is a quotation from a person or a source. It is styled to stand out from the surrounding content, making it clear that the text is a quote.

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Example

The quote consists of the following elements:

  1. Quotation mark (in-built)
  2. Quoted text (required)
  3. Attribution (optional, but strongly encouraged)
Figma component
Storybook component

Designer Guidance

When to use

A quote highlights a short piece of text from a person or source, separate from the main body content. It draws attention to key statements or testimonials.

  • Use the quote component to feature a notable statement or testimonial.
  • It can repeat a quote from the body text or stand alone.

When not to use

Avoid using a quote in the following situations:

  • For regular text, use standard paragraph text instead.
  • Avoid overusing quotes on a single page; too many reduce impact and clutter the layout.

How to use

When using a quote, make sure to:

  • Include attribution where possible. 
  • Ensure the quote is accurate and formatted correctly.
  • Do not add extra punctuation or styling inside the quote field.

Behaviours


  • Displays in a single column by default.
  • Can adapt to multi-column layouts within responsive containers.
  • Scales appropriately on all screen sizes.

Developer Guidance

Best practices

  • Use semantic HTML:
    • Wrap quoted text <blockquote>
    • Use <cite> for attribution.
  • Ensure responsive design for different screen sizes.
  • No interactive elements, focus on correct markup and styling.
  • Support user-defined text resizing and spacing.

Content Editor Guidance

Best practices

  • Keep quotes concise and impactful.
  • Include attribution for credibility.
  • Ensure attribution includes name and role (and organisation if relevant).
  • Do not add decorative punctuation or quotation marks, they are built into the component.

For more detailed guidance for using this component visit the content example site.

Accessibility

Ensure the Quote component uses semantic HTML elements to improve accessibility and SEO. Provide clear context for the quote, especially if the author is not included within the quote component. Use aria-label or aria-describedby to give additional context if necessary.

WCAG success criteria

Support

If any accessibility issues have been found or for general questions about this component, please contact the digital team.

Send us a message