Return to Sky UI homepage

Blockquote - Usage

View on FigmaView on GitHub
“Sky Glass represents a paradigm shift in the premium TV industry”
Tony Television
rating:  5 stars
The Blockquote is now available as a section, showing up to three blockquotes with set alignment for Mobile and Desktop viewports.Go to Awards section

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. The star display reflects the rating by showing only the number of stars that match the score, ensuring clarity and authenticity in how feedback is presented.

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.

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.
Crop any unnecessary white space surrounding the image, to make sure the placeholder element is filled properly.
For wider logos they can be set to fill.
Make sure logo is cropped correctly.

Alignment

The Blockquote is now available as a section, showing up to three blockquotes with set alignment for Mobile and Desktop viewports.Go to Awards section