# Quote

> A member testimonial in Didot italic with a CSS opening mark; the card form fills a review grid.

- Block class: `.hs-quote`
- CSS: `components/quote.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html
- Variants: Pull quote, Review card, Pull quote in prose
- HTML page: https://brand.honorsociety.org/components/quote/

## What it is

A member testimonial. Didot italic, navy, with the opening mark drawn by CSS: write the quote without quotation marks. `--pull` is the article form: a larger quote between a navy top rule and a hairline, inside `.hs-prose`. A quotation that is part of the argument stays on the prose blockquote.

## When to use

- One member testimonial on an explainer or trust page (pull quote).
- A grid of reviews, as on `/reviews` (`--card`).
- One line in an article that must stand out from the body text (`--pull`, inside `.hs-prose`).

## When not to use

- A quotation that is part of the article's argument: use the blockquote in [Prose](/components/prose/). Use `--pull` only for the one line that should stand out.
- An outside rating with a score: use [Rating](/components/rating/).
- A figure as proof: use [Stat](/components/stat/).

## Rules

- Markup: `<figure class="hs-quote">` with `blockquote.hs-quote__text` (the quote in a `<p>`), then `figcaption.hs-quote__cite`.
- Write the quote without quotation marks. CSS draws the opening mark.
- The caption starts with `span.hs-quote__name`, then the school or the source as plain text.
- A testimonial carries a name and a school, and links to a real profile or story.
- A review keeps its source and date in the caption. A dated review goes stale like any volatile figure.
- Let the type carry the weight: no gold. Only `--pull` carries rules, and they are navy (white on navy): gold is for the action.
- `--pull`: a direct child of `.hs-prose`, full column width, at most one per screen. It repeats a line from the body (no caption) or quotes a named person (with the caption). The opening mark is off: the rules mark the quote.
- Never add `AggregateRating` markup for testimonials.

## Accessibility

- `<blockquote>` and `<figcaption>` inside one `<figure>` tie the quote to its source.
- The opening mark is CSS content with empty alt text, so a screen reader does not read it.
- Quote text is navy 12.4:1 on light, and white on navy.
- The name is ink. The source is slate 6.2:1.
- The quote needs no JavaScript and has no motion.

## Variants

### Pull quote

Name in ink semibold, then the school or source in slate.

```html
<figure class="hs-quote">
  <blockquote class="hs-quote__text">
    <p>Joining HonorSociety.org gave me a clear place to plan my next steps, and I&rsquo;m glad I did.</p>
  </blockquote>
  <figcaption class="hs-quote__cite">
    <span class="hs-quote__name">Morgan Example</span>
    Example State University
  </figcaption>
</figure>
```

### Review card

`--card`: a bordered panel for a grid of reviews. A dated review goes stale; keep the date in the caption.

```html
<figure class="hs-quote hs-quote--card">
  <blockquote class="hs-quote__text"><p>The steps are clear and easy to follow.</p></blockquote>
  <figcaption class="hs-quote__cite"><span class="hs-quote__name">Riley Sample</span> Example review site, November 2025</figcaption>
</figure>
```

### Pull quote in prose

`--pull` inside `.hs-prose`: larger Didot italic between a 4px navy rule and a hairline, 48px clear of the body text. Full column width.

```html
<div class="hs-prose">
  <p>Grades have long been used to measure academic success. While they remain a meaningful indicator, they do not fully capture leadership, collaboration, or initiative.</p>
  <figure class="hs-quote hs-quote--pull">
    <blockquote class="hs-quote__text"><p>Grades remain a meaningful indicator, but they do not fully capture leadership, collaboration, or initiative.</p></blockquote>
  </figure>
  <p>Honor societies reflect this shift by aligning recognition with a more comprehensive understanding of success.</p>
</div>
```