Feature Grid
block / marketing
A feature section in three layouts off one typed list: a card grid, full-width alternating rows, and a bento that re-packs its rows.
- type
- block
- files
- 2
- registry deps
- @automindz/content-card, @automindz/render-link
- npm deps
- lucide-react
installs
- lib/automindz/features.ts
- components/automindz/feature-grid.tsx
- One list, three rhythms: grid, alternating, bento.
- Bento re-packs each row, so a hole is impossible.
- Empty features renders nothing — header included.
Edit lib/automindz/features.ts, not the component. layout changes everything: grid composes @automindz/content-card, alternating is full-width rows that flip the artwork side, bento turns each span into tracks. A span is an intent — the bento re-packs every row and gives the shortfall to its last card, so 5, 6 and 7 features tile with no hole; one column below 640px. href makes a card a link. Empty features renders nothing at all. media: "diagram" is a stand-in to replace.
Variations
one state per section
Grid
Composes the card item rather than re-drawing card markup, so a change to ContentCard reaches every feature section — hover a card here and the lift, the darkening ring, the wiping rule and the underline all arrive for free, none of it written twice. These are copy-only cards, so there is no artwork for the pointer to light; the bento variant is where that shows up. The last entry has no icon on purpose — the row reads the same without one.
The parts every client app needs before the first feature
Seven pieces you would otherwise rebuild per project, with the states already drawn.
Alternating rows
Full-width rows that flip the artwork side each row — a different rhythm from a card grid, not a grid with one column, so it gets a different hover too. Hover the row itself and nothing moves; hover the "More on …" link and the artwork answers from the other side of the row — its ring tightens and the diagram scales a fraction inside a frame that keeps its size — while the icon above the link takes full emphasis. The response is keyed to the one target in the row rather than to the row, which is also why there is no cursor-tracked light here: a full-width row is read, not aimed at. Tab to the link for the same state. A feature with no artwork drops the second column instead of leaving half a row empty.
Single sign-on
Google, Microsoft Entra, Okta and SAML behind one button, with the account-linking prompt already written for the case where the email already exists.
More on single sign-onWebhooks with replay
Signed deliveries, exponential backoff, and a replay button per event so a customer outage is not your data loss.
More on webhooks with replayWorkspaces and roles
Owner, admin and member, invites that expire, and a switcher that survives a user belonging to nine of them.
More on workspaces and rolesBento, six features
Each feature's span is an intent in thirds; the grid packs the rows and hands whatever is left to the row's last card. Six features tile as two-thirds/third, third/two-thirds, two-thirds/third. The two-thirds cards are the ones wide enough to carry their diagram beside the copy — hover one of those diagrams and the pointer light appears, because now there is a surface with no reading on it to spend contrast against.
Bento, five features
The count that would leave a hole if the spans were taken literally. The fifth card absorbs its whole row instead, which is why five, six and seven all tile without a gap.
One feature
A single card in a three-column grid would be one card and two holes, so the grid drops to auto-fit whenever there are fewer features than columns. Nothing to configure and nothing left looking unfinished.