shadcn.io is not affiliated with official shadcn/ui
Trust Badges Marquee Banner Block for Solid
A trust strip for a file-transfer service: six claims in still, hairline-split cells from the medium breakpoint, and the same six on a pausable marquee below it.
Installation
Overview
A trust badges marquee banner for Solid with Ark UI: a security and trust strip for a file-transfer service, in two forms of the same six claims. From the medium breakpoint it is still: six cells across the page column split by hairlines, each with the claim in medium weight (TLS 1.3, SOC 2 Type II, 30-day refund, 99.98% uptime, GDPR ready, 12k+ teams) and, from the large breakpoint, an icon beside it and a muted detail line under it ("in transit", "audited yearly", "last 12 months"). There is no motion at all there. Below the medium breakpoint the same six claims become a marquee on one line, each with its icon and its detail, with a pause button before it; hovering or focusing the row holds it, and with reduced motion on it doesn't move. The strip is between the page's rails under a top rule, is 52 pixels tall on a desktop and 44 on a phone, and follows the theme in light and dark. For checkouts, pricing pages and landing pages that need to answer "is it safe" in one line.
FAQ
Why is it still on a desktop and moving on a phone?
Six claims don't fit one line on a narrow screen without shrinking to unreadable or wrapping to several lines, and a still row is better than a moving one wherever it fits: nothing needs pausing, and every claim can be read at once. So the block draws both from one list, MARKS, and shows the still row from the medium breakpoint and the marquee below it (the other one is display: none, so a screen reader meets only one).
How do I change the claims, and how true must they be?
Edit MARKS: each has a label, a detail and an icon. Only claims you can back up belong in a trust strip: the copy here is written for a made-up service, so replace every figure with your own measured ones, and keep time spans relative ("last 12 months") so they don't go stale. Real certificates and regulations may be named when you hold or follow them; no logos are used.
How can a visitor stop the phone version?
By holding it with a finger, tabbing into it, or pressing the pause button before it (its name stays "Pause the scrolling marks" and its pressed state says whether it is paused). With reduced motion on, the marquee doesn't animate at all, becomes a row you scroll by hand, and the button is hidden.
Why is it taller on a large screen?
From the large breakpoint each cell stacks its detail line under the claim, which makes the strip 52 pixels tall; at the medium breakpoint it shows the claims only and is 44. Remove the max-lg:hidden classes on the detail and icon to keep it to one line at every size.