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. The prose blockquote is for quotes inside article copy.
• A wide data or comparison table outside an article: use Table.
• A short note under content: use Fine print.
• Legal or participation terms: use 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). 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 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.

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

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