Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Monogram Tiles Static Grid Wall Logos Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A monogram logo wall for Svelte with Ark UI. Under a centred header, "Trusted by 1,200 forest districts", sixteen square tiles sit in a narrow max-w-4xl frame with + marks at its corners, the tiles sharing their hairlines. Each tile is a short monospaced monogram (initials, brackets, slashes, a trailing dot) muted until hovered, when it lifts a little and the customer's name appears under it. Eight tiles across in two rows from sm; four across on a phone, showing the first twelve. Built from Guides, with CSS for the entrance and hover and your theme's tokens for every colour. For customers with no logo worth setting, or a wall that should stay quiet.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file: a name, the monogram text to show and a lettering (weight and tracking). Keep monograms to four characters or fewer; they are set in text-xl mono in tiles that are about 60 px wide on the smallest phone.

How many tiles should there be?

A multiple of eight, so the two rows of eight are full, and the phone count (PHONE_COUNT, twelve) a multiple of four. The wall's cells share hairlines through a gap-px bg-border grid, so a short last row would show the border colour as a block.

How does the name on hover work?

It is plain CSS inside the tile: a small invisible label that fades in on hover. Nothing is focusable, so there are no tab stops; every name is also sr-only text in its list item, and the monogram itself is hidden from assistive technology.

How is the frame drawn?

A box with max-w-4xl holds a Guides component with extend="sm" and marks="corners", which draws the outline, the small overshoot at each corner and the + marks. The tile grid sits inside it, inset from the page rails so the overshoot never touches them.

How is it marked up for screen readers?

The header is an h2 and the tiles are a list named "Customers", each item reading the customer's name. The monograms are not announced.

All 100 logos blocks