<Blockquote url="#"><BlockquoteContent>With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the human experience as a whole.</BlockquoteContent><BlockquoteCitation author="Google" source="People + AI Guidebook" /></Blockquote>
A Blockquote is a stylized text format used to highlight a text excerpt or quote, usually sourced from articles, blog posts or customer feedback. It makes it easier for users to recognize a quote or reference.
- When using the Blockquote component, ensure that the cite attribute provides a valid URL or reference to the source of the quoted content. This attribute allows assistive technologies, such as screen readers, to convey the source of the quote to users.
- Avoid using Blockquote purely for visual formatting, such as creating indents or styling text. This markup carries semantic meaning, indicating that the text is a quotation. Using it for styling purposes can confuse screen readers, misrepresenting the content's structure and meaning.
| Component | Usage | Example |
|---|---|---|
| Blockquote | Use to highlight quotations from an external source or customer feedback. | This is a Blockquote pulled from an outside source. |
| Example Text | Use when you want to provide contextual examples of user input. | This is an Example Text that guides users on how to respond to a system |
| Callout | Use a Callout to highlight any other important information. | (information) Heads up!This is some information you need to know. |
Use a default Blockquote when you want to highlight a quote from an external source, but there is no specific need for URL and the context is clear.
<Blockquote url="#"><BlockquoteContent>With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the human experience as a whole.</BlockquoteContent><BlockquoteCitation author="Google" source="People + AI Guidebook" /></Blockquote>
Use Blockquote without URL when you have the actual source of the quote but are unable to provide a URL to redirect the user.
<Blockquote><BlockquoteContent>If I must die <br/>let it bring hope <br/>let it be a tale</BlockquoteContent><BlockquoteCitation author="Rafaat Alareer" source="If I Must Die" /></Blockquote>
Use a Blockquote with only author attribution when you want to highlight a quote from an external source, but there is no specific need for source or the source is unavailable.
Example use cases:
- When quoting a well-known individual, where the author’s name provides enough context for the audience.
- When quoting from a source that is hard to trace or not directly accessible (e.g., a verbal interview or a widely repeated saying without a specific source)
<Blockquote><BlockquoteContent>When you light a candle, you also cast a shadow.</BlockquoteContent><BlockquoteCitation author="Ursula K. Le Guin" /></Blockquote>
- Whenever possible, include a URL to the original source to allow users to access additional context or details
- Always provide context before and after the Blockquote to connect the information to the surrounding content
- Use capital case for author’s name. For example: Jane Doe
- Use sentence case, with only the first word and proper nouns capitalized for the source and its URL
<><Paragraph>Avoid being too heavy-handed with communicating how a feature has been built or changed with AI since introducing new interaction patterns and unnecessary messaging can distract from the customer’s goals.</Paragraph><Blockquote url="#"><BlockquoteContent>With AI-driven products, there can be a temptation to communicate the “newness” or “magic” of the system’s predictions through its UI metaphors. However, unfamiliar UI touchpoints can make it harder for users to learn to use your system, potentially leading to degraded understanding of, or trust in, your product…Instead, anchor new users with familiar UI patterns and features.</BlockquoteContent><BlockquoteCitation author="Google" source="People + AI Guidebook" /></Blockquote><Paragraph marginBottom="space0">With AI features, there’s also a higher chance for things to go wrong.</Paragraph></>
Do
Maintain the integrity of the external reference and refrain from altering its meaning.
Don't
Avoid stacking Blockquotes.
With AI-driven products, there can be a temptation to communicate the “newness” or “magic” of the system’s predictions through its UI metaphors. However, unfamiliar UI touchpoints can make it harder for users to learn to use your system, potentially leading to degraded understanding of, or trust in, your product…Instead, anchor new users with familiar UI patterns and features.
— Google, People + AI Guidebook
Do
Use ellipses (…) for omitted text when Blockquotes are longer if you need to make it concise.
To create your account, provide your full name, a valid email address, and a secure password. Your password must contain at least eight characters, including uppercase letters, lowercase letters, numbers, and a special character.
Don't
Don't use Blockquote for indenting non-quote text content.