Page structure

Award hero

The navy opening band of one award page: name, facts, and a deadline card with the Apply button.

Block: .hs-award-hero
CSS: components/award-hero.css (in /brand.css)
JS: None
Status: Decided
Decided in: Components round 2a
Markdown: /components/award-hero.md

What it is

The opening band of one award page. Navy ground: eyebrow, H1 with no rule, lead, then the award facts. A white deadline card holds the next deadline and the one gold Apply button, and hangs into the next band. The band after the hero must follow it directly: it pads back the overhang. On a phone the card follows the facts, and the deadline and Apply stay above a 700px fold with 2 to 5 facts and the longest title. Decided: option C on the award hero page.

When to use

The opening band of one scholarship page (recipe R2), such as the Study Abroad Scholarship.
An award with 2 to 5 facts in total, the deadline included.

When not to use

A conversion or utility page: use the Page head.
The homepage or a landing page: use the Hero.

Rules

Compose it as <header class="hs-band hs-band--navy hs-award-hero" data-section="hero">, then .hs-container.hs-award-hero__inner with __text and __card. Load award-hero.css after band.css.
Text column: the Breadcrumb (Home / Scholarships / award name), the eyebrow, .hs-heading--h1.hs-award-hero__title with no --rule, .hs-lead.hs-award-hero__lead, then <dl class="hs-award-hero__facts">. Each fact is a <div class="hs-award-hero__fact"> with one dt.hs-award-hero__label and one dd.hs-award-hero__value.
Give the hero 1 to 4 facts. The amount comes first, with hs-award-hero__fact--amount.
Card: the “Next deadline” eyebrow, the date in <time datetime> inside .hs-award-hero__date, the rolling rule in .hs-award-hero__note, then .hs-actions.hs-award-hero__actions with the one gold Apply button and a text link under it. Both routes carry data-ph-capture-attribute-cta-loc="hero".
Print the date the page shows today. A fully static page cannot compute it: print only the rolling rule (“the 28th of every month”) and drop the <time>.
A page built from the body alone starts with this band. Copy the snippet whole, breadcrumb included. It holds the page’s only h1; every other band opens with h2.
The Apply button reads Apply now. It is the award-page exception to the site-wide Start Free Membership.
Put the next band directly after the hero, as its sibling. .hs-award-hero + .hs-band pads back the card overhang. On an award page that band is the anchor nav.

Accessibility

The facts are a <dl>, so each label stays paired with its value.
<time datetime> gives the deadline in machine-readable form.
The labels and the lead are white 86% on navy: 6.4:1 at the gradient’s lightest corner. The date is navy on white: 12.4:1.
The card resets the ground context, so its eyebrow, button and link use the light-ground colours.

Variants

Award hero

Four facts: the amount, two facts in the hero, the deadline in the card. The breadcrumb opens the text column. The next band is the anchor nav, as on an award page.

Full-width preview: the snippet sets its own ground

Honor Society® scholarships

Study Abroad Scholarship

For students pursuing a study abroad program that connects with their education, personal development, and future goals.

Award: $1,000
Who can apply: Applicants with a planned study abroad program
Membership: Not required

Next deadline

October 28, 2026

Rolling: the 28th of every month

Apply now See what you’ll need

<header class="hs-band hs-band--navy hs-award-hero" data-section="hero">
  <div class="hs-container hs-award-hero__inner">
    <div class="hs-award-hero__text">
      <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="/scholarships" data-ph-capture-attribute-cta="scholarships" data-ph-capture-attribute-cta-loc="hero">Scholarships</a></li>
          <li class="hs-breadcrumb__item" aria-current="page">Study Abroad Scholarship</li>
        </ol>
      </nav>
      <p class="hs-eyebrow">Honor Society&reg; scholarships</p>
      <h1 class="hs-heading hs-heading--h1 hs-award-hero__title">Study Abroad Scholarship</h1>
      <p class="hs-lead hs-award-hero__lead">For students pursuing a study abroad program that connects with their education, personal development, and future goals.</p>
      <dl class="hs-award-hero__facts">
        <div class="hs-award-hero__fact hs-award-hero__fact--amount">
          <dt class="hs-award-hero__label">Award</dt>
          <dd class="hs-award-hero__value">$1,000</dd>
        </div>
        <div class="hs-award-hero__fact">
          <dt class="hs-award-hero__label">Who can apply</dt>
          <dd class="hs-award-hero__value">Applicants with a planned study abroad program</dd>
        </div>
        <div class="hs-award-hero__fact">
          <dt class="hs-award-hero__label">Membership</dt>
          <dd class="hs-award-hero__value">Not required</dd>
        </div>
      </dl>
    </div>
    <div class="hs-award-hero__card">
      <p class="hs-eyebrow">Next deadline</p>
      <p class="hs-award-hero__date"><time datetime="2026-10-28">October 28, 2026</time></p>
      <p class="hs-award-hero__note">Rolling: the 28th of every month</p>
      <div class="hs-actions hs-award-hero__actions">
        <a class="hs-button" href="/study-abroad-scholarship-0" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="hero">Apply now</a>
        <a class="hs-link" href="#requirements" data-ph-capture-attribute-cta="requirements" data-ph-capture-attribute-cta-loc="hero">See what you&rsquo;ll need</a>
      </div>
    </div>
  </div>
