Quote-block

/*
 * Quote-block — block
 *
 * Pull-quote / blockquote with optional attribution. Native
 * <blockquote> for semantics. CSS-only.
 *
 *   <blockquote class="quote-block">
 *     <p class="quote-block__body">
 *       The standards committee should not have to think.
 *     </p>
 *     <footer class="quote-block__attribution">
 *       — <cite class="quote-block__cite">Alan Kay</cite>
 *     </footer>
 *   </blockquote>
 */

@layer malevich.components {
  .quote-block {
    margin: 0;
    padding-block: var(--space-inset-block-m);
    padding-inline-start: var(--space-inset-block-m);
    padding-inline-end: var(--space-inset-block-m);

    border-inline-start: var(--border-width-emphasis) solid var(--color-accent);
    background-color: transparent;
    color: var(--color-ink-strong);
  }

  .quote-block__body {
    margin: 0;
    font-family: var(--font-heading-section-family);
    font-size: var(--font-heading-section-size);
    font-weight: var(--font-heading-section-weight);
    line-height: var(--font-heading-section-line-height);
    letter-spacing: var(--font-heading-section-letter-spacing);
  }

  .quote-block__body + .quote-block__body {
    margin-block-start: var(--space-gap-elements-m);
  }

  .quote-block__attribution {
    margin-block-start: var(--space-gap-elements-m);

    color: var(--color-ink-regular);
    font-family: var(--font-body-support-family);
    font-size: var(--font-body-support-size);
    font-weight: var(--font-body-support-weight);
    line-height: var(--font-body-support-line-height);
    letter-spacing: var(--font-body-support-letter-spacing);

    font-style: normal;
  }

  .quote-block__cite {
    font-style: normal;
    font-weight: 600;
    color: var(--color-ink-strong);
  }

  /* Variants */

  .quote-block.-card {
    border-inline-start: 0;
    background-color: var(--color-surface-raised);
    border-radius: var(--radius-card);
    padding-inline: var(--space-inset-block-l);
  }

  .quote-block.-pull {
    border-inline-start: 0;
    text-align: center;
    padding-block: var(--space-inset-block-l);
  }

  .quote-block.-pull .quote-block__body {
    font-family: var(--font-heading-title-family);
    font-size: var(--font-heading-title-size);
    font-weight: var(--font-heading-title-weight);
    line-height: var(--font-heading-title-line-height);
    letter-spacing: var(--font-heading-title-letter-spacing);
  }

  .quote-block.-muted {
    border-inline-start-color: var(--color-border-muted);
    color: var(--color-ink-regular);
  }
}

This component is pure CSS — no JavaScript required.

# Quote-Block — AGENTS.md

> Auto-generated from `quote-block.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `quote-block`
- **Layer:** blocks
- **Status:** stable
- **Last updated:** 2026-05-19

## Summary

- Pulled testimonials on landing pages.

## Variants

| Variant | Class                  | Use for                                |
|---------|------------------------|----------------------------------------|
| Default | `.quote-block`         | Left-rule treatment, accent border     |
| Card    | `.quote-block.-card`   | Surfaced card-style block              |
| Pull    | `.quote-block.-pull`   | Centered, large display typography     |
| Muted   | `.quote-block.-muted`  | De-emphasized rule + ink               |

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | `solid` |
| `surface` | `flat`, `elevated` |
| `effect` | `grain`, `ring` |
| `shader` | — |
| `rhythm` | `compact`, `regular`, `spacious` |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<blockquote class="quote-block">
  <p class="quote-block__body">
    Simple things should be simple, complex things should be possible.
  </p>
  <footer class="quote-block__attribution">
    — <cite class="quote-block__cite">Alan Kay</cite>
  </footer>
</blockquote>

<!-- Card style -->
<blockquote class="quote-block -card">
  <p class="quote-block__body">
    The product surprised everyone — including the team that built it.
  </p>
  <footer class="quote-block__attribution">
    <cite class="quote-block__cite">Director of Engineering</cite>,
    a major retail brand
  </footer>
</blockquote>

<!-- Centered pull-quote for landing pages -->
<blockquote class="quote-block -pull">
  <p class="quote-block__body">
    "We shipped twice as fast after switching."
  </p>
  <footer class="quote-block__attribution">
    <cite class="quote-block__cite">Engineering lead</cite>
  </footer>
</blockquote>
```

## Tokens consumed

- `--color-accent` — default border rule
- `--color-border-muted` — muted variant rule
- `--color-surface-raised` — card variant background
- `--color-ink-strong`, `--color-ink-regular`
- `--space-inset-block-{m,l}` — padding
- `--space-gap-elements-m` — gap between body and attribution
- `--radius-card` — card variant radius
- `--border-width-emphasis` — rule thickness
- `--font-heading-section-*`, `--font-heading-title-*`, `--font-body-support-*` — typography

## Accessibility contract

`<blockquote>` carries the semantic role for quoted material. Pair
with `cite=` URL attribute if the source is online:

```html
<blockquote class="quote-block" cite="https://example.com/source">
  …
</blockquote>
```

The `<cite>` element inside `__attribution` denotes the author or
source name (not a URL — the attribute on `<blockquote>` carries the
URL). Per HTML spec, `<cite>` should reference the title of a work or
the name of the source, not the speaker. We bend this slightly to
attribute the speaker, which is the common pattern in web typography.

## Guidance

### Do

- Use `<blockquote>` as the outer element.
- Use `<cite>` inside attribution for the speaker/source name.
- Keep pull-quote bodies short (1-2 sentences max).

### Don't

- Don't add quotation marks manually — the typography carries enough
  visual signal. (Add them only if your design language requires.)
- Don't apply `.quote-block` to a non-`<blockquote>` element.