Trust Badges

Trust Badges renders a curated row of payment, security, and service icons to reinforce buyer confidence at checkout or anywhere on the page. Choose from built-in presets, hand-pick individual badges, or upload your own images — or mix all three.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Trust Badges. The block drops in with the Mixed preset active: Visa, Mastercard, PayPal, SSL Secure, and Money Back.

Badges

Preset quickly populates the badge list with a curated set:

Below the preset selector, badges are listed by category — Payment, Security, Service — each as an individual toggle. Enabling or disabling any toggle switches the preset to Custom selection automatically.

Color mode controls how the built-in SVG badges are painted:

Custom badges

Click Add custom badge to add your own images alongside the built-in ones. Each entry has:

• Image — click the thumbnail to open the media library
• Label / alt — text below the badge, also used as the image alt attribute. Leave blank to suppress the label.
• Optional link URL — wraps the image in a link that opens in a new tab
• Remove — deletes the entry

Custom badges render after the built-in ones. A custom badge without an image is skipped on the frontend.

Heading

Show heading toggles an optional text line above the badge row. Default on, reading Secure Checkout Guaranteed. When enabled you also get Heading text and a Left / Center / Right alignment choice.

Layout

• Layout — Horizontal row (a single wrapping row) or Grid (a fixed column grid)
• Columns — 2–6, in Grid layout. Per-device.
• Alignment — Left, Center (default), or Right. Per-device.
• Gap — spacing between badges, 0–64 px. Per-device.
• Badge size — Small (32 px), Medium (48 px, default), or Large (64 px)

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the block shows; Styles is how it looks, organised by the parts you can see.

Styling

• Card is the tile behind each badge. Its Gap row takes px or rem and controls the icon-to-label spacing inside the tile.
• Icon appears only when Color mode is Monochrome. In Brand colors mode there's nothing to recolor, so the section is hidden rather than left inert.
• An unset Hover background keeps the resting background, matching the CSS fallback — so turning on hover for the shadow alone won't wash out your card color.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

<div
  class="axiom-blocks-trust-badges is-layout-horizontal is-align-center is-size-medium is-color-color has-card"
  style="
    --ab-tb-gap: 16px;
    --ab-tb-item-gap: 6px;
    --ab-tb-card-bg: #ffffff;
    --ab-tb-card-radius: 8px;
    --ab-tb-icon-size: 48px;
    --ab-tb-columns: unset;
  "
>
  <div class="axiom-blocks-trust-badges__heading" style="text-align: center;">
    Secure Checkout Guaranteed
  </div>

  <div class="axiom-blocks-trust-badges__list">
    <!-- Built-in badge -->
    <div class="axiom-blocks-trust-badges__item">
      <svg ...><!-- Visa SVG --></svg>
      <span class="axiom-blocks-trust-badges__label">Visa</span>
    </div>

    <!-- Custom badge with link -->
    <div class="axiom-blocks-trust-badges__item">
      <a href="https://example.com" rel="noopener noreferrer" target="_blank">
        <img src="/wp-content/uploads/badge.png" alt="Certified" style="width:48px;height:48px;object-fit:contain;" />
      </a>
      <span class="axiom-blocks-trust-badges__label">Certified</span>
    </div>
  </div>
</div>

CSS custom properties