Hero

WHEN TO USE

• The page is a landing page and this is its first screen, the thing a visitor sees before they have decided to read anything.
• You need the brand's grid texture and glyph field as the backdrop, rather than a plain surface a section could sit on.
• There is a supporting artefact worth showing beside the copy (a terminal panel, a product shot, a live demo), which goes in the aside slot.

WHEN NOT TO USE

• The composition you need is "headline spans the full measure, two columns start below it". This component pairs its content column WITH the aside, so the headline cannot span the full width — southleft.com's own homepage hero is that full-width shape, and it deliberately composes it from al-layout with al-heading/al-text-block/al-button as the primitives instead of wrapping al-hero ("stop fighting the component"). Reaching for this component there means fighting its anatomy, not configuring it.
• This is an interior page and you want a title band, not a landing composition. The band shape exists as its own component and does not carry the texture.USE PAGE-HERO →
• You are opening a section in the middle of a page rather than the page itself. A section wants a rule, a label and a heading, not a full-bleed composition.USE SECTION-HEADER →
• What you actually need is the closing ask at the bottom of the page. That is a different component with its own padding and a centred stack.USE CTA-BAND →

DO

• Put the primary and secondary action in the actions slot and let the component space them; it is a row that wraps on its own.
• Keep the headline near 18 characters per line at the display size. --al-hero-heading-max-width is the knob for that, not a manual line break.

DON’T

• Do not nest a second heading of display rank inside the aside slot; the composition already has exactly one loudest element and a rival flattens it.
• Do not put anything a reader must act on into the chips slot. The reference treats it as annotation and marks it aria-hidden.