Feature cards arranged in a 3-then-2 bento layout: three cards fill a top row and two shorter cards fill the row below, each card pairing a text block with an edge-to-edge image flush against the bottom of the card.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/feature177"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature177"This installs the block to components/beste/block/feature177.tsx and the badge shadcn/ui primitive it depends on.
The installed file exports feature177Demo alongside the block: the exact props behind the preview above. Spread it to get a working bento grid in one line.
import { Feature177, feature177Demo } from "@/components/beste/block/feature177";
export default function Page() {
return <Feature177 {...feature177Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Feature177 } from "@/components/beste/block/feature177";
export default function Page() {
return (
<Feature177
badge={{ label: "Features", variant: "secondary" }}
heading="Everything you need to <strong>build faster</strong>"
description="All the tools you need to ship products quickly."
items={[
{
title: "Analytics Dashboard",
description: "Track your metrics in real time.",
image: { src: "https://images.unsplash.com/photo-1697133081695-90070de25bc3?w=800&h=500&fit=crop", alt: "Analytics dashboard" },
},
{
title: "Team Collaboration",
description: "Work together with built-in tools.",
image: { src: "https://images.unsplash.com/photo-1574281160075-6eb5f7bfe645?w=800&h=500&fit=crop", alt: "Team collaboration" },
},
{
title: "Automated Workflows",
description: "Automate the repetitive tasks.",
image: { src: "https://images.unsplash.com/photo-1592838981793-f3ebf267056d?w=800&h=500&fit=crop", alt: "Automated workflows" },
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Optional eyebrow badge above the heading |
heading | string | – | Section heading. Supports inline <strong> markup, rendered via dangerouslySetInnerHTML |
description | string | – | Section intro text |
items | FeatureCardItem[] | [] | Bento cards; only the first 5 are rendered |
className | string | – | Extra classes for the outer <section> |
type FeatureCardItem = {
title: string;
description?: string;
image?: { src: string; alt: string };
};items, not driven by a separate prop: items.slice(0, 3) renders in a md:grid-cols-3 top row and items.slice(3, 5) renders in a md:grid-cols-2 bottom row. A 6th item and beyond is silently dropped; fewer than 4 items just means the bottom row block never renders (it's conditional on bottomItems.length > 0).heading accepts inline <strong> HTML for partial highlighting (the demo highlights "build faster"), styled [&>strong]:text-primary [&>strong]:font-semibold.image is optional; when present it sits flush at the bottom of the card (aspect-[16/10], absolutely positioned, object-cover) with no padding, while the text block above it keeps p-6.buttons/CTA prop on this block: it stops at the badge/heading/description header and the card grid.feature182
Bento-style grid with mixed card sizes over background media, featured large card spanning two columns
feature163
Asymmetric bento-style grid with a highlighted hero card spanning full width and smaller feature cards below. Great for showcasing a primary feature alongside supporting capabilities.
feature183
Two-column layout with large image card on left and stacked glass feature cards on right
feature33
Asymmetric bento-style grid with mixed card sizes, color variants, eyebrow labels, and large stat highlights. Perfect for platform overviews, feature showcases, or capability summaries.
feature185
Three-column image feature cards grid with sticky header over background media and glass-morphism styling
feature193
Alternating rows with tall highlight card and stacked compact cards over background media