Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Company Size Tab-Filtered Logos Block for Solid

A boxed three-way size control (1-50, 51-500, 500+) over a split panel: a summary with two figures at the start, six customer wordmarks in hairline cells at the end.

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 tab-filtered logo block for Solid with Ark UI. A header, "Logged on Fathomly by 2,600 dive teams" and one sentence, carries a boxed three-way control at its end: 1-50, 51-500 and 500+, the chosen size inverted. Under it a split panel changes with the size. At the start a summary: a title ("Small crews"), a sentence on what a team of that size looks like, and two figures in a list of terms, the median team and the dives it logs a month. At the end the size's six customer wordmarks in cells that share their hairlines, rail to rail, with a split divider between the two parts and + marks where it meets the rules. The panels share one grid cell, so the block keeps its height whichever size is open. On a phone the summary sits above the logos, two across. Built from Tabs and Guides, with CSS for the entrance and the hover and your theme's tokens for every colour. For products whose customers differ most by how big they are.

FAQ

How do I change the sizes, the summaries and the customers?

Edit SIZES and CUSTOMERS at the top of the file. A size has an id, the range shown on the control, the spoken form ("Teams of 1-50"), a title, a line, and its two figures, team and dives. A customer names its size in group, with an icon, a name and a style (an index into STYLES). Keep six customers per size so the wall is full. The figures are made-up placeholders for your own numbers.

How does it work with a keyboard and a screen reader?

The control is a real tab list named "Team size": the arrow keys move between sizes (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each panel has an h3 for its title, the figures are a description list, and the logos are a list named "Customers". Ranges and figures sit in bdi elements so a right-to-left layout keeps them in order.

Why doesn't the page move when I switch sizes?

Every size's panel is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves. Panels that aren't open are not in the page's accessibility tree twice.

How is the split drawn?

The logos' column has a start border (lg:border-s) and a Guides layer with + marks, so the divider runs from the band's top rule to the foot of the block. Below lg the divider is replaced by a rule between the summary and the logos. The block ends on the wall, with no bottom rule: the next section's top rule closes it.

How does it fit on a phone?

The control becomes the full width of the header with three equal parts, the summary comes first, and the logos sit under it two across, in cells that keep their hairlines. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the panel fade up once when the page loads, and each logo's colour eases on hover. Switching sizes swaps the panel at once. With reduced motion the entrance and the hover transitions are off.

All 100 logos blocks