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. Use --pull only for the one line that should stand out.
• An outside rating with a score: use Rating.
• A figure as proof: use 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.

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

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

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