shadcn.io is not affiliated with official shadcn/ui
Bento Featured Case Study Logos Block for React
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.
Installation
Overview
A bento case study for React with Base UI. A centred header names the result, "Cinderly cut night pages by 62%", and a grid of five cells sits under it: one tall story at the start and four customers beside it. The story holds the flagship's plate and wordmark, an industry pill, the result at display size, a two-sentence quote with who said it, and a "Read the story" link. Each of the four others is a wordmark in its own lettering, an industry pill and one retention figure. The cells share their hairlines from rail to rail, the grid's top rule meets the page's rails at + marks, and the grid ends the block, so the next section's top rule closes it. On a phone the story comes first and the four customers sit two by two beneath it. Built from Guides, Badge, Avatar and Button, with a CSS transition for the entrance and your theme's tokens for every colour. Made for a landing page with one customer story worth leading with.
FAQ
How do I change the featured story?
Edit STORY at the top of the file: the customer's name, icon, lettering and industry, the quote, the result and its label, and who said it. The heading reads its customer and result from the same object, so the page and the cell never disagree. Keep the quote to two sentences: it sits in a third of the grid.
How do I change the four supporting customers?
Edit SUPPORTERS. Each entry is a wordmark (name, icon, lettering and a mark that places the icon), an industry and a figure with its label. The grid is made for exactly four: with the tall story spanning two rows, four cells fill the other two columns. A different count leaves an empty cell showing the border colour.
How do I point Read the story at the full story?
The button is a link (href="#"): replace it with your case study's URL.
The button renders the link it's given with render, with nativeButton={false}.
How does the grid fit on a phone?
The grid has two columns on a phone and the story spans both, so it comes first with the quote readable at full width. The four customers follow two by two with tighter padding. From lg the story becomes the tall first column and the four customers fill the other two.
Is it accessible?
Yes. The header is an h2, the cells are a list named "Customer stories", and every customer's name is an h3. The quote is a figure with a blockquote and its figcaption, so a screen reader announces who said it. Icons and the avatar's initials are hidden, since the names and the author are in text. Percentages and figures sit in bdi, so they keep their order in a right-to-left layout, while each logo keeps its own direction.
Related
- Pro
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.
- 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
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.
- Pro
One flagship customer's wordmark plate beside a display-size quote and who said it, for a vet-clinic booking tool, split by a hairline divider.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- 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.