Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Metric Divider Dual Marquee Logos Block for Vue

Two rows of customers of a ferry-timetable service with a band of figures between them: sailings a day, countries and operators, and the pause button for both rows.

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 two-row logo marquee with figures between the rows for Vue with Ark UI. Under a centred header, a row of customer wordmarks, then a band of figures in one description list (sailings a day, countries, operators), cells divided by hairlines with the pause button for both rows at the band's end, then a second row in the other direction. The band's rules meet the page rails at + marks. The rows fade out at both ends, and the second row ends the block. It's built from Marquee, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a product with both a long customer list and numbers to match.

FAQ

How do I change the figures?

Edit METRICS at the top of the file: each entry is a value and a label. They sit in one description list with the label under the value, so a screen reader hears "Sailings a day, 12,000+". The third figure is hidden on a phone so the first two and the pause button fit at 320 pixels.

Why are the values in a bdi element?

A figure that carries a sign or a unit is wrapped in bdi so a right-to-left page keeps "12,000+" in reading order instead of moving the plus sign to the wrong side.

How does it stop?

Four ways: the pause button at the end of the figures band (a toggle with aria-pressed that stops both rows), hovering a row, focusing into a row, and the visitor's reduced-motion setting, which stops both rows and leaves them as rows you can scroll by hand. The pause button is hidden with reduced motion.

How do I change the customers?

Edit FIRST_ROW and SECOND_ROW: each entry is a Lucide icon, a name, a lettering and a mark. Keep eight or more per row so a row never shows the same logo twice at once.

How is it marked up for screen readers?

Each row is a region named "Customer logos, first row" or "second row"; the first copy holds each customer's name as text, and the looping copies are hidden from assistive technology and can't be focused. The figures are a real description list.

All 100 logos blocks