Trust And Compliance OverviewPRO

Legal53: Trust And Compliance Overview

Compliance section pairing four hairline certification cards, each with an accent icon and a tone-coded status pill, with a definition list of how data is actually handled, and a request line for the security pack underneath.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/legal53?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/legal53?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/legal53.tsx plus the badge23 and button21 components it uses for the eyebrow, the status pills, and the closing action.

Quick start

The installed file exports legal53Demo alongside the block: the exact props behind the preview above. Spread it to get a working compliance section in one line.

import { Legal53, legal53Demo } from "@/components/beste/block/legal53";

export default function TrustPage() {
  return <Legal53 {...legal53Demo} />;
}

Then replace the demo with your own props. Icons are Lucide components passed straight through, so the block imports nothing it does not draw:

import { FileCheck2, ShieldCheck } from "lucide-react";
import { Legal53 } from "@/components/beste/block/legal53";

export default function TrustPage() {
  return (
    <Legal53
      badge={{ label: "Trust" }}
      heading="The boring guarantees, written down"
      description="Everything a procurement review asks for, published rather than promised."
      items={[
        {
          icon: ShieldCheck,
          title: "ISO 27001",
          description: "Certified since 2024, audited annually.",
          status: "Certified",
          tone: "primary",
        },
        {
          icon: FileCheck2,
          title: "SOC 2 Type II",
          description: "Observation window closes this quarter.",
          status: "In progress",
          tone: "foreground",
        },
      ]}
      specsLabel="How your data is handled"
      specs={[
        { term: "Data residency", value: "European Union, with regional pinning available" },
        { term: "Encryption", value: "TLS 1.3 in transit, AES-256 at rest" },
      ]}
      footnote={{
        label: "Security review coming up? The pack has the DPA and the test summaries.",
        button: { label: "Request the security pack", href: "/security" },
      }}
    />
  );
}

Props

import type { LucideIcon } from "lucide-react";

type ActionLink = { label: string; href: string };

type Certification = {
  icon: LucideIcon;
  title: string;
  description: string;
  status: string;
  tone?: "muted" | "foreground" | "primary";
};

type Spec = { term: string; value: string };

Behavior notes

• icon takes a Lucide component reference rather than an icon name, so there is no icon map inside the block and only the icons you pass are bundled.
• The status pill is a Badge23 with the tone passed through, which is how Certified reads as the accent, In progress as full contrast, and anything routine as muted, without the block deciding what a status means.
• Cards use flex-1 on the description so the status pill sits on the bottom edge of every card in the row, however uneven the descriptions are.
• The specs list is a real <dl> with <dt> and <dd> pairs, which is the correct semantics for term and definition and reads properly to assistive tech.
• Spec rows are a two-column grid from md and stack the value under its term below that width, so a long value never squeezes the term into a narrow ribbon.
• Cards lift their border to hover:border-foreground/40 and nothing else moves, keeping the surface still on a page that is about being trustworthy.