Page recipe R9

Item detail

One item from a catalog: page head with breadcrumb, main column and key-facts aside with the one action, related cards, a route back and the CTA band. Build it in code.

Page kind: utility
Serves: /scholarships/{name}, /benefits/{partner}, /university/{name}
Base page: /scholarships/{name}
Components: Page head, Breadcrumb, Detail layout, Facts, Status, Prose, Filter chips and tags, Card, Disclosure, Text link, CTA band, Band and container, Heading, Eyebrow
Markdown: /recipes/r9-item-detail.md

Overview

Serves: a scholarship in the directory (/scholarships/{name}), a benefit (/benefits/{partner}), a university page (/university/{name}). Base page: a scholarship detail page. Page kind: utility (the visitor checks the facts, then acts). All recipes

How to use this recipe: it shows a proven page shape, not a fixed template. Start from the closest recipe, choose the components that fit the content, combine them as needed and leave out what does not fit. Only the component rules are fixed: grounds, one gold element per viewport, heading order, marks and the rules on each component page.

Build it in code. Every value comes from the item's record: the name, the description, the facts, the action URL and the related items.

Sections of the base page (ground in brackets):

Page head [soft]: breadcrumb (three steps), eyebrow with the item type, H1. No button: the action sits with the facts.
Detail [white]: main column (description, topics) and the key-facts aside with the one primary action. The aside sticks from 62rem; below 62rem it comes right after the page head.
Related [soft]: band head, three cards of the same family, then a route back to the catalog in the band foot.
CTA band [navy]: closing band, one gold button.

Components: page-head, breadcrumb, detail, facts, status, prose, chips (topics as filter links), card (--award, --offer), disclosure (benefit terms), link, cta-band.

Rules:

The visitor decides from the facts, so the facts and the action sit together. The page head carries no button.
Three to six facts; skip a fact with no data. The amount or value goes first, only when it comes from data.
One gold button in the detail band: the facts action. The site header's Join button is chrome and does not count. An action that leaves the site gets rel="noopener" and the note "You leave honorsociety.org."
Topics are links to the catalog filtered by that topic (a.hs-chip), so a topic leads to its siblings.
The route back is a .hs-link in the related band's foot ("See all scholarships"). The breadcrumb already sits in the page head, and a back link never sits beside a breadcrumb.
Normalise external URLs once in code: one scheme, no doubled http://https://.
Emit one JSON-LD block: the page head's BreadcrumbList, or the item's own schema with the breadcrumb inside it.

Live page

A directory scholarship applied for on the provider's site. Fictional sample.

Scholarship · examplefoundation.org

$1,000 Example Community Grant

The Example Community Grant supports graduate students who plan a career in public health. Applicants describe a health need in their community and a plan to meet it.

The provider reads every application and names one recipient each spring.

Topics

See all scholarships

Honor Society® membership

Apply for our own scholarships

Members apply for Honor Society scholarships on our site and see new awards first.

Start your membership

Page HTML (81 lines)

<!-- PAGE HEAD: printed by the template (hs_core_page_head). Three steps: the breadcrumb shows. -->
<section class="hs-band hs-band--soft hs-page-head" data-section="hero">
  <div class="hs-container">
    <nav class="hs-breadcrumb" aria-label="Breadcrumb">
      <ol class="hs-breadcrumb__list">
        <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/" data-ph-capture-attribute-cta="home" data-ph-capture-attribute-cta-loc="hero">Home</a></li>
        <li class="hs-breadcrumb__item"><a class="hs-breadcrumb__link" href="/scholarship-directory" data-ph-capture-attribute-cta="scholarship-directory" data-ph-capture-attribute-cta-loc="hero">Scholarship directory</a></li>
        <li class="hs-breadcrumb__item" aria-current="page">$1,000 Example Community Grant</li>
      </ol>
    </nav>
    <p class="hs-eyebrow">Scholarship &middot; examplefoundation.org</p>
    <h1 class="hs-heading hs-heading--h1 hs-heading--rule">$1,000 Example Community Grant</h1>
  </div>
</section>

