COMPONENTS / ORGANISMS / al-page-hero← ALL COMPONENTS

Page Hero

<al-page-hero>beta

Southleft's INTERIOR-page hero band — an eyebrow, a display heading, a lead paragraph, and whatever the page adds below. Appears on 19 of the site's 24 pages.

PLAYGROUND1 CONTROL
PREVIEW / al-page-hero / SOUTHLEFT
Loading preview
align
CODE — HTML
Guidance
AUTHORED · CITED TO SOURCE
The title band an interior page opens with: an optional label, the page heading, and a short dek. It owns its vertical rhythm and nothing else, so the page's own stack starts immediately underneath it.
WHEN TO USE
  • The page is an interior one (a work index, an article listing, a service page) and needs a heading band before its content.
  • You want the page title and its one-line explanation to share a consistent measure and spacing across every route.
WHEN NOT TO USE
  • This is the homepage's first screen and the composition needs the texture, the two-column split and a supporting panel.USE HERO →
  • The heading opens a section inside a page rather than the page itself, and wants the numbered rule treatment.USE SECTION-HEADER →
DO
  • Let the band own its block padding through --al-page-hero-padding-block rather than adding margin to whatever follows it.
  • Set heading-tag when the band is not the page's h1, so the outline stays correct on a page that already has one.
DON’T
  • Do not use it as a section divider repeatedly down a page; its padding is tuned for one appearance at the top.
  • Do not put actions inside it. A title band that also carries buttons becomes a hero without the composition to support them.
ACCESSIBILITY IN PRACTICE
  • heading-tag exists so the rendered element matches the document outline rather than the visual rank. Set it deliberately instead of accepting the default on a page that already has an h1.
CONTENT GUIDELINES
  • The label is a category, not a sentence: one or two words saying what kind of page this is.
WHERE THIS CAME FROM
  • libs/sl-web-components/components/page-hero/page-hero.tsThe component this guidance describes.
Each line above names a file and a literal string that must still appear in it.pnpm gate:guidance re-reads them from this built page, so guidance that has stopped being true fails a check rather than misleading you.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
FIGMA AHEADSouthleft Design SystemFIGMA SET · Page Hero
The Figma set changed since the last confirmed sync — the code is behind.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
6 ATTR · 1 SLOT · 0 EVENT · 4 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITYAXE 4.12.1
Measured by axe on this documentation site’s own preview of the default story — @southleft/sl-web-components has no Storybook in the measured set.
CHECKEVIDENCEDETAILRESULT
Default stateAXEDefaultPASS
Advanced statesAXEThe docs page renders the default story only. This component’s other stories have not been measured.NOT MEASURED
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
MEASURED 2026-09-08 · 1 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA
COLOR CONTRAST0 RULES FAILING
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 1 STORIES.
INSTALL@southleft/sl-web-components/components/page-hero
import '@southleft/sl-web-components/components/page-hero';
API — 6 PROPS6 DOCUMENTED
PROPTYPEDEFAULT
labelstringThe eyebrow chip above the heading. Omit for no eyebrow.—
headingstringThe band's heading.—
dekstringThe lead paragraph under the heading. Omit for none.—
heading-tagstringThe heading's semantic level. `h1` on a page's primary hero, `h2` where the
band is a section rather than the page title — a document-outline concern,
which is why it is not fixed.'h1'
heading-variantstringHeading scale. `display-md` is the interior-page default; `display-sm` is what
an article or project band uses inside the narrower prose measure. Without
this the four hand-rolled title bands on this site could not adopt the
component at all — the variant was hardcoded.'display-md'
align'start' | 'center'Horizontal alignment of the whole band. `start` is the default; `center` is
what the 404 and quiz pages want, and it has to move the EYEBROW too — the
chip wrapper pins `align-self: start`, so text-align alone would leave it
hanging off to the left.'start'
SLOTS1
SLOTDESCRIPTION
(default)Anything below the lead paragraph — CTAs, a token strip, a form. Laid out as further children of the stack.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS4
PARTDESCRIPTION
bandThe outer band. Retune the vertical rhythm and the measure here.
eyebrowThe `<al-chip>` eyebrow.
headingThe `<al-heading>`.
dekThe lead paragraph.
CSS CUSTOM PROPERTIES4
PROPERTYDESCRIPTIONDEFAULT
--al-page-hero-padding-blockThe band's vertical rhythm. Defaults to `clamp(3rem, 6vw, 5rem)`.—
--al-page-hero-max-widthThe measure the band is capped to. Defaults to `85rem`, the site's own container width.—
--al-page-hero-padding-inlineThe side gutters. Defaults to `clamp(1.25rem, 4vw, 3rem)`.—
--al-page-hero-gapGap between the stacked items. Defaults to `--al-theme-space-md`.—
SOURCE — components/page-hero/page-hero.ts · Organisms/Page Hero