TrustBadgeRow [pattern] v1.0.0

Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.

Label

Trust Badge Row

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.

Solution

A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.

Structure

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--surface-warm);   /* slightly warm white or light neutral */
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-muted);
      border: 1px solid hsl(var(--border));
      white-space: nowrap;
    }

    .trust-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: hsl(var(--muted-foreground));
    }

    .trust-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    <!-- HTML -->
    <div class="trust-badge-row" role="list" aria-label="Trust attributes">
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- shield icon --></svg>
        Audited
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- umbrella icon --></svg>
        Insured
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- clock icon --></svg>
        24/7 Monitoring
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- lock icon --></svg>
        256-bit Encryption
      </span>
    </div>
  

TrustBadgeRow [pattern] v1.0.0

Small pill badges communicate tangible trust attributes (security, compliance, reliability) inline without interrupting the reading flow. Placed directly below or beside the primary hero CTA.

Label

Trust Badge Row

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.

Solution

A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.

Structure

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--surface-warm);   /* slightly warm white or light neutral */
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-muted);
      border: 1px solid hsl(var(--border));
      white-space: nowrap;
    }

    .trust-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: hsl(var(--muted-foreground));
    }

    .trust-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    <!-- HTML -->
    <div class="trust-badge-row" role="list" aria-label="Trust attributes">
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- shield icon --></svg>
        Audited
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- umbrella icon --></svg>
        Insured
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- clock icon --></svg>
        24/7 Monitoring
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- lock icon --></svg>
        256-bit Encryption
      </span>
    </div>
  

Relations

related: [@community/pattern-trust-logo-strip, @community/pattern-trust-social-proof-numbers, @community/pattern-trust-testimonial-micro, @community/pattern-trust-security-cert, @community/rule-trust-signal-placement, @community/rule-trust-signal-critical, @community/anti-pattern-fake-trust-signals]

Label

Trust Badge Row

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Problem

Visitors need immediate reassurance that a product is legitimate and safe immediately after reading the hero CTA — but full security sections would interrupt the conversion flow.

Solution

A flex row of pill-shaped badges with an icon + short label. Each badge sits in a rounded container with a subtle border and muted surface. Row wraps on mobile.

Structure

    .trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--surface-warm);   /* slightly warm white or light neutral */
      padding: 6px 16px;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--text-muted);
      border: 1px solid hsl(var(--border));
      white-space: nowrap;
    }

    .trust-badge svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      color: hsl(var(--muted-foreground));
    }

    .trust-badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    <!-- HTML -->
    <div class="trust-badge-row" role="list" aria-label="Trust attributes">
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- shield icon --></svg>
        Audited
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- umbrella icon --></svg>
        Insured
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- clock icon --></svg>
        24/7 Monitoring
      </span>
      <span class="trust-badge" role="listitem">
        <svg aria-hidden="true"><!-- lock icon --></svg>
        256-bit Encryption
      </span>
    </div>