Hero

Summary

Hero creates a prominent introductory section that pairs a headline, supporting text and a call-to-action with a media asset. It adapts to the viewport: on small screens (xs) content stacks vertically with the asset on top; on wider screens (md) content sits on the left and the asset on the right. Three optional slots (slotContent, slotAsset, slotEnd) let teams extend it without breaking the layout.

Anatomy

• 1
  Hero — root container. Radius 20; drop shadow shadow-bevel (card appearance).
• 2
  slotAsset — media/image slot. On md to the right; on xs stacked above content.
• 3
  Badge — optional status badge above the heading (variant neutral / appearance default).
• 4
  Heading — primary title / value proposition.
• 5
  subHeading — supporting text below the heading.
• 6
  slotContent — slot for inputs, search fields or other components.
• 7
  Stack — inner content column (max-width 320).
• 8
  Button — primary CTA (variant accent / appearance fill / size lg).
• 9
  slotEnd — optional slot below the button.

Properties / API

Variants

Two variant axes ship in v1.3: breakpoint (xs / md — layout direction) and appearance (default / card — surface treatment).

States

Hero is a layout/composition component and exposes no interactive states of its own. Interactive state lives in nested components (Button, slotContent inputs).

Sizes

No discrete size token — footprint is governed by breakpoint: xs width 320 (max 400); md width 800. The nested Button is fixed at size lg; slots are size sm.

Breakpoints

Two breakpoint variants control layout direction (only xs and md — no separate sm/lg/xl).

Design tokens

• Surface: bg-secondary = #FFFFFF (card appearance background).
• Radius: border-radius-lg = 20.
• Spacing: 16 · 24 · 28.
• Elevation: shadow-bevel — drop #0000000a 0/2/8 + inner #ffffff00 0/0.5.

Accessibility

• Use semantic HTML; the heading establishes the page’s primary content hierarchy.
• Provide descriptive alt text for all slotAsset media.
• The CTA must carry a context-independent accessible label — avoid “Click here” / “Learn more” without supporting text.
• Keyboard: Tab moves to interactive elements; Enter activates the primary CTA.
• Screen readers announce the heading level and the button label in document order.

Usage

Implementation status

Implemented at v1.2 on the platforms below; the v1.3 appearance property and Supernova adjustments are pending. macOS not started.

Changelog

• v1.323.6.2026
  • Adjustments for Supernova sub-pages.
  • Added property appearance = default / card.
• v1.29.4.2026
  • Adjusted elements and spacings.
• v1.15.2.2026
  • md: increased asset spacing to 80px for better subheading line length; asset margin-right 48→24px.
  • (12.3.) md changed to also use Button size lg.
• v1.016.1.2026
  • Initial release.

Ticket scaffold

Jira ticket template

Jira wiki-markup. Copy into a new issue, replace every [PLACEHOLDER], and duplicate one per platform.

h2. [PLATFORM] · Hero v1.3 — add appearance (default / card) + Supernova adjustments

*Project / Epic*  : [EPIC-KEY]  Aurora AppKit · Supernova
*Issue type*      : Story
*Components*      : Hero · [PLATFORM]
*Labels*          : aurora-appkit, supernova, design-system, hero
*Priority*        : [Medium]
*Story points*    : [estimate]
*Fix version*     : Hero v1.3
*Sprint*          : [sprint]
*Assignee*        : [assignee]

h3. Background
Hero is the page-level intro (heading + supporting text + CTA + asset). v1.3 adds an {{appearance}} property for Supernova sub-pages so Hero can render on a contained card or directly on the page.

h3. Objective
Implement Hero v1.3 on [PLATFORM]: add {{appearance}} (default | card) and apply the Supernova spacing adjustments, mapped to [PLATFORM] conventions.

h3. Design source
* Figma — "Aurora AppKit · Components" -> Hero page (v1.3 Specification, Changelog frames)
* Handover spec — supernova-handover/hero.html
* [paste the platform-specific Figma frame link]

h3. Spec (platform-agnostic — map to [PLATFORM] idioms)
* New property {{appearance}} : {{default}} (transparent, no surface/shadow) | {{card}} (surface {{bg-secondary}}, radius {{border-radius-lg}} 20, {{shadow-bevel}})
* {{breakpoint}} : xs (vertical, asset on top, width 320 / max 400) | md (horizontal, content left / asset right, width 800)
* Slots : {{slotAsset}} · {{slotContent}} · {{slotEnd}} · optional status Badge · primary Button (accent / fill / lg)
* Inner spacing (both breakpoints) : stack 16 · text block 12 · heading-to-sub 4 · badge-to-text 8 · slotContent-to-button 10
* xs padding 24 (v) / 16 (h), item spacing 28 · md padding 32 (v) / 32 left / 48 right, item spacing 48

h3. Scope
In scope : {{appearance}} + Supernova spacing at xs / md; existing usages default to {{default}}.
Out of scope : nested Button/Badge internals; other platforms.

h3. Dependencies
* Button + Badge components on [PLATFORM]

h3. Acceptance criteria
# {{appearance = card}} renders a {{bg-secondary}} surface with radius 20 and {{shadow-bevel}}; {{default}} renders transparent with no surface/shadow.
# Existing Hero usages default to {{default}} (backwards compatible) or migrate per the Supernova sub-page intent.
# {{breakpoint = xs}} stacks asset above content; {{md}} places content left / asset right.
# Asset has descriptive alt text; the CTA has a context-independent accessible label.
# All surfaces/spacing bound to tokens; light and dark verified.

h3. Definition of Done
* Matches the Figma v1.3 Specification (visual diff) at xs / md, light and dark
* Tokens only; no hard-coded values
* Tests updated; reviewed and merged; version v1.3; changelog updated

h3. QA / test notes
* Toggle appearance and breakpoint; verify card vs transparent and stacked vs side-by-side
* Long heading/subheading do not overflow at xs