Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Tall Tiles Logos Block for React

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.

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 split logo block for React with Base 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.

How does it fit on a phone?

The copy comes first, then the tiles in one column, each at least 144 pixels tall with its box and + mark kept inside the page's rails. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The copy and the tiles fade up once when the page loads, with CSS transitions, and a wordmark's colour eases on hover. With reduced motion every transition is off and the section simply appears.

  • Pro

    Split Monogram Grid Logos

    Splits

    Nine customers as square monogram tiles in a hairline grid at the start, and a headline, one sentence and two calls to action at the end.

  • Pro

    Split Headline Grid Logos

    Splits

    A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.

  • Pro

    Split Framed Grid Logos

    Splits

    A headline, one sentence and a Shine Button at the start, and six customers open in two columns and three rows inside a hairline frame at the end.

  • Pro

    Three Equal Featured Bento Logos

    Bentos

    Three customer stories of equal weight for a headless CMS, each a whole case study in its own column: a wordmark plate, an industry pill, a big figure, a two-line quote and who said it.

  • Pro

    Split Vertical List Logos

    Maps and lists

    A headline, one sentence and a Shine Button at the start, and five customers as link rows at the end, each with a wordmark, an industry chip and an arrow.

  • Pro

    Split Linked Cells Logos

    Splits

    A card-in-card split: a headline, one sentence and a Shine Button, beside eight customers as linked cells that show a Read story arrow on hover and focus.

All 100 logos blocks