Shadcn Bento Block Eleven

Bento block eleven is closer to an editorial product section than a card grid. It uses a bordered container, two-column layout, subgrid rows, and a testimonial strip through the middle.

The variant imports CurrencyIllustration, DocumentIllustration, AddCommentIllustration, ScheduleIllustration, and next/image for the testimonial avatar.

What makes this variant useful

The central quote changes the rhythm. Instead of showing five unrelated cards, the section reads like product proof interrupted by customer proof. That makes it useful when a page needs to explain features and reinforce trust in the same area.

The top row covers financial analytics and document management. The bottom row covers team collaboration and scheduling. The testimonial sits between them as a credibility bridge.

Best fit

Use this variant for business software, productivity tools, finance products, document tools, and team collaboration platforms. It works especially well on pages where a testimonial belongs near feature explanation, not in a separate carousel.

Implementation details

The layout uses @3xl:grid, @3xl:grid-cols-2, and grid-rows-subgrid. That keeps corresponding feature blocks aligned across the two columns. Borders are applied between sections instead of using separate card backgrounds.

The testimonial avatar uses next/image with a GitHub avatar URL, so the image remains optimized through Next's image pipeline.

What to customize first

• Replace the testimonial with a real customer quote.
• Update the avatar, name, and handle.
• Keep the feature descriptions longer than card-grid copy, but still scannable.
• Use this layout when you want a more editorial block.

Frequently asked questions

Does Bento Block Eleven support dark mode?

Yes. It relies on foreground, muted foreground, background, border, and shadow tokens.

Is Bento Block Eleven responsive?

Yes. It stacks on small screens and becomes a two-column bordered layout at larger container sizes.

Can I remove the testimonial?

Yes. You can remove the quote band or replace it with a metric, partner proof, or short case-study note.

What makes this different from other Bento variants?

It uses borders and long-form copy instead of rounded cards, which gives it a calmer, more editorial feel.

Start from Tailark

Preview Bento Block Eleven