# Detail layout

> The body of an item page: a main column and a key-facts aside that sticks on desktop and comes first on phones.

- Block class: `.hs-detail`
- CSS: `components/detail.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: decided
- Decision record: https://brand.honorsociety.org/decisions/directories-round.html
- Variants: Main and aside
- HTML page: https://brand.honorsociety.org/components/detail/

## 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](/components/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](/recipes/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](/components/award-hero/) (R2).
- A long article: use [Prose](/components/prose/) in the full column.
- A form page: use the [Auth card](/components/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.

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