The system turned three weeks of handoff into an afternoon.
Ana BrooksHead of design
What a customer said, in their own words, under a quotation mark, with who said it.A block is copied, not installed: take an example's code and the stylesheet at the foot of the page, and rename the site- prefix to your project's own.
Examples
Usage
A short quote under the brand quotation mark, and the person who said it with their role, under a quiet line.
Two paragraphs
A longer quote keeps its paragraphs, a little apart; the avatar takes the default tone.
We used to argue about spacing in every review.
Now the tokens settle it, and we talk about the work instead.
Leo GrantFront-end lead
Built from
Guidelines
Purpose
Shows one person's words about a product or a service, on a landing page, a pricing page or a case study. Their name and role sit underneath, so a reader knows who is speaking.
When to use
- For a real quote from a customer or a colleague, short enough to read at a glance.
- 2 or 3 in a row, each about something different.
When not to use
- For words the team wrote about itself. Use a heading and a paragraph.
- For a long story. Link to a case study and quote one line of it here.
Usage rules
Do
- Keep the quote to a sentence or two.
- Pick quotes that say what changed for the person.
Don't
- Shorten a quote until it says something the person did not mean.
- Put a button or a link inside the quote.
Anatomy
- The card, the Card component, its slot body holding one figure.
- The quotation mark in the brand text color, over the words in the large body style.
- The person under a quiet line, drawn by the Avatar with name component, their name over their role.
Behavior
The card takes no focus and holds no action. A longer quote keeps its paragraphs, a little apart. The quotation mark is drawn once, before the words, and the person stays under them at every width.
Accessibility
What it does for you
- The card is an article holding one figure. The words are a block quote and the person is its caption, so a screen reader hears the quote and then who said it.
- The quotation mark is decoration and is hidden from assistive technology.
- The avatar is decoration too, since the name is written beside it.
What you must do
- Quote people with their consent, in their own words.
- Write the role in words, not only as a company logo.
How to test
- With a screen reader, the card reads the words as a quote, then the name and role, and never the quotation mark.
- With text at 200%, the words and the person wrap and nothing is cut off.
Source
The quote card's own layout, its classes under the site- prefix. The components inside it are drawn by the design system's stylesheet.
Stylesheet
/* site-quote-card — Quote card, a block: what a customer said, in their words, and who said it. Copy it into your
* project and rename site- to your project's own prefix. The frame is the Card component, its slot body holding one
* figure; the person under the quote is the Avatar with name component. The block draws only the quotation mark,
* the words and the line above the person. */
.site-quote-card__figure {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-lg);
margin: 0;
}
/* The mark sits over the words, in the brand text color; it is decoration, hidden from assistive technology. */
.site-quote-card__quote {
display: flex;
flex-direction: column;
gap: var(--smbk-space-stack-sm);
margin: 0;
color: var(--smbk-color-text-default);
font-family: var(--smbk-typography-body-lg-font-family);
font-size: var(--smbk-typography-body-lg-font-size);
font-weight: var(--smbk-typography-body-lg-font-weight);
line-height: var(--smbk-typography-body-lg-line-height);
letter-spacing: var(--smbk-typography-body-lg-letter-spacing);
}
.site-quote-card__mark {
color: var(--smbk-color-text-brand);
font-family: var(--smbk-typography-heading-md-font-family);
font-size: var(--smbk-typography-heading-md-font-size);
font-weight: var(--smbk-typography-heading-md-font-weight);
line-height: var(--smbk-typography-heading-md-line-height);
letter-spacing: var(--smbk-typography-heading-md-letter-spacing);
}
.site-quote-card__quote > p {
margin: 0;
}
/* Who said it, under a quiet line, as a card's footer sits under its rule. */
.site-quote-card__caption {
padding-block-start: var(--smbk-space-stack-lg);
border-block-start: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
}