Skip to content

app-landing

renderAppLanding(options) returns the children of the consumer’s main#main. Place it in <main id="main" class="wtk-main wtk-app-landing"> and pass that to renderPageShell with mainWidth: "nav", rounded type and the wash canvas. One template generates JavaScript, Python and Liquid. Contract: docs/contract/components/app-landing.md, revisions 1–3.

The three app datasets reproduce the effective sametal.co source values, including the page heading cascade and tint-coloured secondary action. The source-parity table is captured before implementation and checked at nine widths in both schemes and engines.

Media is optional: without it the hero is text-led. heroMedia accepts src, srcDark, alt, width, height and trusted responsive <source> markup in sources. Mark dark alternatives with data-wtk-media-dark; the package reflects the resolved site scheme, and falls back to the light image after a dark load fails. The generated dark source precedes the verbatim responsive list, so an unconditional light source cannot mask resolved dark. Disabling the dark source restores responsive light selection, including after a failed dark load. Native picture selection works without script. heroMediaHtml takes precedence and rejects style/script elements or attributes and on* attributes with wtk-contract-error-static-html.

slug writes the tooling marker immediately after data-app-hero; attributes adds other picture attributes; reserved tooling markers in that list are ignored in favour of the ordered markers and slug. The icon keeps app-icon for the consumer’s asset publisher. The consumer continues to own the hero and transitions sheets used by the apps hub.

featuresHeading is required for a nonempty feature list. featuresHeadingHidden hides it visually while keeping the heading and section label accessible. featuresEyebrow is optional. marker: "icon" requires every feature’s decorative image; numbered markers are the default. glassSize defaults to card, with feature available for later Shared adoption. pro and note are optional.

Text is escaped, including detail and action labels. Description, feature text, pro text and note are trusted fragments. Missing, empty, null and false optional values are absent. Links use native Enter activation and the package focus ring. No custom keyboard, focus trap or Escape behaviour is introduced. CSS grid, flexbox and :has() use the package’s generated Baseline table; balanced headings are an enhancement behind @supports.

The store-badge fixture supplies its own placeholder artwork and static first slide. Shared’s eventual artwork, montage adapter, price line, unboxed hero, feature breakpoint and other redesign deltas remain decisions for its preview.

burn-rate · light
burn-rate · dark
house-rules · light
house-rules · dark
out-the-rudes · light
out-the-rudes · dark
text-led · light
text-led · dark
minimal · light
minimal · dark
store-badge · light
store-badge · dark