<!-- DETAIL: main first in the source; below 62rem CSS shows the aside first. -->
<section class="hs-band" data-section="detail">
  <div class="hs-container">
    <div class="hs-detail">
      <div class="hs-detail__main">
        <div class="hs-prose">
          <p>The Example Community Grant supports graduate students who plan a career in public health. Applicants describe a health need in their community and a plan to meet it.</p>
          <p>The provider reads every application and names one recipient each spring.</p>
        </div>
        <section aria-labelledby="r9-topics">
          <h2 class="hs-heading hs-heading--h3" id="r9-topics">Topics</h2>
          <nav aria-label="Topics">
            <ul class="hs-chips">
              <li><a class="hs-chip" href="/scholarship-directory?for=graduate" data-ph-capture-attribute-cta="topic" data-ph-capture-attribute-cta-loc="detail">Graduate</a></li>
              <li><a class="hs-chip" href="/scholarship-directory?type=grant" data-ph-capture-attribute-cta="topic" data-ph-capture-attribute-cta-loc="detail">Grant</a></li>
            </ul>
          </nav>
        </section>
      </div>
      <aside class="hs-detail__aside" aria-labelledby="r9-facts">
        <div class="hs-facts">
          <h2 class="hs-facts__title" id="r9-facts">Key facts</h2>
          <dl class="hs-facts__list">
            <div class="hs-facts__item hs-facts__item--value"><dt>Amount</dt><dd>$1,000</dd></div>
            <div class="hs-facts__item"><dt>Offered by</dt><dd>examplefoundation.org</dd></div>
            <div class="hs-facts__item"><dt>Who it&rsquo;s for</dt><dd>Graduate students</dd></div>
            <div class="hs-facts__item"><dt>Type</dt><dd>Grant</dd></div>
          </dl>
          <div class="hs-facts__action">
            <a class="hs-button hs-button--block" href="https://examplefoundation.org/community-grant" rel="noopener" data-ph-capture-attribute-cta="apply-external" data-ph-capture-attribute-cta-loc="detail">Apply on examplefoundation.org</a>
          </div>
          <p class="hs-facts__note">You leave honorsociety.org.</p>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- RELATED: three cards that share a mapped topic. The band foot holds the route back. -->
<section class="hs-band hs-band--soft" data-section="related" aria-labelledby="r9-related-h">
  <div class="hs-container">
    <div class="hs-band__head">
      <h2 class="hs-heading hs-heading--h2 hs-heading--rule" id="r9-related-h">Related scholarships</h2>
    </div>
    <ul class="hs-card-grid hs-card-grid--3">
      <li><a class="hs-card hs-card--link hs-card--award" href="/scholarships/sample-health-fellowship" data-ph-capture-attribute-cta="scholarship" data-ph-capture-attribute-cta-loc="related"><p class="hs-eyebrow">Fellowship</p><h3 class="hs-card__title">Sample Health Fellowship</h3><ul class="hs-card__meta"><li>sampleinstitute.org</li><li>Graduate</li></ul></a></li>
      <li><a class="hs-card hs-card--link hs-card--award" href="/scholarships/placeholder-research-grant" data-ph-capture-attribute-cta="scholarship" data-ph-capture-attribute-cta-loc="related"><p class="hs-card__value">$2,000</p><h3 class="hs-card__title">Placeholder Research Grant</h3><ul class="hs-card__meta"><li>Bold.org</li><li>Graduate</li></ul></a></li>
      <li><a class="hs-card hs-card--link hs-card--award" href="/example-leadership-award" data-ph-capture-attribute-cta="scholarship" data-ph-capture-attribute-cta-loc="related"><p class="hs-card__value">$2,500</p><h3 class="hs-card__title">Example Leadership Award</h3><ul class="hs-card__meta"><li>Honor Society&reg;</li><li>Undergraduate</li></ul></a></li>
    </ul>
    <div class="hs-band__foot">
      <a class="hs-link" href="/scholarship-directory" data-ph-capture-attribute-cta="scholarship-directory" data-ph-capture-attribute-cta-loc="related">See all scholarships</a>
    </div>
  </div>
</section>

