Social Post Style Testimonials Block for React

Edit POSTS at the top of the file (six by default; FIRST sets how many show on a phone before the button): each has the post text, the author's name, handle, initials and verified flag, a relative time, and integer replies, shares and likes. The counts are formatted by one Intl.NumberFormat fixed to US English in compact form, so 1284 shows as 1.3K and the same on the server and in the browser. Use numbers that are true: this block shows them as social proof.

It is a flag in the data and nothing verifies it. Turn it on only for authors whose account you have confirmed is theirs. The tick is drawn from your theme's foreground colour, so it works in any theme, and a screen reader hears "Verified account" after the name.

You can, with permission and under that network's display rules. Replace the data with your own, keep the author's real handle and the real post text, and do not add a network's logo or name unless its guidelines ask for it. The block has no logo of its own on purpose, so it stays neutral.

Each post is a figure: the author's name, a verified note, the handle and the age form its caption, and the post is a blockquote. The counts are a small list that reads, for example, "62 replies, 247 shares, 1.3K likes". The avatar and the icons are hidden because the words are right there.

It is three columns from lg, two from sm and one below. On a phone only the first three posts show, so the section stays short: the "Show 3 more posts" button reveals the rest, announces whether the list is expanded and keeps its place. A long name or handle is cut with an ellipsis in its own line, and the post wraps in full, down to 320 pixels.

The header and the cells fade up once on load using CSS transitions, 70 milliseconds apart. With reduced motion everything is there from the first paint.

Change the href of the call to action in the header. Say where it goes in its label, such as "Join the conversation". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion). On Base UI, the link renders through render={<a href="…" />} with nativeButton={false}.