Loading…

Logo cloud simple

Block

A heading, a line of copy and a still grid of customer logos, dimmed until hovered or focused.

Sections
0 components
1 file

You're in good company

Trusted by leading teams from around the world

Lumen
Halcyon
Meridian
Tessera

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add logo-cloud-simple

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { DEFAULT } from "@/components/blocks/logo-cloud-simple"; export default function Page() {  return <DEFAULT />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

API

<LogoCloudSimpleBlock>

Prop	Type	Default
`description`	`ReactNode`	`"Trusted by leading teams from around the world"`
`heading`	`ReactNode`	`"You're in good company"`
`headingLevel` Level of the section heading.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`logos`	`LogoCloudSimpleLogo[]`	`DEFAULT_CLOUD_LOGOS`

Plus every attribute of <section> except title.

Accessibility

One section landmark named by its heading (level set with `headingLevel`). The logos are a list; each is named by its organisation's `name`, announced once — the logo graphic itself is aria-hidden so an SVG with no title or an image with a stray alt cannot double or garble it. Linked entries are real links with the shared focus ring, and focus brightens an entry exactly as hover does.