</header>
<div class="hs-band" data-section="anchor-nav">
  <div class="hs-container">
    <nav class="hs-anchor-nav" aria-labelledby="on-this-page">
      <p class="hs-anchor-nav__label" id="on-this-page">On this page</p>
      <ul class="hs-anchor-nav__list">
        <li><a class="hs-anchor-nav__link" href="#requirements">Eligibility and materials</a></li>
        <li><a class="hs-anchor-nav__link" href="#selection">How it&rsquo;s chosen</a></li>
        <li><a class="hs-anchor-nav__link" href="#recipients">Past recipients</a></li>
        <li><a class="hs-anchor-nav__link" href="#faq">FAQs</a></li>
      </ul>
    </nav>
  </div>
</div>

Two facts

The amount and the deadline only. The next band here is soft.

Full-width preview: the snippet sets its own ground

Honor Society® scholarships

Study Abroad Scholarship

For students pursuing a study abroad program that connects with their education, personal development, and future goals.

Award: $1,000

Next deadline

October 28, 2026

Rolling: the 28th of every month

Apply now See what you’ll need

Requirements

<header class="hs-band hs-band--navy hs-award-hero" data-section="hero">
  <div class="hs-container hs-award-hero__inner">
    <div class="hs-award-hero__text">
      <p class="hs-eyebrow">Honor Society® scholarships</p>
      <h1 class="hs-heading hs-heading--h1 hs-award-hero__title">Study Abroad Scholarship</h1>
      <p class="hs-lead hs-award-hero__lead">For students pursuing a study abroad program that connects with their education, personal development, and future goals.</p>
      <dl class="hs-award-hero__facts">
        <div class="hs-award-hero__fact hs-award-hero__fact--amount">
          <dt class="hs-award-hero__label">Award</dt>
          <dd class="hs-award-hero__value">$1,000</dd>
        </div>
      </dl>
    </div>
    <div class="hs-award-hero__card">
      <p class="hs-eyebrow">Next deadline</p>
      <p class="hs-award-hero__date"><time datetime="2026-10-28">October 28, 2026</time></p>
      <p class="hs-award-hero__note">Rolling: the 28th of every month</p>
      <div class="hs-actions hs-award-hero__actions">
        <a class="hs-button" href="/study-abroad-scholarship-0" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="hero">Apply now</a>
        <a class="hs-link" href="#requirements" data-ph-capture-attribute-cta="requirements" data-ph-capture-attribute-cta-loc="hero">See what you’ll need</a>
      </div>
    </div>
  </div>
</header>
<section class="hs-band hs-band--soft" data-section="requirements">
  <div class="hs-container">
    <p class="hs-heading hs-heading--h2 hs-heading--rule">Requirements</p>
  </div>
</section>

Five facts

Four facts in the hero wrap onto a second row; the card keeps its place.

Full-width preview: the snippet sets its own ground

Honor Society® scholarships

Highest Honors Student Scholarship

Recognizes students with an unweighted GPA of 3.80 or higher in their last semester, together with leadership, service, and broader achievement.

Award: $5,000
Who can apply: Last-semester unweighted GPA of 3.80 or higher
Membership: Not required
Recipients share: A video or written testimonial

Next deadline

October 21, 2026

Rolling: the 21st of every month

Apply now See what you’ll need

Requirements

