trust payment security ssl guarantee credibility checkout saas trust payment security ssl guarantee badges credibility payment trust badges section checkout security strip
Trust Strip Base
Fetch pattern JSON:
curl https://webspire.de/patterns/trust-strip/base.json base.html
<section class="ws-trust-strip border-t border-slate-200 bg-slate-50 py-8">
<div class="mx-auto grid max-w-5xl gap-8 px-6 sm:grid-cols-3">
<!-- Payment methods -->
<div class="text-center sm:text-left">
<h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Accepted Payments</h3>
<div class="mt-3 flex flex-wrap justify-center gap-3 sm:justify-start">
<div class="flex h-8 w-12 items-center justify-center rounded bg-[var(--ws-color-surface)] text-[10px] font-bold text-slate-400 shadow-sm ring-1 ring-slate-200">VISA</div>
<div class="flex h-8 w-12 items-center justify-center rounded bg-[var(--ws-color-surface)] text-[10px] font-bold text-slate-400 shadow-sm ring-1 ring-slate-200">MC</div>
<div class="flex h-8 w-12 items-center justify-center rounded bg-[var(--ws-color-surface)] text-[10px] font-bold text-blue-500 shadow-sm ring-1 ring-slate-200">PP</div>
<div class="flex h-8 w-12 items-center justify-center rounded bg-[var(--ws-color-surface)] text-[10px] font-bold text-slate-400 shadow-sm ring-1 ring-slate-200">AMEX</div>
</div>
</div>
<!-- Money back -->
<div class="text-center">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-emerald-100">
<svg class="h-5 w-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
</div>
<h3 class="mt-2 text-sm font-semibold text-slate-900">30-Day Money Back</h3>
<p class="mt-1 text-xs text-slate-500">Full refund if not satisfied</p>
</div>
<!-- SSL -->
<div class="text-center sm:text-right">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 sm:ml-auto sm:mr-0">
<svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<h3 class="mt-2 text-sm font-semibold text-slate-900">SSL Encrypted</h3>
<p class="mt-1 text-xs text-slate-500">256-bit secure payment</p>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
trustpaymentsecuritysslguaranteecredibilitycheckoutsaas
Slots
| Name | Required | Description |
|---|---|---|
| payments | Yes | Payment method brand badges. |
| guarantee | Yes | Money-back guarantee icon and text. |
| security | Yes | SSL/encryption badge and text. |