The site header landmark and its chrome. Header owns the `<header>` element, the opt-in sticky/elevated behaviour and the stacking context. Arrangement is `<al-layout>`'s job — nest one and lay the bar out there.
PLAYGROUND2 CONTROLS
PREVIEW / al-header / ALTITUDE
Loading preview
ComponentsTokensPatternsMK
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYALTITUDE DESIGN SYSTEM
NOT IN FIGMAAltitude Design System
This component exists in code and has no Figma component set.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
2 ATTR · 1 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEheader--BrandNavActionsPASS
Advanced statesAXE4 further storiesPASS
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
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 5 STORIES.
import '@southleft/al-web-components/components/header';
import { ALHeader } from '@southleft/al-react';
API — 2 PROPS2 DOCUMENTED
PROPTYPEDEFAULT
stickybooleanStick the header to the top of its scroll container.—
elevatedbooleanCast a shadow under the bar to separate it from the content it scrolls over.—
SLOTS1
SLOTDESCRIPTION
(default)The header content. Wrap it in an `<al-layout>` to arrange it.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS CUSTOM PROPERTIES5
PROPERTYDESCRIPTIONDEFAULT
--al-header-min-heightMinimum bar height. Defaults to `--al-theme-layout-height-header`. A MINIMUM, not a fixed height, so a wrapping header grows instead of clipping.—
--al-header-paddingInline/block padding around the content. Defaults to `--al-theme-space`.—
--al-header-backgroundBar background. Defaults to `--al-theme-color-background-neutral-default`.—
--al-header-border-block-endHairline rule under the bar. Defaults to `none`. Use instead of `elevated` when a translucent bar should read as a rule rather than a lift.—
--al-header-backdrop-filterFilter applied to what scrolls behind the bar, e.g. `blur(12px)`. Defaults to `none`. Pair with a translucent `--al-header-background`.—