Kanban Testimonials Block for Vue

Edit the LANES array at the top of the file. Each lane has a title and its own list of quotes, and the cards, the counts and the "8 quotes in 3 themes" line in the header are all computed from it. The badge on each lane header is the length of that lane's quote list and the total in the header is the sum across lanes, so nothing is typed by hand and screen readers hear "3 quotes". Lanes can hold different numbers of quotes. The board is built for three columns, so add a fourth only if you also change md:grid-cols-3.

Below the md breakpoint the lanes are laid out in one row inside a Scroll Area. Each lane is a fixed readable width, never more than 78% of the screen, so the next lane peeks in, and snaps to the start of the area as you swipe. The scroll area is a region named "Customer quotes grouped by theme", and where it can scroll it takes keyboard focus, so arrow keys move it. From md upwards the three lanes fit and nothing scrolls.

No. This is a layout, not a working board: there are no drag handles and nothing moves. The lanes are fixed themes you choose when you write the data. For filtering by theme, see Tag Filter Testimonials.

The heading is the section's h2 and each lane's title is an h3. The lanes are a list, and inside each the quotes are another list named after the lane, with every card a figure holding a blockquote and a figcaption. Star ratings are decoration, with a hidden line such as "Rated 5 out of 5".

Yes. The lanes run from the right, the swipe row starts at the right edge, the quotes sit in a bdi so their marks stay at the ends of the sentence, and the counts are wrapped so the digits keep their order.

Change the href of the call to action in the header row; its label says where it goes. It's the block's only button. The link renders its a through asChild, so the button's styles land on the link.