Skip to content
Amplify from Studio 24
  • Get started
  • Fundamentals
  • Layout helpers
  • Core components
  • Advanced components
  • Typography test
  • Colours
  • Typography
  • Buttons and links
  • Lists
  • Icons
  • Breakpoints
  • Vertical spacing
  • Hide and show items inclusively
  • Skip link
  • Images
  • Forms
  • Form error messages
  • Tables
  • Blockquotes
  • Details and summary
  • Utility classes
  • Flow elements
  • Print styles

Blockquotes

As part of our component approach to web page content, we tend to use the quote component for handling quotes. However, there may be clients with legacy content who make use of blockquotes without using the quote component. So here's how that would look using Amplify.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.

Said no one, ever.

Considerations

The W3C specification says that a reference to a creative work, as included within a cite element, may include the name of the work’s author. However, the WHATWG specification for cite says the opposite: that a person’s name must never be included, under any circumstances. So, for safety, we use a footer to hold the quote reference.

To include a reference to the source of quoted material which is contained within a blockquote or q element, use the cite attribute on the element to provide a URL.

© Studio 24