Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Numbered Feature Highlights Banner Block for Ark UI

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.

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 numbered feature highlights banner for React with Ark UI, for a release with a few changes worth reading about. A heading and a line sit at the start; at the end an accordion in a frame, its corners marked with + crossings, has three rows numbered 1, 2 and 3 beside each highlight's title. One row is open at a time, the first by default; opened, a row shows one sentence and an underlined link, and its number fills in. It's built from Accordion and Guides, and it follows your theme.

FAQ

How do I change the highlights?

Edit HIGHLIGHTS at the top of the file: each entry has an id, a title, a detail sentence, and a link with its href. Keep the sentences about the same length, so opening another row hardly changes the block's height.

How do I choose which row starts open?

Set defaultValue on Accordion to an array holding the item's value.

How is it named for screen readers?

Each title is a button inside its own heading (h3, under the heading above it), so a screen reader user can jump between highlights; the button reports expanded or collapsed and opens with Enter or Space. The numbers are decoration and hidden from assistive technology, so they never become part of a name. The block is a labelled section.

Does the block move when I open another row?

Only by the difference between the two panels. They are one sentence and one link each, written to run to the same number of lines, so switching rows barely moves anything. Closing the open row does shorten the block, as any accordion does.

What moves, and what happens with reduced motion?

The frame fades up once on load, the panel's height eases open and the number fills in, with CSS. Reduced motion removes the fade and the number's transition.

How does it fit on a phone?

The heading sits above the framed accordion at full width. Rows wrap to two lines when a title is long, and panels indent under the title, not under the number. Nothing scrolls sideways at 320 pixels.

All 100 banner blocks