Feature Grid

About this piece

Three columns, each with an icon tile, a heading line, and two body lines.

Usage

The import and the props worth knowing about, in one place.

import { Shapes31 } from "@/components/beste/piece/shapes31";

<Shapes31
  surface="card"
  bordered={true}
  inverted={false}
/>

Three feature rows in a card, each pairing an icon tile with a title and a body line.

Single feature card with a large icon tile beside a title and two supporting lines.

Sixteen dots laid out as a four-by-four spacing grid.

Asymmetric bento layout with one large tile, two stacked small ones, and a wide row.

Three small KPI tiles in a row, each with a label and a bold value bar.

Three divided rows with labels and trailing toggles or value lines.