Design Library
View site

Client Logo Grid

Static bordered-cell grid of client logos. Each cell reveals a brief role summary — a popover on hover for pointer devices, a panel below the grid on touch.

Live Preview

Proven design experience with brands of all sizes

View Full Version

View on homepage

Layout

Desktop (lg+)

Single row of five bordered cells

Mobile / tablet

Two columns, 2–2–1, with the fifth cell spanning full width

Cell borders

Each cell draws its own dividers so borders reveal with the staggered entrance instead of flashing as a solid frame

Interaction

Pointer devices

Hover (or keyboard focus) opens a popover above the cell with the role, period and a one-line summary. A 120ms close delay prevents flicker when skimming across cells; Escape closes.

Touch devices

Tapping a cell expands a full-width detail panel below the grid. Tapping the same cell closes it, another cell swaps content, and a tap outside the section dismisses it.

Detection

(hover: hover) and (pointer: fine)

Animation Details

Entrance

FadeInStagger / FadeInStaggerItem — cells rise in on scroll with the house spring (stiffness 50, damping 20), 0.08s apart

Popover

spring — stiffness 300, damping 25

Matches the hero menu and link previews — every popover on the site shares the .popover-surface glass style and this spring.

Reduced motion

Entrance opts out via FadeIn; popover and panel fall back to opacity only

Current Clients

  • RewardPay — Freelance Product Designer
  • Monaco Lawyers — Freelance Product Designer
  • CommBank — Specialist UI Designer, 2022–2025
  • Humm Group — Digital Designer, 2020–2022
  • UNSW — Digital Designer & eDM Developer, 2017–2019

Logos and copy live in the clients array in the component. SVGs are stored in /public/images/.

Logo Styling

full opacity — source SVGs are already #9A9A9A on the dark canvasopen / hover: brightness-150 + bg-surface cell highlightpopover: .popover-surface (translucent + backdrop blur, subtle border)per-logo heightClass normalizes optical letterform size

Usage

tsx
import { ClientLogoGrid } from '@/components/sections/ClientLogoGrid'

// Default usage — data is hardcoded in the component
<ClientLogoGrid />

Import

tsx
import { ClientLogoGrid } from '@/components/sections/ClientLogoGrid'