Skip to content

Bento & Layout

Bento Grid — Asymmetric Feature-Led

Feature-led bento grid with one wide lead cell plus three supporting cells, built with CSS grid-template-areas.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add bento-grid-asymmetric
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Bento Grid — Asymmetric Feature-Led

Bento Grid — Asymmetric Feature-Led

Live preview of the Bento Grid — Asymmetric Feature-Led component

One dashboard for every region

Roll up spend, leads, and pipeline across all 17 territories without a single export.

Regions tracked

17

Weekly spend visibility

$2.3M

To build a report

6min

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Bento Grid — Asymmetric Feature-Led component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Bento & Layout components

Browse all →

Bento Grid — 6 Cell

Responsive 6-cell bento grid, 1/2/3 columns across phone/tablet/desktop with slots in reading order.

Bento Card Shells

Single card shell component with five variants (icon, stat, image, chart-slot, quote) sharing one accessible article shell.

Bento Grid — Tall Feature Cell

Bento layout with one tall feature cell spanning two rows beside two stacked supporting cells.

Centred Container

Reliable two-axis centring primitive with a flex or grid method and explicit known-height or min-height sizing.

Full-Bleed Section

Escapes a centred max-width container to span the full viewport using the calc(50% - 50vw) technique, with a re-centred inner column.

Split 50/50 Section

Even two-column split section that stacks to one column on mobile, with an optional mobile reorder flag.