COMPONENTS / ORGANISMS / al-cta-band← ALL COMPONENTS

CTA Band

<al-cta-band>beta

The closing call-to-action band that ends 16 of the site's 24 pages: a full-bleed surface with the brand's grid texture behind it, a kicker, a centred display heading and lead, and the page's actions below.

PLAYGROUND0 CONTROLS
PREVIEW / al-cta-band / SOUTHLEFT
Loading preview
Book a call Ask about a workshop
CODE — HTML
Guidance
AUTHORED · CITED TO SOURCE
The closing ask. A full-width band with the brand's grid texture, a kicker, a centred heading and dek, and whatever actions you slot in. It is the last thing on a page and it exists to be acted on.
WHEN TO USE
  • A page has finished making its argument and needs one clear next step before the footer.
  • The same ask repeats across several pages and should look identical on every one of them.
WHEN NOT TO USE
  • The action belongs beside the content it relates to rather than at the end of the page. An inline action does not need a full-width band.USE BUTTON →
  • You are opening the page rather than closing it, and want the landing composition with a supporting panel.USE HERO →
DO
  • Keep it to one primary action plus at most one secondary. A closing band with four equal choices closes nothing.
  • Slot the actions rather than styling your own; the default slot centres them and wraps them on narrow screens already.
DON’T
  • Do not place two CTA bands on one page. The second is evidence that the first ask was not the real one.
  • Do not use it as a section divider. Its block padding is tuned to end a page, and mid-page it reads as a false ending.
ACCESSIBILITY IN PRACTICE
  • The grid texture is decorative and marked aria-hidden, so it is never announced; the heading remains the band's only landmark-relevant content.
CONTENT GUIDELINES
  • The heading is a question or an invitation, not a label. This is the one place on the page addressing the reader directly.
WHERE THIS CAME FROM
  • libs/sl-web-components/components/cta-band/cta-band.tsThe component this guidance describes.
  • libs/sl-web-components/components/cta-band/cta-band.tsThe decorative texture the accessibility note rests on.
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 · CTA Band
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
4 ATTR · 1 SLOT · 0 EVENT · 7 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/cta-band
import '@southleft/sl-web-components/components/cta-band';
API — 4 PROPS4 DOCUMENTED
PROPTYPEDEFAULT
headingstringThe band's heading.—
dekstringThe lead paragraph under the heading. Omit for none.—
kickerstringThe accent kicker above the heading. Defaults to the brand's `<cta>` form.'<cta>'
heading-tagstringThe heading's semantic level — a document-outline concern, so not fixed.'h2'
SLOTS1
SLOTDESCRIPTION
(default)The band's actions. Wrap them in an `<al-layout>` to arrange them — a row that wraps to a stack is the usual choice.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS7
PARTDESCRIPTION
bandThe full-bleed outer band. The top hairline lives here.
textureThe decorative grid layer. Hide it with `display: none` where a page wants a plain band.
innerThe centred, measure-capped content column.
kickerThe accent kicker.
headingThe `<al-heading>`.
dekThe lead paragraph.
actionsThe wrapper around the slotted actions.
CSS CUSTOM PROPERTIES4
PROPERTYDESCRIPTIONDEFAULT
--al-cta-band-padding-blockThe band's vertical rhythm. Defaults to `6rem`, and `8rem` from the `48rem` breakpoint up.—
--al-cta-band-max-widthMeasure the content column is capped to. Defaults to `85rem`.—
--al-cta-band-heading-max-widthMeasure the heading is capped to. Defaults to `48rem`.—
--al-cta-band-dek-max-widthMeasure the lead is capped to. Defaults to `32rem`.—
SOURCE — components/cta-band/cta-band.ts · Organisms/CTA Band