Bento Grid Feature Showcase Hero Block for React

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.

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.

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.

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.

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.

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.