# Prose

> The wrapper for long-form body copy: articles and editor pages, styled by element with no classes inside.

- Block class: `.hs-prose`
- CSS: `components/base.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/components-round-1.html
- Variants: Article body, Intro, pull quote and editorial note
- HTML page: https://brand.honorsociety.org/components/prose/

## What it is

Long-form body copy: articles and editor pages. Wrap the body in `.hs-prose`. 17px/1.7 ink; text fills the container.

## When to use

- The body of an article or a member blog post.
- The body field of an editor page, where `filtered_html` allows no classes.
- A FAQ answer that holds links: add `.hs-prose` to `.hs-qa__answer`.
- Long copy that mixes headings, lists, a quote, a figure and a small table.

## When not to use

- A member testimonial on an explainer or trust page: use [Quote](/components/quote/). The prose blockquote is for quotes inside article copy.
- A wide data or comparison table outside an article: use [Table](/components/table/).
- A short note under content: use [Fine print](/components/fine-print/).
- Legal or participation terms: use [Disclosure](/components/disclosure/).
- Short card or band copy: use the component's own text class, such as `.hs-card__text` or `.hs-lead`.

## Rules

- Wrap the whole body in one `.hs-prose`. Inside it, write plain elements. Element rules sit in `:where()`, so any `hs-` class on a child wins.
- Start body headings at `h2`: the page head holds the `h1`. Use `h3` for a sub-section.
- Text elements, tables and figures fill the container. Body text has no width cap (`--hs-measure: none`); only display headings keep a `ch` cap.
- Write links as plain `<a>`. The prose rule gives them the gold underline and weight 500.
- Wrap every table in `<div class="hs-table-scroll">`, so a wide table scrolls and the page does not. Give the table a `<caption>`.
- Write a quote as `<blockquote><p>` with the source in a `<footer>` or `<cite>`. Write an image as a plain `<figure>` with `<img>` and `<figcaption>`.
- Three classed children are allowed where the editor can write classes (`full_html`, hs_html_page):
  - Intro: the first paragraph as `<p class="hs-lead">`. It states the thesis in one or two sentences. At most one per body, and only as the first child.
  - Pull quote: `<figure class="hs-quote hs-quote--pull">` (see [Quote](/components/quote/)). It repeats one strong line from the body or quotes a person by name. At most one per screen.
  - Editorial note: `<p class="hs-fine-print">` as the last child, for the source, the review date or a correction. A hairline and 32px of space set it off from the body.
- The body text always fills the column. None of the three classes narrows it.

## Accessibility

- Body text is ink: 13.0:1 on white.
- A link has two cues that are not colour: a 2px action-gold underline and weight 500. Navy against ink is 1.04:1, so colour alone never marks a link.
- Tables use `<th scope="col">` and `<th scope="row">`, and a `<caption>`. Numbers are tabular.
- `.hs-table-scroll` sets no role or `tabindex`. For a table that a keyboard user must scroll, use the [Table](/components/table/) wrapper.
- Reduced motion removes the link underline transition.

## Variants

### Article body

Article copy from `/articles/honor-societies-and-changing-definition-achievement`, the table from `/requirements`, the quote from `/reviews`.

```html
<div class="hs-prose">
  <p>Achievement in higher education is no longer defined by a single measure. While academic performance remains important, there is growing recognition of the broader ways individuals contribute to their communities and fields.</p>
  <p>Honor societies reflect this shift by aligning <a href="/articles/role-recognition-academic-and-professional-communities">recognition</a> with a more comprehensive understanding of success.</p>
  <h2>Moving Beyond GPA as the Sole Indicator of Achievement</h2>
  <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>
  <ul>
    <li>Scholarships: merit, service and study abroad awards.</li>
    <li>Member benefits: dining, travel, dental and vision savings.</li>
    <li>Mentorship: resume critiques and mock interviews.</li>
  </ul>
  <h3>Do honor societies only recognize grades?</h3>
  <p>Many honor societies recognize a broader range of accomplishments, including leadership and community involvement.</p>
  <blockquote>
    <p>&ldquo;The member guides helped me plan my next semester.&rdquo;</p>
    <footer>Sam Example, example review site, November 24, 2025</footer>
  </blockquote>
  <div class="hs-table-scroll">
    <table>
      <caption>Honor Society&reg; academic recognition tiers</caption>
      <thead>
        <tr><th scope="col">Recognition tier</th><th scope="col">GPA range</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Highest Honors</th><td>3.8 and above</td></tr>
        <tr><th scope="row">High Honors</th><td>3.5&ndash;3.79</td></tr>
        <tr><th scope="row">Honors</th><td>3.2&ndash;3.49</td></tr>
      </tbody>
    </table>
  </div>
</div>
```

### Intro, pull quote and editorial note

The intro is `.hs-lead`, the pull quote is `hs-quote--pull`, the closing note is `.hs-fine-print`. Article copy from `/articles/honor-societies-and-changing-definition-achievement`.

```html
<div class="hs-prose">
  <p class="hs-lead">Achievement in higher education is no longer defined by a single measure. Recognition now reaches leadership, service and initiative as well as grades.</p>
  <p>While academic performance remains important, there is growing recognition of the broader ways individuals contribute to their communities and fields.</p>
  <h2>Moving Beyond GPA as the Sole Indicator of Achievement</h2>
  <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>
  <p class="hs-fine-print">Editor&rsquo;s note: [date and what changed]. Sources are linked in the text; see the <a href="/transparency">Transparency Statement</a>.</p>
</div>
```