Bento Feature Grid
Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
8 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
A full row per feature with the media side flipping each time, so the eye re-enters the page instead of skimming a stack of identical blocks.
Uniform cells, no spans, no state — the grid for nine things that matter equally, where a bento would be a wall and tabs would be a filing cabinet.
What each integration actually does, not a wall of logos — with availability as a text pill rather than a tinted border, and the name as the link so the card is not one enormous one.
A "who this is for" grid: four cards naming an audience, the outcome they want and the bullets that get them there.
A feature section paired with a tabbed fake editor — real selectable code, generated line numbers and a copy button.
Features as a real tablist — arrow keys, roving focus and a drawn product panel per tab — for the section where four features would otherwise fight for one scroll.
An integrations section that says how deep each one goes, instead of a wall of logos that all imply the same thing.