Free shipping
On orders over $50
60-day returns
Free and easy
Lifetime warranty
On every bag
Secure payment
Cards, PayPal, Apple Pay

@use 'sprucecss/scss/spruce' as *;

.trust-bar {
  display: grid;
  gap: spacer('s') spacer('m');
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;

  &__item {
    align-items: center;
    display: flex;
    gap: spacer('s');
  }

  &__icon {
    align-items: center;
    background-color: color-alpha('primary', 0.1);
    block-size: 2.5rem;
    border-radius: 50%;
    color: color('primary');
    display: flex;
    flex-shrink: 0;
    inline-size: 2.5rem;
    justify-content: center;

    .block-icon {
      block-size: 1.25rem;
      inline-size: 1.25rem;
    }
  }

  &__text {
    @include layout-stack(0.1rem); // title, text
  }

  &__title {
    color: color('heading');
    font-weight: 700;
  }

  &__description {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
  }

  // The items sit side by side: clear the stack margins of the base list style.
  > li {
    margin-block: 0;
    padding-block: 0;
  }
}

<ul class="trust-bar" role="list" aria-label="Why shop with us">
    <li class="trust-bar__item">
        <span class="trust-bar__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.7a1 1 0 0 0-.2-.6l-3.5-4.3a1 1 0 0 0-.8-.4H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/>
</svg>
</span>
        <div class="trust-bar__text">
            <p class="trust-bar__title">Free shipping</p>
            <p class="trust-bar__description">On orders over $50</p>
        </div>
    </li>
    <li class="trust-bar__item">
        <span class="trust-bar__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M8 16H3v5"/>
</svg>
</span>
        <div class="trust-bar__text">
            <p class="trust-bar__title">60-day returns</p>
            <p class="trust-bar__description">Free and easy</p>
        </div>
    </li>
    <li class="trust-bar__item">
        <span class="trust-bar__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</span>
        <div class="trust-bar__text">
            <p class="trust-bar__title">Lifetime warranty</p>
            <p class="trust-bar__description">On every bag</p>
        </div>
    </li>
    <li class="trust-bar__item">
        <span class="trust-bar__icon" aria-hidden="true"><svg class="block-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<rect width="20" height="14" x="2" y="5" rx="2"/><path d="M2 10h20"/>
</svg>
</span>
        <div class="trust-bar__text">
            <p class="trust-bar__title">Secure payment</p>
            <p class="trust-bar__description">Cards, PayPal, Apple Pay</p>
        </div>
    </li>
</ul>

Trust Bar

Technical Details

It's a list labelled "Why shop with us"; the icons are decorative, the title and the text carry the meaning.
The items wrap with an auto-fit grid: four in a row on wide screens, one or two on phones.
Keep the promises short and true; link them to the shipping and returns pages when you have them.
Override the items with trustBar ([{ icon, title, text }]); the icons come from the shared block icon partial.