# Award hero > The navy opening band of one award page: name, facts, and a deadline card with the Apply button. - Block class: `.hs-award-hero` - CSS: `components/award-hero.css` (also inside https://brand.honorsociety.org/brand.css) - JS: none - Status: decided - Decision record: https://brand.honorsociety.org/decisions/components-round-2a.html - Variants: Award hero, Two facts, Five facts, Long title - HTML page: https://brand.honorsociety.org/components/award-hero/ ## 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](/decisions/award-hero/). ## 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](/components/page-head/). - The homepage or a landing page: use the [Hero](/components/hero/). ## Rules - Compose it as `
`, then `.hs-container.hs-award-hero__inner` with `__text` and `__card`. Load `award-hero.css` after `band.css`. - Text column: the [Breadcrumb](/components/breadcrumb/) (Home / Scholarships / award name), the eyebrow, `.hs-heading--h1.hs-award-hero__title` with no `--rule`, `.hs-lead.hs-award-hero__lead`, then `
`. Each fact is a `
` 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 `