Loading…

Logo grid tooltips

Block

A panel of grayscale logos that lift into colour and name themselves in a tooltip on hover or focus, in three to six columns.

Sections
1 components
1 file

Trusted by innovative companies

Leading organisations rely on our platform to power their success

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-grid-tooltips

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-grid-tooltips"; export default function Page() {  return <DEFAULT />;}

Built from

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

Tooltip

API

<LogoGridTooltipsBlock>

Prop	Type	Default
`description`	`ReactNode`	`"Leading organisations rely on our platform to power their success"`
`heading`	`ReactNode`	`"Trusted by innovative companies"`
`headingLevel` Level of the section heading.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`logos`	`LogoGridLogo[]`	`DEFAULT_GRID_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 entry is named by its organisation and the graphic is aria-hidden; the tooltip only repeats that name, so nothing depends on it. The source's hover state and tooltip were pointer-only — here linked logos show both on keyboard focus too, with the shared focus ring.