shadcn.io is not affiliated with official shadcn/ui
Monogram Badge Strip Logos Block for Solid
A strip of seven monogram badges for a lab-notebook product, joined like a segmented control in one rounded box, under a quiet line.
Installation
Overview
A monogram logo strip for Solid with Ark UI. Seven customers of a lab-notebook product are drawn as tiles joined like a segmented control: one rounded box, hairlines between the tiles, one outer radius and none inside. Each tile is a filled badge holding the customer's initials in its own lettering (a serif italic, a monospace, a heavy sans, spaced capitals) over its name. The badge takes the muted text colour, and hovering a tile fills it faintly and turns it to full strength. A quiet line sits above the box. Seven across from sm; on a phone four over three, each row filling the box.
FAQ
How do I change the logos?
Edit CUSTOMERS: each entry is the customer's name, the two or three initials for the badge and a lettering for them. The badge is knocked out of the text colour (bg-current) with the initials in text-background, so any monogram you can set in text works.
Why seven?
Seven fills the box in one row from sm, and on a phone it makes a row of four over a row of three. The grid is twelve columns there (four tiles span three, three span four), so both rows run edge to edge and the border colour never shows through a gap. Keep the shorter names among the first four.
How are the tiles joined?
The list is a gap-px grid on a bg-border background inside overflow-hidden rounded-xl border, and each tile is bg-background. The gaps are the hairlines, the box's radius is the only radius, and the tiles have none.
How do I use real company logos?
Replace each icon and name with the company's one-colour logo at about about size-9 tall, drawn in currentColor so it keeps the muted colour and the hover. Give an img the company's name as its alt, or an inline svg a role="img" and an aria-label. The strip needs no other change.
Is it accessible?
The tiles are a real list; each item's name is visible text and the monogram is hidden from assistive technology, so a screen reader hears "Dalbeck", not "Da". The names use text-muted-foreground at full strength, which passes WCAG AA. Nothing is focusable, so the hover fill is a visual touch only.