COMPONENTS / ORGANISMS / al-logo-wall← ALL COMPONENTS

Logo Wall

<al-logo-wall>betaOPEN IN FIGMA ↗

The client logo band — a wrapping row of monochrome marks that come up to full strength on hover.

PLAYGROUND1 CONTROL
PREVIEW / al-logo-wall / SOUTHLEFT
Loading preview
IBMGoogleDocuSignCignaPetSmartToastUlta BeautyState Farm
FLAGS
CODE — HTML
Guidance
AUTHORED · CITED TO SOURCE
A row of client or partner logos, normalised to one optical height and one contrast treatment so a set of wildly different source files reads as a single band.
WHEN TO USE
  • You are showing social proof as a group of marks, and the group matters more than any individual logo in it.
  • The source images are inconsistent in colour and weight and need the wall's normalising filter to sit together.
WHEN NOT TO USE
  • There is one mark and it is the site's own. The brand mark is its own component with its own link behaviour.USE LOGO →
  • Each logo needs to link to a case study, which makes this a list of destinations rather than a band of proof.USE CARD →
DO
  • Give every image real alt text naming the organisation. The wall is a claim about who you work with, and that claim should survive with images off.
  • Use vivid when the logos are the point rather than the backdrop; it drops the flattening filter and lets the marks keep their own colour.
DON’T
  • Do not mix logos with wildly different aspect ratios and expect the wall to fix it. It normalises height, not proportion.
  • Do not put more marks in than fit on one row at the narrowest supported width unless you have decided how it wraps.
ACCESSIBILITY IN PRACTICE
  • The default treatment flattens every mark to a single tone, so contrast comes from the surface behind it. Check the wall in both modes rather than only the one you designed on.
CONTENT GUIDELINES
  • Use each organisation's own name in the alt, not a description of the logo. A reader needs the company, not the shape.
WHERE THIS CAME FROM
  • libs/sl-web-components/components/logo-wall/logo-wall.tsThe component this guidance describes.
  • libs/sl-web-components/components/logo-wall/logo-wall.scssThe vivid attribute drops the normalising filter, which is what the second recommendation 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
IN SYNCSouthleft Design SystemFIGMA SET · Logo Wall
Code and the Figma component set matched at the last confirmed sync, and neither has changed since.
DECIDED BY
CONTRACT DIFF
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
1 ATTR · 1 SLOT · 0 EVENT · 1 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/logo-wall
import '@southleft/sl-web-components/components/logo-wall';
API — 1 PROPS1 DOCUMENTED
PROPTYPEDEFAULT
vividbooleanRender the marks at full strength instead of knocked back. For a page where
the logos are the subject rather than social proof in passing.—
SLOTS1
SLOTDESCRIPTION
(default)The logo images. Sized and treated by the component; pass them at their natural dimensions.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS1
PARTDESCRIPTION
wallThe wrapping row.
CSS CUSTOM PROPERTIES6
PROPERTYDESCRIPTIONDEFAULT
--al-logo-wall-heightOptical height every mark is normalised to. Defaults to `1.75rem`, and `2rem` from the `48rem` breakpoint up.—
--al-logo-wall-opacityResting opacity. Defaults to `0.5`.—
--al-logo-wall-gapRow and column gap, in that order. Defaults to `3rem 3.5rem`.—
--al-logo-wall-filterThe knock-back treatment. Defaults to `brightness(0) invert(1)`, which silhouettes each mark and flips it white — correct on a dark canvas and INVISIBLE on a light one. Set it to `brightness(0)` in light mode; the component cannot detect mode from inside its shadow root.—
--al-logo-wall-filter-hoverFilter on hover/focus. Defaults to the resting filter. Set it to `grayscale(0) invert(0) contrast(1)` to reveal each mark's real colours.—
--al-logo-wall-opacity-hoverOpacity on hover/focus. Defaults to `1`.—
SOURCE — components/logo-wall/logo-wall.ts · Organisms/Logo Wall