Quote
React pull quote and blockquote with optional title, author, author title, and avatar, in sizes and tints. Renders semantic blockquote markup.
Quote takes the quotation as children, plus optional quoteTitle, author, authorTitle, and avatar. It renders a semantic blockquote.
When to use
Use Quote for testimonials, a leadership statement on a service page, or a highlighted excerpt from a policy. Keep quotes short and attribute them.
For a callout that is not a quotation, use InlineAlert.
Examples
A well-designed system is one you never have to think about.
Props
Props declared by Quote. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "lg" | ||
whiteBackground | boolean | ||
children | react.ReactNode | The quote text - the cited sentence. Rendered inside the <blockquote>. | |
quoteTitle | react.ReactNode | Optional bold lead-in above the quote (SDGA "Title of quote" - Display xs). | |
author | react.ReactNode | Attribution name (SDGA "Author's name" - Text xl, medium). | |
authorTitle | react.ReactNode | Secondary attribution line - role / brief (SDGA author title - Text lg). | |
avatar | react.ReactNode | Avatar media (e.g. an <Avatar />), shown 80px at the inline-start of the author row.
Decorative (aria-hidden); only rendered alongside textual attribution. | |
cite | string | Source URL - set as the machine-readable cite= attribute on the <blockquote>. |
Accessibility
Quote renders a native <blockquote>, so screen readers announce it as a quotation. The author and title are text, and the avatar is decorative.
Decorative quotation marks are aria-hidden.