# Quote card

What a customer said, in their own words, under a quotation mark, with who said it.

A block: a ready-made arrangement of components, to copy into a project. Its own classes carry the `site-` prefix; rename it to your project's own. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Built from: Card, Avatar with name, Avatar.

## Examples

### Usage

A short quote under the brand quotation mark, and the person who said it with their role, under a quiet line.

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked site-quote-card">
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <figure class="site-quote-card__figure">
        <blockquote class="site-quote-card__quote">
          <span class="site-quote-card__mark" aria-hidden="true">“</span>
          <p>The system turned three weeks of handoff into an afternoon.</p>
        </blockquote>
        <figcaption class="site-quote-card__caption">
          <div class="smbk-avatar-with-name smbk-avatar-with-name--size-sm">
            <span class="smbk-avatar smbk-avatar--size-sm smbk-avatar--tone-brand smbk-avatar--type-initials smbk-avatar-with-name__avatar">
              <span class="smbk-avatar__initials" aria-hidden="true">AB</span>
            </span>
            <span class="smbk-avatar-with-name__text">
              <span class="smbk-avatar-with-name__name">Ana Brooks</span>
              <span class="smbk-avatar-with-name__second-line">Head of design</span>
            </span>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { AvatarWithName } from './design-system/components/avatar-with-name/avatar-with-name.js';

<Card className="site-quote-card">
  <CardBody type="slot">
    <figure className="site-quote-card__figure">
      <blockquote className="site-quote-card__quote">
        <span className="site-quote-card__mark" aria-hidden="true">“</span>
        <p>The system turned three weeks of handoff into an afternoon.</p>
      </blockquote>
      <figcaption className="site-quote-card__caption">
        <AvatarWithName size="sm" tone="brand" name="Ana Brooks" secondLine="Head of design" />
      </figcaption>
    </figure>
  </CardBody>
</Card>
```

### Two paragraphs

A longer quote keeps its paragraphs, a little apart; the avatar takes the default tone.

```html
<article class="smbk-card smbk-card--surface-slab smbk-card--layout-stacked site-quote-card">
  <div class="smbk-card__content">
    <div class="smbk-card__body smbk-card__body--type-slot">
      <figure class="site-quote-card__figure">
        <blockquote class="site-quote-card__quote">
          <span class="site-quote-card__mark" aria-hidden="true">“</span>
          <p>We used to argue about spacing in every review.</p>
          <p>Now the tokens settle it, and we talk about the work instead.</p>
        </blockquote>
        <figcaption class="site-quote-card__caption">
          <div class="smbk-avatar-with-name smbk-avatar-with-name--size-sm">
            <span class="smbk-avatar smbk-avatar--size-sm smbk-avatar--tone-default smbk-avatar--type-initials smbk-avatar-with-name__avatar">
              <span class="smbk-avatar__initials" aria-hidden="true">LG</span>
            </span>
            <span class="smbk-avatar-with-name__text">
              <span class="smbk-avatar-with-name__name">Leo Grant</span>
              <span class="smbk-avatar-with-name__second-line">Front-end lead</span>
            </span>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</article>
```

```tsx
import { Card, CardBody } from './design-system/components/card/card.js';
import { AvatarWithName } from './design-system/components/avatar-with-name/avatar-with-name.js';

<Card className="site-quote-card">
  <CardBody type="slot">
    <figure className="site-quote-card__figure">
      <blockquote className="site-quote-card__quote">
        <span className="site-quote-card__mark" aria-hidden="true">“</span>
        <p>We used to argue about spacing in every review.</p>
        <p>Now the tokens settle it, and we talk about the work instead.</p>
      </blockquote>
      <figcaption className="site-quote-card__caption">
        <AvatarWithName size="sm" name="Leo Grant" secondLine="Front-end lead" />
      </figcaption>
    </figure>
  </CardBody>
</Card>
```

## 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.

## 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.

## 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.

## 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.

## 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.

## Stylesheet

```css
/* 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);
}
```