Bento board

A share-ready brand board in a bento grid: statement, key number, logo, type sample, colour swatches, an abstract picture drawn from the brand colours, tone words, a slice of UI and a quote; reflows from four columns to one with its container.

What it is for

Pitch decks, case studies and portfolio shots for the brand the site was generated for; an About or Brand page; a launch post image.

Add it to a site

1 · site.json

"effects": { "templates": ["bento-board"] }

or on the command line

node ~/.claude/skills/sitewright/scripts/scaffold.mjs --config site.json --out ./my-site --templates bento-board

2 · import it

import BentoBoard from '@/components/fx/tpl/BentoBoard';

Files

components/fx/tpl/BentoBoard.tsx
components/fx/tpl/_shared.tsx
ui-bento-board.css styles

About it

Original to Sitewright. MIT licensed. Demo data is fictional and deterministic. Every control on the page works, so try it before you take it.

It answers its own width rather than the screen's, so the tablet and phone buttons show the real responsive behaviour. Templates are not components: they are chosen with templates, not components.