shadcn.io is not affiliated with official shadcn/ui
Split Layout Feature Badges Hero Block for Solid
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.
Installation
Overview
A split hero with a stack of feature badges, for Solid with Ark UI, drawn on the same solid rails as the pricing blocks. On one side, a static "Now generally available" badge, a bold two-line headline, a subtitle that says what the fictional managed database is, a Shine Button and an outline Button as links. A hairline divider, with a + mark where it meets the top rule, separates it from a tinted panel on the other side: five feature rows as ruled bands, each with an icon tile, a label and a one-line description, with + marks where every rule meets the divider and the rail. The copy fades up once on load and the rows come in from the end side one after another, with CSS transitions; nothing moves for visitors who ask for reduced motion. Made for infrastructure products, developer tools and B2B SaaS that sell on a handful of concrete guarantees: latency, encryption, regions, uptime and safe deploys.
FAQ
How do I change the feature rows?
Edit the FEATURES array at the top of the file. Each entry is a label, a one-line description and a Lucide icon component, rendered as a row of the ruled list with an icon tile, a label and the description. The rows share the panel's height, so four to six keep it about as tall as the copy beside it; for more, use the numbered feature list hero.
Can each feature row link to its docs page?
Yes. Each row is a plain li, so wrap its label and description in an <a href="/docs/encryption"> and stretch the link over the row with after:absolute after:inset-0 (the row is already relative), and the whole row is one link named by its label and description. Add a focus style such as has-focus-visible:bg-muted to the row, and keep the descriptions short, since a screen reader reads the whole row as the link's name. It works the same way on every target.
How do screen readers read the feature badges?
The headline is the page's one h1. The five rows are a list, so a screen reader announces "list, 5 items" and reads each label with its description. The icons and the status dot in the badge are hidden from assistive technology, and the badge is plain text, not a link, so it isn't a tab stop. The only tab stops are the two calls to action.
How does the entrance work, and does it follow right-to-left layouts?
It's CSS: starting: styles (@starting-style) start each part transparent and slightly offset, and a transition brings it to rest when it first renders. The copy rises; the rows slide in from the end side, 60 ms apart, which is the right in a left-to-right page and the left in a right-to-left one (rtl:starting:-translate-x-2). With reduced motion there's no transition, so everything renders at rest at once.
How does the split layout fit on a phone?
Below the lg breakpoint the two halves stack: the copy first, with both buttons on the first screen, then the feature panel with a rule above it. The divider and its marks are dropped, the headline steps down to text-4xl, the calls to action wrap onto a second row when they don't fit, and each description wraps rather than being cut off, down to 320px.
When should I use feature badges instead of feature cards or a checklist?
Use badges for four to six features that each need a short description next to the headline, read top to bottom. Use feature cards when three pillars each deserve a few sentences, and a checklist when the features are one-line yes-or-no capabilities.