<!-- CTA BAND: the closing band. One gold button. -->
<section class="hs-band hs-band--navy hs-cta-band" data-section="join">
  <div class="hs-container hs-cta-band__inner">
    <p class="hs-eyebrow">Honor Society&reg; membership</p>
    <h2 class="hs-heading hs-heading--h2">Apply for our own scholarships</h2>
    <p class="hs-lead">Members apply for Honor Society scholarships on our site and see new awards first.</p>
    <div class="hs-actions hs-cta-band__actions">
      <a class="hs-button" href="/join" data-ph-capture-attribute-cta="join" data-ph-capture-attribute-cta-loc="join">Start your membership</a>
    </div>
  </div>
</section>

Benefit detail

The detail band of a benefit: the facts aside holds the redeem area, and the terms move into a disclosure block in the main column.

Example Learning Co. runs online test prep courses for the GRE, GMAT and LSAT. Members save 20% on any course.

Terms

One code per member. The discount applies to the course price before tax and cannot be combined with other offers. Example Learning Co. sets and may change its own terms.

Page HTML (31 lines)

<section class="hs-band" data-section="detail">
  <div class="hs-container">
    <div class="hs-detail">
      <div class="hs-detail__main">
        <div class="hs-prose">
          <p>Example Learning Co. runs online test prep courses for the GRE, GMAT and LSAT. Members save 20% on any course.</p>
        </div>
        <section aria-labelledby="r9b-terms">
          <h2 class="hs-heading hs-heading--h3" id="r9b-terms">Terms</h2>
          <div class="hs-disclosure">
            <p>One code per member. The discount applies to the course price before tax and cannot be combined with other offers. Example Learning Co. sets and may change its own terms.</p>
          </div>
        </section>
      </div>
      <aside class="hs-detail__aside" aria-labelledby="r9b-facts">
        <div class="hs-facts">
          <h2 class="hs-facts__title" id="r9b-facts">Key facts</h2>
          <dl class="hs-facts__list">
            <div class="hs-facts__item hs-facts__item--value"><dt>Value</dt><dd>20% off</dd></div>
            <div class="hs-facts__item"><dt>Category</dt><dd>Test prep</dd></div>
            <div class="hs-facts__item"><dt>Membership needed</dt><dd><span class="hs-status hs-status--ready">Ready to use</span></dd></div>
            <div class="hs-facts__item"><dt>How to redeem</dt><dd>Enter the code at checkout on the partner site.</dd></div>
          </dl>
          <div class="hs-facts__action">
            <a class="hs-button hs-button--block" href="/benefits/example-learning-co/redeem" data-ph-capture-attribute-cta="redeem" data-ph-capture-attribute-cta-loc="detail">Get the code</a>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>

Notes

Scholarship detail:

Breadcrumb: Home / Scholarship directory / name. Eyebrow: "Scholarship" and the provider's domain.
Facts: amount (only when parsed from the name), offered by (the domain; "Honor Society®" for the site's own awards), who it is for, type.
Action: "Apply on {domain}" for an external award, with the leave-the-site note. The site's own awards link to their award page ("View the scholarship"); that page is the R2 award detail.
Related: three award cards that share a mapped topic.

Benefit detail on this recipe:

Facts: value, category, membership needed (a --ready or --locked status), how to redeem. The redeem area is the facts action.
A benefit above the viewer's tier: a --locked status names the tier and the action routes to the tier page.
The terms move into the .hs-disclosure block under an h3 in the main column. Copy every paragraph; legal text is never cut.
Keep the benefits module's AJAX targets inside the facts panel; the panel markup wraps them.

University detail on this recipe:

Breadcrumb: Home / name is two steps, so it stays in the schema only. Eyebrow "University", H1 the name.
Facts: city and state from the address, website (one plain link), number of honor society chapters. Action: none, or "View on Google Maps" as the facts note link (a search URL, no map embed).
Main column: about, majors as a list, "Honor societies at {name}" as a link list of published chapters. Every value escaped.
Related band: leave it out. The CTA band invites the visitor to join.

Dynamic parts that need code: every value in the head, the facts and the related cards; the topic links into the filtered catalog; the action URL and its external note; the JSON-LD.

The hs_mcp validator: not used. These pages are built in code.