shadcn.io is not affiliated with official shadcn/ui
Wide Featured Bento Logos Block for React
A bento for brewery inventory software: a full-width featured story laid out as a row, over a second band of three customers divided by hairlines.
Installation
Overview
A wide-top bento for React with Base UI. A start-aligned header says what changed, "Fewer write-offs, fuller kegs", with no buttons. The featured story is a full-width band laid out as a row: at the start the flagship's plate, wordmark, industry pill and tenure, in the middle a quote and who said it, and at the end one big figure ("−31%"). Its rules meet the page's rails at + marks. Under it a second band holds three more customers divided by hairlines, each a wordmark, an industry pill and a figure. The three cells end the block, so the next section's top rule closes them. On a phone the story stacks and the three customers become compact rows, the wordmark at the start and the figure at the end. Built from Guides, Badge and Avatar, with a CSS transition for the entrance and your theme's tokens for every colour. For a page whose best customer deserves the full width.
FAQ
How do I change the featured story?
Edit STORY at the top of the file: name, icon, lettering, industry, tenure, quote, result and who said it. The tenure is a fixed year ("Customer since 2022"), so it never goes stale. The three columns of the band are the identity, the quote and the figure, and each can be edited on its own.
How do I change the three supporting customers?
Edit SUPPORTERS: each is a wordmark (name, icon, lettering, mark), an industry and a figure with its label. The band is three columns from md, so keep it at three.
How are the two bands drawn?
Each band draws its own top rule with Guides, with + marks where it meets the rails, and its cells are divided by divide-x hairlines (divide-y on a phone). The second band draws no bottom rule: the next block's top rule is its foot.
How does it fit on a phone?
The story's three parts stack, divided by hairlines: identity, then the quote, then the figure. The three customers become rows with the wordmark and pill at the start and the figure at the end, so the whole block stays about two screens tall.
Is it accessible?
Yes. The header is an h2 and each customer's name an h3. The quote is a figure with a blockquote and a figcaption naming who said it, the two bands are a list named "Customer stories" and the three supporting customers a nested list named "More customers", and decorative icons are hidden. Figures are in bdi, so signs keep their place in a right-to-left layout.
Related
- Pro
A bento for an on-call alert router: one tall customer story with a big result, a quote and a link, beside four customers that each carry an industry pill and a retention figure, in cells that share their hairlines.
- Pro
Five Cell Bento Logos
BentosExactly five cells for a usage-billing API: one featured customer story as tall as two rows and four single customer cells, each outlined by lines that run past its corners, with one Shine Button in the header.
- Pro
Featured Focal Wide Card Grid Logos
Flagship customerA wide flagship band over a grid of six wordmarks for a bookkeeping tool: plate, wordmark and tenure at the start, one big figure at the end, both rail to rail.
- Pro
A bento of five customers for a payments product: a flagship story across two columns beside four cells that alternate between a quote and a big figure, each led by the customer's wordmark.
- Pro
Bento Grid Testimonials
Quote gridsA quote-only bento drawn with hairlines: one large lead story beside four shorter quotes, in cells that share their lines, on the page's drafting lines.
- Pro
Bento Sparkline Logos
BentosA bento for a data warehouse in a card-in-card shell: four customers that each show the drop in slow queries as a figure and a falling trend line, beside one customer story set at the end.