Logo grid · Carousel

Logo grid — a wall of partner marks.

Beta · Content blocks · packages/css/src/components/logo-grid.css

.pui-logo-chip · .pui-logo-grid (--strip) · .pui-carousel (__track __nav) · .pui-carousel-arrow · .pui-review-card (__quote __more __logo).

Logo grid · Carousel — every size and every stateOpen in the workshop

Sizes across, states down.

Logo grid — Beta

• Chips 1–6 (each chip’s Logo swap, exposed in the chips style); Has chip 5 / 6
• Style: chips (slides, a page section) · strip (the site’s hero band)

Use when a set of partner or client marks shown together — a deck’s partners slide, the site’s ‘trusted by’ band.

Do not use when one mark (Logo/*); the marks are links to products (Navigation panel); more than a dozen marks (a second grid or a carousel).

Relates to Logo chip, Logo/Mobupps, Logo/MAFO, Logo/iRTB, Logo/MobuppsX, Logo/Echo, Carousel.

Anti-patterns marks of visibly different heights in a strip · a chip grid with two gaps · a mark re-drawn · a fill changed on the instance.

Keywords: logo grid, partners, clients, trusted by, logo wall

Figma — page Logo grid & Carousel: Logo grid (2 variants) · Logo chip (1 variants)

Carousel — Beta

Carousel — a row of cards that slides, with a pair of arrows: the site’s reviews slider and its case-study sections.

• Cards 1–3 exposed (quote, logo, read more); Has card 3
• Site sections only; no product screen carries a carousel

Use when a site section with more cards than the row holds — reviews, case studies, a logo strip that scrolls.

Do not use when in a product; for three cards that fit (a row of Cards); for a single hero image.

Relates to Review card, Carousel arrow, Card, Logo grid, Aspect ratio.

Anti-patterns auto-play with no pause · dots and arrows both · a carousel of one · cards of different heights in one track · a fill changed on the instance.

Keywords: carousel, slider, reviews, testimonials, swiper, embla

Figma — page Logo grid & Carousel: Carousel (1 variants) · Carousel arrow (6 variants) · Review card (1 variants)

shadcn: carousel

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens logo-grid.css.

<div class="pui-logo-grid"><span class="pui-logo-chip"><img src="…" alt="MAFO"></span> …</div>
<div class="pui-logo-grid pui-logo-grid--strip"><img src="…" alt="…"> …</div>
<section class="pui-carousel"><div class="pui-carousel__track"><div class="pui-review-card"> …__quote, __more, __logo… </div> …</div>
  <div class="pui-carousel__nav"><button class="pui-carousel-arrow" aria-label="Previous" disabled>…</button><button class="pui-carousel-arrow" aria-label="Next">…</button></div></section>

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #f2f2f7	7.39	4.5	text.muted on surface.card (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok

2 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

primitive	on	the indicator	over	the change
Carousel arrow	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Carousel arrow	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Carousel arrow	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok
Review card more	surface/page	shadow #6a66e4 2 px	#ffffff	4.53	ok
Review card more	surface/card	shadow #6a66e4 2 px	#f2f2f7	4.06	ok
Review card more	surface/sunken	shadow #6a66e4 2 px	#f2f2f2	4.05	ok

2 of 2 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).