Blockquote - Usage

Basic Guidelines

The Blockquote component is primarily used for testimonials.

Statements from existing customers or partners, that praise the company or recommend products, add credibility and help build trust with potential customers.

Using the star rating variant, Blockquote can also be used for product ratings.

Content Guidance

References

Blockquotes need some sort of reference, this can either be a company logo or a citation (or both).

A quote can have a named reference of a person or a brand.

The reference can also be a logo, but this shouldnt be linked.

A written reference and logo can both be used.

All Blockquotes must have a reference.

The Blockquote can feature only one visual, either a logo or the star rating, but never both.

Ratings always need a reference, but cannot also contain a brand logo.

A brand logo cannot also have a rating.

Blockquotes should not have both a rating and brand logo.

Adding a Link

If a link is required within the Blockquote component, it should always be included as an in-line text link within the citation text area. Logo images should not be linked.

Adding a link to any other area apart from the citation can cause issues for accessibility, especially with screen readers. Linking to text within the citation also allows for the correct hover and focus states to be implemented.

Text links within the component can either be solely the name of the brand that has given the review or they can be more detailed descriptions to give the user additional detail. Generic text phrases such as "click" and "open" should be avoided as they provide the user with no information about where the link will take them.

Brand names should be linked and styled appropriately.

If the quote is from a specific article, then the article name can be linked.

Do not link the quote itself or use URLs within the citation.

Do not link the image. The link must always be associated to the citation.

Quotation marks and dashes

Make sure you keep the correct quotation marks and the En-Dash (Alt + Hyphen) when replacing the text of the Blockquote.

Use quote marks and the correct dash.

Do not change the type of dash used.

Do not remove the quote marks.

Do not remove the space between the dash and the author.

Image Sizing

The placeholder for the logo is 200 x 60 px. When replacing the placeholder image, some logos may need to be set to ‘Fit’ to show all the logo.

Smaller logos need to be set to ‘fit’.

Make sure the logo is not cut off.

For wider logos they can be set to fill.

Make sure logo is cropped correctly.

Alignment

Blockquotes must align with the grid system set out in Foundations. Multiple Blockquotes can sit in columns next to one another keeping to the specified gutter width per breakpoint.

The following two examples represent the use on a 12 column grid, and are downscaled to fit into this document.

On mobile we recommend stacking quotes with a gap of 72px, to make sure each Blockquote is recognised as its own entity.