Quotes are used to highlight and present quoted text in a visually distinct format, making it easy to recognise and understand at a glance.
Quotes make it easy to highlight significant statements or insights, helping users quickly identify key takeaways. You can also add optional styling or icons to draw attention and make the source or context of the quote more evident.
When to use this component
Quotes used to highlighting key statements, insights, or testimonials. They're excellent for drawing attention to messages without cluttering the page.
Keep each quote distinct by pairing it with relevant attributions, such as the author or source. Subtle styling, like italics or quotation marks, can enhance readability while keeping the focus on the text.
If the quote needs interaction, such as linking to more details or sources, consider adding buttons or hyperlinks.
Quote components are also an effective alternative to larger blocks of text when you want to deliver a message in a clean, visually appealing way.
Examples in GOSS products
- Default template using the toolbar to add quotes into the article's text
Accessibility considerations
Quotes support accessibility by presenting concise, focused content in a clear, structured way. Their straightforward format is easy for screen readers to interpret, ensuring users with diverse abilities can engage with the content.
Avoid embedding interactive elements directly within quote components. Instead, provide links or buttons nearby for related actions, ensuring compatibility with assistive technologies.
Basic quote
An quote component with no additional configuration options.
The <q> tag is used to define a short quotation within text.
Browsers automatically insert quotation marks around the content enclosed in the <q> tag, making it easy to visually distinguish the quoted material.
This tag is ideal for brief quotes within a sentence or paragraph, ensuring the text is presented clearly and with proper emphasis. You can further customize its appearance using CSS, including adjusting the spacing or styling of the quotation marks.
Quote that appears within text copy
<q>Quote that appears within text copy</q>Quote with a citation
An quote component with cite attribute.
<q cite="http://www.website.com">...</q>
By setting the cite attribute on the <q> tag, you can provide context or attribution for your quotes, ensuring proper referencing across your content. This helps maintain consistency and clarity, particularly when linking to the source of the quote.
By using the cite attribute, you can enhance the credibility of the quoted material, improving both accessibility and user trust.
Quote that appears within text copy that has citation applied
<q cite="http://www.website.com">Quote that appears within text copy that has citation applied</q>Blockquote
A blockquote component with cite attribute.
<blockquote cite="http://www.website.com">...</blockquote>
The <blockquote> tag is used to define a longer quotation, typically displayed in a separate block of text.
Browsers typically add indentation around the content enclosed in the <blockquote> tag, helping to visually set the quoted material apart from the rest of the text.
This tag is ideal for longer quotes that require more emphasis or context, ensuring the quoted content stands out clearly.
Blockquote appears for longer quotes that require more emphasis or context that also has citation applied
<div class="a-body">
<blockquote cite="http://www.website.com">
<p>
Blockquote appears for longer quotes that require more emphasis or context that also has citation applied
</p>
</blockquote>
</div>Share this page
