Detail layout

What it is

A two-column layout inside one band. The main column holds what the item is and how it works. The aside holds a Facts panel with the one primary action. From 62rem the aside is 26rem wide and sticks under the site header. Below 62rem it is one column, and the aside comes first, right after the page head.

When to use

• A scholarship detail page, a benefit detail page, a university page. See R9 Item detail.
• Any item page where the visitor decides from a few facts and then acts.

When not to use

• One of the site's own award pages with a deadline: use the Award hero (R2).
• A long article: use Prose in the full column.
• A form page: use the Auth card or a plain form band.

Rules

• Markup: div.hs-detail > div.hs-detail__main + aside.hs-detail__aside. Keep this source order: main first.
• The detail is the first band after the page head. Put it in a white band with data-section="detail".
• The aside holds one .hs-facts panel and nothing else.
• Main column: .hs-prose for the description, then optional h2 sections (how it works, topics as tags, fine print in a disclosure). Blocks sit 32px apart.
• The aside's action is the page's primary action. The page head carries no button, so the two never compete.
• Related items, the back link and the CTA band follow in their own bands, outside .hs-detail.

Accessibility

• The aside is a landmark (aside) with aria-labelledby pointing at the facts title.
• Below 62rem CSS order shows the aside first while the source keeps main first. A screen reader reads the description, then the facts; the aside landmark lets it jump straight to the facts.
• Sticky positioning moves no content and has no motion.

Variants

Main and aside

Narrow the window under 992px: the facts move above the description.

<div class="hs-detail">
  <div class="hs-detail__main">
    <div class="hs-prose">
      <p>The Example Leadership Award supports students who lead a service project on their campus. Tell us what you started, who it helped and what you learned.</p>
      <p>Applications are read by a panel of educators. Winners are notified by email.</p>
    </div>
    <section aria-labelledby="dl-topics">
      <h2 class="hs-heading hs-heading--h3" id="dl-topics">Topics</h2>
      <ul class="hs-chips" aria-label="Topics">
        <li class="hs-tag">Leadership</li>
        <li class="hs-tag">Community service</li>
        <li class="hs-tag">Undergraduate</li>
      </ul>
    </section>
  </div>
  <aside class="hs-detail__aside" aria-labelledby="dl-facts">
    <div class="hs-facts">
      <h2 class="hs-facts__title" id="dl-facts">Key facts</h2>
      <dl class="hs-facts__list">
        <div class="hs-facts__item hs-facts__item--value"><dt>Amount</dt><dd>$2,500</dd></div>
        <div class="hs-facts__item"><dt>Offered by</dt><dd>Honor Society&reg;</dd></div>
        <div class="hs-facts__item"><dt>Deadline</dt><dd><time datetime="2026-12-15">December 15, 2026</time></dd></div>
      </dl>
      <div class="hs-facts__action">
        <a class="hs-button hs-button--block" href="/scholarships/example-leadership-award/apply" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="detail">Apply now</a>
      </div>
    </div>
  </aside>
</div>