Values Bento About Block for React

The tall cells are FEATURED at the top of the file: each has a title, a one-sentence promise, a story and a teller that says whose story it is. The one-line cells are SMALL, with a title and a line. Keep three and three: from lg the grid is four columns, one for each story and one for the stack of small values, so a fourth story or a seventh value would leave a hole where the border colour shows through.

No. They are written for the fictional company in the block, and so is the name Gladewell. Replace each one with something that happened to you: a story only works as a value's proof when it cost something. The stories avoid calendar years on purpose ("in our second year", "last spring"), so they don't go stale.

The cells share hairlines: the list is a grid with a one-pixel gap over your border colour, and every cell sits on the page background, so each line is drawn once. The grid runs from rail to rail of the page column, whose rails and top rule come from Guides; a second Guides draws the band's top rule with a plus on each rail. The band ends the block: the column has no bottom padding and the band no bottom rule, because the next block's top rule is its foot, so two lines never sit a few pixels apart.

The section's heading is an h2, and each value is a list item with an h3. A story is a figure with a blockquote and a caption saying who tells it, so it reads as a quote and not as more body text. The block has no controls and nothing to tab to, and it doesn't use state, so it renders on the server.

Yes. The nested quote is a tinted panel with a ring, light on a light page and dark on a dark one, and its text is a step softer than the heading, never a fixed colour. Nothing in the block uses your primary colour, because it has no action: the band is made of hairlines, weight and space.

Below md every cell takes the full row: the three stories first, then the three small values. From md the cells sit two across and the small values share the last row with the third story; from lg the four columns appear. The header is centred at every size, and nothing scrolls sideways at 320 pixels. The header and the band fade up once on load with a CSS transition; with reduced motion they simply appear.