Reference generated from the custom elements manifest — 3 properties, 1 slots, 0 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-heading / ALTITUDE
Loading preview
This is a heading
variant
tagName
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
FIGMA AHEADAltitude Design SystemFIGMA SET · Heading1:1 ON EVERY PROPERTYFROM TRACKED PROJECTION
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
3 ATTR · 1 SLOT · 0 EVENT · 0 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
CHECKEVIDENCEDETAILRESULT
Default stateAXEheading--DefaultPASS
Advanced statesAXE17 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 18 STORIES.
import '@southleft/al-web-components/components/heading';
import { ALHeading } from '@southleft/al-react';
API — 3 PROPS3 DOCUMENTED
PROPTYPEDEFAULT
variant'display-lg' | 'display-md' | 'display-sm' | 'lg' | 'md' | 'sm'Heading variants
- **default** renders a heading with the XL font styles
- **sm** renders a heading with the SM font styles
- **md** renders a heading with the MD font styles
- **lg** renders a heading with the LG font styles
- **display-sm** renders a heading with the Display SM font styles
- **display-md** renders a heading with the Display MD font styles
- **display-lg** renders a heading with the Display LG font styles—
tagName'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'Heading tag name
- **h1** renders an `h1` tag
- **h2** renders an `h2` tag, this is the default
- **h3** renders an `h3` tag
- **h4** renders an `h4` tag
- **h5** renders an `h5` tag
- **h6** renders an `h6` tag'h2'
isBoldbooleanIs bold?
- **true** Renders the heading with semibold font weight
- **false** Renders the heading with regular font weight—
SLOTS1
SLOTDESCRIPTION
(default)The heading content
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.