shadcn.io is not affiliated with official shadcn/ui
Bento Grid Feature Showcase Hero Block for Vue
A showcase hero with the headline on one side and the pitch on the other, over a bento of six labelled product views in cells that share hairlines.
Installation
Overview
A showcase hero over a bento of product views, for Vue with Ark UI. Between solid page rails, an announcement pill and a large headline sit on the start side; on the end side, one sentence and two calls to action: a ShineButton that sweeps a light across it on hover, and an outline Button, both links. Below, a band of six tiles for a fictional agency workspace shares its hairlines with the rails and meets them in + marks: a large lead tile, wide tiles and small ones, each a label over a small sketch of that view drawn in greys with the theme's tokens: an overview with two figures and a billing line, weekly bars, a team list with Avatars, alert switches, a row of integration marks running off both ends, and a list of invoices. The copy fades in on load and the tiles fade in one after another, all with CSS transitions that stay still under reduced motion, and the block renders on the server with no JavaScript of its own. For product launches, platform overviews and feature showcases with four to six views worth a look.
FAQ
How do I put my screenshots in the tiles?
Each tile is a list item holding a label and a TileSketch, the small component that draws its view. To show a screenshot instead, replace the TileSketch with an img that fills the space under the label (size-full object-cover object-top) and give it an alt that says what the view shows. Crop each image for its tile: the lead tile is about square, the wide ones about three to one on a desktop. Once the tiles show real images, remove aria-hidden from the list so screen readers reach them.
How do I change the tiles and their sizes?
Edit TILES at the top of the file: each tile has a label, the view it sketches and a size, lead (two columns by two rows), wide (two columns) or small (one column). The grid's rows have a fixed height, so a tile's size comes from its spans, never from its content, and every row lines up. The cells share their lines because the grid is a bg-border surface with a one-pixel gap and bg-background cells. Keep the order of the default set (a lead, a wide, two small, then wide tiles) and four columns fill without gaps.
How do screen readers read the hero?
The headline is the page's one h1. The pill and both calls to action are links, each named by its text, and the pill's status dot and arrow are hidden. The bento is hidden too: its tiles are sketches that decorate the page, and nothing in them can be focused. When you put real screenshots in, remove its aria-hidden and give each image its alt.
How does the bento fit on a phone?
The headline, the sentence and both actions stack, and the actions end well within the first screen. The grid goes from four columns to two below md: the lead and wide tiles span the full width and the two small tiles sit side by side, so every tile stays visible with no sideways scrolling, down to 320 px. Rows are 7.5rem tall on a phone, 9rem from sm and 10rem from md, and each sketch crops or fades out at its tile's edge.
How do the tiles animate in?
With CSS only. Each tile starts transparent (starting: styles, which are @starting-style) and fades in when it first renders, 60 ms after the one before it. The header's parts fade and rise in just before them. Under reduced motion there are no transitions and everything renders in place.
When should I use a bento instead of a single screenshot?
Use the bento when your product has four to six distinct views or features that each deserve some room: the asymmetric layout gives the lead view the most weight and still shows the breadth. Use a single screenshot when one interface tells the whole story, or when you want every bit of attention on it.