A quote band: the slanted ” mark beside the quote, on the column grid, with an optional button.
<Testimonial name="James Dashwood" role="Sr Product Manager, ex-Happeo">
Sami is a fantastic designer and person. …
<Button slot="cta" href="/about">More about me</Button>
</Testimonial>
Usage
Background: the site's orange gradient (--gradient-accent-main) on its own; inside an article it takes the article band, e.g. teal on Governance.
Mark: always ” (U+201D). From 744 it sits beside the quote, its top aligned to the text's cap height (--quote-mark-align-offset); below 744 it stacks above.
In an article it breaks out to full width. Put a few short sections of text between quotes, not one after another.
Quote real words only; for customers use role + company type instead of a name.
Props
Prop
Type
Default
Description
name
string
—
Who said it (bold).
role
string
—
Their role, e.g. "Sr Product Designer, ex-Happeo".