shadcn.io is not affiliated with official shadcn/ui
Dividers Minimalist Logos Block for React
Six open wordmarks for a rowing-club rota tool in one centred row, with a short vertical tick between neighbours and no cells or heading.
Installation
Overview
A still logo strip for React with Base UI. Six customer wordmarks stand in one centred row with a short vertical tick, twenty pixels tall, between neighbours: no cells, no heading, no lines but the page's top rule. Each wordmark is real text in its own lettering with an icon, muted until hovered. From lg the six share one row; below it they wrap into rows of three, then two on a phone, and the tick that would start a row is left out so one never hangs at an edge. Built from Guides and Lucide icons, with CSS for the entrance and hover and your theme's tokens for every colour. For the thin band of proof between two larger sections.
FAQ
How do I change the customers?
Edit CLUBS at the top of the file: a name, a Lucide icon, a lettering and a mark (inline, badge, ring or trailing). Six fit one row from lg and divide evenly into the two- and three-column wraps below it; with another count, adjust the nth-[…] tick rules to match the columns.
How are the ticks drawn, and why do they disappear at a wrap?
Each item has a tick on its start edge, drawn with a before: pseudo-element. The first item of every row has no tick: on a phone every second item, from sm every third, from lg only the very first. The rows are grids at those sizes, so the count of items per row is known and no JavaScript is needed.
Does it work right to left?
Yes. The ticks sit on the start edge, so they follow the direction, and each wordmark keeps its own left-to-right artwork as a logo would.
How is it marked up for screen readers?
The wordmarks are a list named "Rowing clubs on Oarlock", each item reading the club's name. The icons are hidden and the ticks are decoration only. Nothing is focusable.
Why is there no heading or sentence?
The strip is meant to be the quietest proof on the page, so the logos speak alone. The list still has a name for screen readers, "Rowing clubs on Oarlock". If your page needs a visible line, put one above the list in a muted text-sm paragraph, as the compact five-logo strip does.
Related
- Pro
Compact Five Logo Strip
StripsThe quietest logo strip: one whisper line for a restaurant-reservation product and five large wordmarks in five equal columns, with no heading, no cells and no lines but the page's top rule.
- Pro
A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.
- Pro
Seven florists of a shop point-of-sale product as overlapping icon circles like an avatar stack, a +4,000 circle and one sentence, with each name on hover.
- Pro
A slim ribbon for the foot of a page, above the footer: a label at the start and eight tiny customer wordmarks along one line, under the page column's top rule.
- Pro
One flowing sentence for an accessibility-audit tool with five customer wordmarks set inline between its words, in a quiet strip with no lines but the page's top rule.
- Pro
Centered Trusted By Logo Row Hero
Logos and social proofA compact centered hero built as bands: an announcement pill, a headline, two calls to action and three trust points, then a ruled label and a row of six customer wordmarks in divided cells.