shadcn.io is not affiliated with official shadcn/ui
Left-Heavy Trust Compliance Hero Block for Ark UI
A reverse split hero for a compliance tool: a trust center panel of six certifications in a hairline frame beside a checklist and two calls to action, with the copy first on a phone.
Installation
Overview
A reverse split hero with the trust center drawn beside the copy, for React with Ark UI. Between solid rails, the first column on a desktop is a panel in a hairline frame with + marks on its corners: a "Trust center" header with an "All controls passing" status, six certifications (SOC 2, GDPR, HIPAA, ISO 27001, CCPA, PCI DSS) in cells that share their lines, each with a shield, its name and its standing, and a short note below. A divider with a + mark where it meets the top rule separates it from the copy: an announcement link, a medium-weight headline, a subtitle, a three-point checklist, a ShineButton as the one primary action and an outline Button, both links. On a phone the copy comes first. The panel slides in from the start side and the copy fades up once on load with CSS transitions; nothing moves for visitors who ask for reduced motion. Made for enterprise SaaS, security and compliance tools, and products sold into regulated industries such as healthcare and finance.
FAQ
How do I change the certifications?
Edit the CERTIFICATIONS array at the top of the file: each entry is a name ("SOC 2") and a detail ("Type II", "Level 1"). The grid has two columns at every width, so an even number of entries fills it; four or eight work as well as six. List only what your organization holds today, and give each its exact standing: "HIPAA ready" and "SOC 2 Type II" make different promises.
How do I link each certification to its report?
Wrap each certification cell's content in an a pointing at the matching page of your trust center, where buyers can request the report, and add a hover style such as hover:bg-muted. The certification's name and detail become the link's name. Point the announcement pill at your latest audit and "Visit the trust center" at its home page.
What should the note under the grid say?
Something that stays true without an edit: "Independently audited" and "Renewed every year" never go stale, where a fixed "Updated" date would look neglected a few months later. Name your auditor there if you like, or show the date of the latest report from your trust center's data, rendered when the page is built.
Is the compliance panel accessible?
Yes. The certifications are real content, not decoration: the panel is a complementary landmark named "Certifications", with its own "Trust center" h2, and the six certifications are a list, so a screen reader announces how many there are and reads each name with its standing. The shields, the ticks and the status dot are hidden from assistive technology, and the headline is the page's one h1. On a desktop the panel is placed first with CSS grid only, so the reading and Tab order still start with the copy.
Why are the ticks and the shields different colours?
The block keeps its colour for the one primary action: the checklist ticks and the shields use the text colour, so nothing competes with the "Start your first audit" button. The only accent is the small green status dot beside "All controls passing", which says "passed", and the words next to it carry the same meaning, so the colour is never the only signal.
How does the layout change on smaller screens?
Below the lg breakpoint the grid becomes one column and the copy and checklist come first, with both calls to action on the first screen. The trust center follows at full width behind a rule with + marks. The certifications stay two by two so their names fit, the checklist lines wrap with their ticks aligned to the first line, and nothing scrolls sideways down to 320px.