Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Icon Features Split Banner Block for React

A platform claim for an infrastructure product: a tinted half with the headline and a docs link, and three capabilities on shared hairlines, each with a framed icon tile, a title and one line.

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 banner for React with Base UI, for the claims a platform wants every visitor to see: how fast, how safe, how close. Between the page's rails, a split on a solid divider that meets the top rule: the start half is a faint tint with the headline, "Production-ready infrastructure out of the box", and a text link to the docs; the end half is three capabilities, "200 ms p99", "SOC 2 Type II" and "12 regions", each an Item with a framed icon tile, a title and one line, separated by shared hairlines. On a phone the halves stack under a rule and the three become rows. It's built from Item and Guides, with your theme's tokens for every colour. For platform pages, security overviews and any claim that comes in threes.

FAQ

Are the numbers real?

They are placeholders for a fictional platform, so replace them with figures you can prove: a latency figure with the percentile and what it is measured on, a certification with its report type, a region count that matches your status page. The lines under the titles say what each number covers; keep that, because a bare number is easy to doubt.

How do I add or change a capability?

Edit the CAPABILITIES list: an icon, a title and a line each. The end half is a three-column grid from lg, so three fit; a fourth would need lg:grid-cols-4 and a narrower start half, or a second row.

Which icons does it use, and can I swap them?

Three Lucide icons (a gauge, a shield and a globe) in a small bordered tile on the muted tone. Any icon works: the tile is an Item media with variant="icon", and the icon is hidden from screen readers because the title says the same thing.

What happens in a right-to-left layout?

The halves swap sides and the three capabilities run from the right. The title is wrapped in bdi, so figures like "200 ms p99" keep their order, and the arrow on the docs link turns around.

How does it fit on a phone?

The tint half comes first, then the capabilities as three rows under a rule, each with its icon at the start. The block stays about 450 pixels tall at 393 pixels wide, and at 320 pixels nothing scrolls sideways.

  • Pro

    Dual Actions Split Banner

    Split callouts

    A two-way fork for a component library: a tinted half with a short heading, and two ruled rows on a divider, each a whole-row link with a line about where it leads and an arrow.

  • Pro

    Numbered Feature Highlights Banner

    Numbered lists

    Three numbered highlights for a workflow tool as a framed accordion: open one row to read a sentence and a link, one at a time, beside a heading.

  • Pro

    Two-Tone Split Banner

    Split callouts

    A seasonal offer on a split: a tinted half with 40% off in display type, and a plain half with the struck list price, the worked-out sale price per seat and a Shine Button.

  • Pro

    Dual Stat Metric Banner

    Metrics

    A two-figure metric banner for a store dashboard: two cells split by a hairline, each with a label, a big figure, its change on last week, a thin bar to the weekly goal and that share in words.

  • Pro

    Bento Grid Features

    Bentos

    A bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.

  • Pro

    Split Layout Feature Badges Hero

    Features and tables

    A split hero between solid rails: a headline and a Shine Button beside five feature rows ruled as bands, each with an icon tile, a label and a one-line description.

All 100 banner blocks