shadcn.io is not affiliated with official shadcn/ui
Split Monogram Grid Logos Block for React
Nine customers as square monogram tiles in a hairline grid at the start, and a headline, one sentence and two calls to action at the end.
Installation
Overview
A split logo block for React with Base UI, reversed. At the start, nine customers as square tiles in three columns and three rows, sharing hairlines that run to the start rail: each tile is a two-letter monogram set in a mono face, bare, in a ring or knocked out of a filled square, over the customer's name. At the end, past a divider that meets the page's top rule at a + mark, a headline for a dispute-management product, "Disputes settled before they become churn", one sentence and two calls to action, the Shine Button and an outline button. The copy comes first in the document, so a phone and a screen reader meet it before the tiles. Built from Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For customers that don't have logos yet.
FAQ
How do I change the customers?
Edit MERCHANTS at the top of the file. Each entry is a name, a two-letter monogram and a frame (plain, ring or badge). Keep nine: three across and three down fill the grid, and the tiles stay square at every width. The names are fictional placeholders for your own customers.
Why is the copy first in the markup if the tiles are at the start?
So the reading order is headline, then proof. On a large screen the tiles are placed in the first column with the grid, and the copy in the second; on a phone they simply follow the copy. Nothing is reordered with order.
Where do the buttons go?
Both are links (href="#"): point See how merchants win at your stories and Book a demo at your scheduler. The first is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
Each button renders the link it's given with render, with nativeButton={false}.
What happens in a right-to-left layout?
The layout mirrors: the tiles stay at the start of the line and the copy at the end, and the divider follows. Monograms and names keep their own direction, as a logo would.
Related
- Pro
Sixteen square monogram tiles for a wildfire-risk mapping product in a narrow framed panel with + corner marks, each tile naming its customer on hover.
- Pro
A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.
- Pro
Split Open Grid Logos
SplitsA headline, one sentence and a Shine Button at the start, and nine customers open in three columns and three rows at the end, with the divider as the only line.
- Pro
Split Tall Tiles Logos
SplitsFour customers as tall tiles held apart at the start, each its own hairline box with a Since line, and a headline, one sentence and a Shine Button at the end.
- Pro
A strip for a children's reading app: a label row with a pause button, then one row of chips, each a square monogram badge and the name of a school.
- Pro
Split Linked Cells Logos
SplitsA card-in-card split: a headline, one sentence and a Shine Button, beside eight customers as linked cells that show a Read story arrow on hover and focus.