Blockquote

The blockquote pattern is used to display a quote from a person or written excerpt.

Rules for blockquote

  • Should be used for quotes within content that are typically larger than a sentence. Shorter quotes should use the <q> tag instead.
  • Can be used for standalone quotes on full width page layouts.
  • An author must be associated with a quote.
  • An image of the author and additional information about them are optional.
  • Author images must be 120 by 120 pixels.
  • Author images must be a high quality portraiture headshot of the named person.
  • Citations can be added alongside the author, with a link to a citation added as an attribute to the <blockquote> element.

Options available


Blockquote

An example of a blockquote with an attributed author along with their photograph and place of origin.

Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Dr Garrett Winters
Dr Garrett Winters
- School of Biology
Code

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Dr Garrett Winters
Dr Garrett Winters
- School of Biology

Blockquote with citation

An example of a blockquote where the author has cited their publication and provided a url for further details.

Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula.

Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.”

Professor Sonya Frost
- School of English, Publication title
Code

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula.

Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.Integer at congue libero. Ut placerat ullamcorper efficitur. Cras elementum pharetra enim in egestas. Pellentesque sed turpis pulvinar, rhoncus felis vel, condimentum elit. Integer tempus efficitur dolor. Donec vitae sem scelerisque, sollicitudin nisi sed, faucibus nisl. Cras feugiat ligula a consectetur lacinia.”

Professor Sonya Frost
- School of English, Publication title

Blockquote - full width

An example of a blockquote on a full width page.

  • The maximum number of characters for this type of quote should be no larger than 300.
Example

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Olivia Liang
Olivia Liang
- Colorado, USA
Code

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ornare maximus risus at rhoncus. Etiam sagittis, neque eu condimentum suscipit, justo neque aliquam eros, id porta ligula orci id elit. Nullam maximus erat sed sem vulputate vehicula. Sed dictum lectus ligula, ac gravida ex tempor ac.”

Olivia Liang
Olivia Liang
- Colorado, USA