<header class="hs-band hs-band--navy hs-award-hero" data-section="hero">
  <div class="hs-container hs-award-hero__inner">
    <div class="hs-award-hero__text">
      <p class="hs-eyebrow">Honor Society® scholarships</p>
      <h1 class="hs-heading hs-heading--h1 hs-award-hero__title">Highest Honors Student Scholarship</h1>
      <p class="hs-lead hs-award-hero__lead">Recognizes students with an unweighted GPA of 3.80 or higher in their last semester, together with leadership, service, and broader achievement.</p>
      <dl class="hs-award-hero__facts">
        <div class="hs-award-hero__fact hs-award-hero__fact--amount">
          <dt class="hs-award-hero__label">Award</dt>
          <dd class="hs-award-hero__value">$5,000</dd>
        </div>
        <div class="hs-award-hero__fact">
          <dt class="hs-award-hero__label">Who can apply</dt>
          <dd class="hs-award-hero__value">Last-semester unweighted GPA of 3.80 or higher</dd>
        </div>
        <div class="hs-award-hero__fact">
          <dt class="hs-award-hero__label">Membership</dt>
          <dd class="hs-award-hero__value">Not required</dd>
        </div>
        <div class="hs-award-hero__fact">
          <dt class="hs-award-hero__label">Recipients share</dt>
          <dd class="hs-award-hero__value">A video or written testimonial</dd>
        </div>
      </dl>
    </div>
    <div class="hs-award-hero__card">
      <p class="hs-eyebrow">Next deadline</p>
      <p class="hs-award-hero__date"><time datetime="2026-10-21">October 21, 2026</time></p>
      <p class="hs-award-hero__note">Rolling: the 21st of every month</p>
      <div class="hs-actions hs-award-hero__actions">
        <a class="hs-button" href="#award-hero" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="hero">Apply now</a>
        <a class="hs-link" href="#requirements" data-ph-capture-attribute-cta="requirements" data-ph-capture-attribute-cta-loc="hero">See what you’ll need</a>
      </div>
    </div>
  </div>
</header>
<section class="hs-band hs-band--soft" data-section="requirements">
  <div class="hs-container">
    <p class="hs-heading hs-heading--h2 hs-heading--rule">Requirements</p>
  </div>
</section>

Long title

The H1 wraps at 22ch. The card stays at the foot of the text column.

Full-width preview: the snippet sets its own ground

Honor Society® scholarships

John Young “Pursue Your Passion” Scholarship

Supports high-achieving students who want to make a professional impact in their chosen field. The award is made possible by the generosity of the Cochener family.

Award: $1,000

Next deadline

November 8, 2026

Rolling: the 8th of every month

Apply now See what you’ll need

Requirements

<header class="hs-band hs-band--navy hs-award-hero" data-section="hero">
  <div class="hs-container hs-award-hero__inner">
    <div class="hs-award-hero__text">
      <p class="hs-eyebrow">Honor Society® scholarships</p>
      <h1 class="hs-heading hs-heading--h1 hs-award-hero__title">John Young “Pursue Your Passion” Scholarship</h1>
      <p class="hs-lead hs-award-hero__lead">Supports high-achieving students who want to make a professional impact in their chosen field. The award is made possible by the generosity of the Cochener family.</p>
      <dl class="hs-award-hero__facts">
        <div class="hs-award-hero__fact hs-award-hero__fact--amount">
          <dt class="hs-award-hero__label">Award</dt>
          <dd class="hs-award-hero__value">$1,000</dd>
        </div>
      </dl>
    </div>
    <div class="hs-award-hero__card">
      <p class="hs-eyebrow">Next deadline</p>
      <p class="hs-award-hero__date"><time datetime="2026-11-08">November 8, 2026</time></p>
      <p class="hs-award-hero__note">Rolling: the 8th of every month</p>
      <div class="hs-actions hs-award-hero__actions">
        <a class="hs-button" href="#award-hero" data-ph-capture-attribute-cta="apply" data-ph-capture-attribute-cta-loc="hero">Apply now</a>
        <a class="hs-link" href="#requirements" data-ph-capture-attribute-cta="requirements" data-ph-capture-attribute-cta-loc="hero">See what you’ll need</a>
      </div>
    </div>
  </div>
</header>
<section class="hs-band hs-band--soft" data-section="requirements">
  <div class="hs-container">
    <p class="hs-heading hs-heading--h2 hs-heading--rule">Requirements</p>
  </div>
</section>