shadcn.io is not affiliated with official shadcn/ui
Split Tall Tiles Logos Block for Vue
Four 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.
Installation
Overview
A split logo block for Vue with Ark UI, reversed. At the start, four pharmacy chains as tall tiles held apart by a gap: each is its own hairline box whose lines run a little past its corners and carry a + mark at its start corner, with the wordmark on top and a "Since" year at the foot. At the end, a headline for a refill-reminder product, "Refills ready before the customer asks", one sentence and a Shine Button. The copy comes first in the document, so a phone reads it first and the tiles follow in one column. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a section where each customer's tenure is part of the proof.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering, a mark and the year they started, since. Keep an even number: the tiles run two across from sm. The names and years are fictional placeholders for your own customers.
Why is the year written as Since 2021 and not a duration?
A duration ("3 years") goes stale the day it is printed. A fixed year stays true. The year is wrapped in a bdi element, so a right-to-left layout keeps the digits in order.
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 and the copy in the second; on a phone they follow the copy. Nothing is reordered with order.
Where does the button go?
It is a link (href="#"): point Read the pharmacy stories at your stories. It is a Shine Button, a band of light that sweeps across it once on hover and keyboard focus.
The button takes asChild with the link inside, so it can be your router's link.