Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Numbered Ranking Logos Block for Vue

Ten customers of an onboarding product ranked 01 to 10 in rows that run from rail to rail, each with a counter, a wordmark and its industry, collapsing to five on a phone.

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 ranked customer list for Vue with Ark UI. A compact header, "The ten teams onboarding the most people", says how the list is ordered, and an ordered list of ten rows runs from rail to rail beneath it. Each row is a band whose top rule meets the rails at + marks: a two-digit counter in a monospace, the customer's wordmark in its own lettering, and its industry at the end; the top three counters are set darker. From md all ten rows show. A phone shows the first five and a ghost button, "Show all ten", that reveals the rest in place. The last row ends the block, so the next section's top rule closes it. Built from Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a launch roster, a leaderboard of customers or any proof that gets stronger the longer it runs.

FAQ

How is the ranking set?

By the order of CUSTOMERS at the top of the file: the first entry is rank 01. The counter is generated from the index, so reordering the data renumbers the rows. Say in the header what the ranking measures; the sample says new hires onboarded in the last twelve months.

Does a screen reader hear the ranking?

Yes. The rows are an ordered list named "Customers, ranked by new hires onboarded", so a screen reader announces each position itself; the visible counters are hidden from assistive technology so the number isn't read twice.

How does Show all ten work?

Below md only the first five rows show, and a ghost button under the list reveals the other five in place. The button keeps its label and carries aria-expanded and aria-controls for the list, with a chevron that turns over. The hidden rows are removed from the page's reading order with display: none, not left to a screen reader. From md the button is gone and every row shows. PREVIEW sets how many a phone shows.

Can I drop the darker top three?

Yes: set PODIUM to 0 and every counter takes the muted colour, turning darker only on hover. Raise it to mark more rows.

What happens in a right-to-left layout?

The rows mirror: the counter sits at the start of the line and the industry at the end, on whichever side that is. Each wordmark keeps its own direction, as a logo would, and the counters stay in reading order.

What moves, and what happens with reduced motion?

The header and the list fade up once when the page loads, with CSS transitions, and a row's colours ease on hover. With reduced motion the transitions are off, and the section simply appears.

All 100 logos blocks