shadcn.io is not affiliated with official shadcn/ui
Values Bento About Block for Vue
A bento of six values for a community-forum company: three tall cells that each carry a story of what the value looked like in a nested quote, and three one-line cells stacked beside them, in shared hairlines.
Installation
Overview
A values bento for Vue with Ark UI, written for Gladewell, a fictional company that hosts forums for clubs, brands and neighbourhoods. Three of the six values are tall cells: the value, one sentence on what it means and, at the foot of the cell, a nested quote that tells what it looked like the day it cost something, with who tells it. The other three values are one-line cells stacked in a narrower column at the end, so a visitor reads three stories and three rules in one look. There are no cards: the cells share single hairlines in a band that runs from rail to rail on the page's drafting lines and ends the block. On a tablet the cells sit two across, with the small values next to the third story; on a phone they stack, the stories first. It's built from Guides with your theme's tokens and a CSS entrance, with no script, so it can render on the server. For about pages where a few values deserve a story and the rest a line. The stories and figures are example data.
FAQ
How do I change the values and their stories?
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.
Are the stories real?
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.
How are the lines drawn, and why is there no line at the bottom?
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.
How do screen readers and keyboards handle it?
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.
Does the quote follow my theme?
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.
How does it fit on a phone?
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.