Fintech Trust
Navy trust banner with KYC-verified badges, pulsing live status dot, ROI callout box, FCA/FSCS compliance strip, product-tagged reviews (investment/loan/savings/trading), and a trust-score footer. Use case: regulated fintech / banking. Instrument Serif for italic pull quotes, Inter for UI.
Fintech Trust the 12th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-fin" aria-label="Verified client reviews">
<header class="tm-fin-bank-header">
<div class="tm-fin-bh-logo">
<span class="tm-fin-bh-icon" aria-hidden="true">🏦</span>
<div>
<div class="tm-fin-bh-name">ClearBank</div>
<div class="tm-fin-bh-tagline">Regulated · Audited · Insured</div>
</div>
</div>
<div class="tm-fin-bh-trust">
<span class="tm-fin-bh-trust-dot" aria-hidden="true"></span>
<span>FCA Regulated · FSCS Protected · 256-bit Encrypted</span>
</div>
</header>
<div class="tm-fin-section">
<div class="tm-fin-trust-banner">
<div class="tm-fin-tb-left">
<span class="tm-fin-tb-shield" aria-hidden="true">🛡</span>
<div>
<div class="tm-fin-tb-title">Verified Client Reviews</div>
<div class="tm-fin-tb-sub">All reviews authenticated via KYC & account data</div>
</div>
</div>
<div class="tm-fin-tb-stats">
<div class="tm-fin-tb-stat tm-fin-green"><div class="tm-fin-tb-val">4.97</div><div class="tm-fin-tb-lbl">Trust score</div></div>
<div class="tm-fin-tb-stat tm-fin-blue"><div class="tm-fin-tb-val">286K</div><div class="tm-fin-tb-lbl">Accounts</div></div>
<div class="tm-fin-tb-stat tm-fin-amber"><div class="tm-fin-tb-val">£4.2B</div><div class="tm-fin-tb-lbl">AUM</div></div>
</div>
</div>
<div class="tm-fin-grid">
<article class="tm-fin-card tm-fin-feat">
<span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> KYC verified</span>
<div class="tm-fin-prod-tag tm-fin-tag-invest">Investment portfolio</div>
<div class="tm-fin-roi-box">
<div><div class="tm-fin-roi-num">+34.2%</div><div class="tm-fin-roi-lbl">12-month return</div></div>
<div class="tm-fin-roi-bench">vs. 8.1% FTSE 100 benchmark</div>
</div>
<div class="tm-fin-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-fin-q">"I transferred my pension after <em>eighteen months of hesitation</em>. That hesitation cost me returns I'll never recover. The transparency, the fee structure, the dashboards — none of it was what I expected from a financial institution. All of it was better."</blockquote>
<figcaption class="tm-fin-author">
<span class="tm-fin-av tm-fin-av-t" aria-hidden="true">PH</span>
<span><cite class="tm-fin-an">Peter Hartmann</cite><span class="tm-fin-ar">Pension holder · 3yr customer</span></span>
</figcaption>
</article>
<div class="tm-fin-col">
<article class="tm-fin-card">
<span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> Verified</span>
<div class="tm-fin-prod-tag tm-fin-tag-loan">Business loan</div>
<div class="tm-fin-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-fin-q">"Approved in <em>4 hours</em>. Funded same day. No collateral theatre. Used it to hire two engineers. Revenue doubled in Q2."</blockquote>
<figcaption class="tm-fin-author">
<span class="tm-fin-av tm-fin-av-b" aria-hidden="true">SK</span>
<span><cite class="tm-fin-an">Sadia Khan</cite><span class="tm-fin-ar">Founder · ScaleUp Ltd</span></span>
</figcaption>
</article>
<article class="tm-fin-card">
<div class="tm-fin-prod-tag tm-fin-tag-save">High-yield savings</div>
<div class="tm-fin-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-fin-q">"<em>5.3% AER</em>, instant access. My high-street bank offers 0.5%. This should be illegal by comparison."</blockquote>
<figcaption class="tm-fin-author">
<span class="tm-fin-av tm-fin-av-g" aria-hidden="true">MN</span>
<span><cite class="tm-fin-an">Marcus Nwosu</cite><span class="tm-fin-ar">Personal savings</span></span>
</figcaption>
</article>
</div>
</div>
<div class="tm-fin-grid2">
<article class="tm-fin-card">
<span class="tm-fin-verified"><span class="tm-fin-v-dot" aria-hidden="true"></span> Verified</span>
<div class="tm-fin-prod-tag tm-fin-tag-trade">Stock trading</div>
<div class="tm-fin-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-fin-q">"Zero commission, real-time execution, fractional shares. Everything I've wanted from a broker for <em>fifteen years</em>."</blockquote>
<figcaption class="tm-fin-author">
<span class="tm-fin-av tm-fin-av-a" aria-hidden="true">LD</span>
<span><cite class="tm-fin-an">Lena Dubois</cite><span class="tm-fin-ar">Active trader · Paris</span></span>
</figcaption>
</article>
<article class="tm-fin-card">
<div class="tm-fin-prod-tag tm-fin-tag-invest">Global ETFs</div>
<div class="tm-fin-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-fin-q">"Auto-invest, auto-rebalance, <em>zero decision fatigue</em>. My portfolio grows while I sleep. That's the deal I always wanted."</blockquote>
<figcaption class="tm-fin-author">
<span class="tm-fin-av tm-fin-av-t" aria-hidden="true">RO</span>
<span><cite class="tm-fin-an">Remi Okafor</cite><span class="tm-fin-ar">Passive investor</span></span>
</figcaption>
</article>
<div class="tm-fin-trust-score-card">
<div class="tm-fin-tsc-num">4.97</div>
<div class="tm-fin-tsc-lbl">Trust score</div>
<span class="tm-fin-tsc-line" aria-hidden="true"></span>
<div class="tm-fin-tsc-count">286,000 verified accounts</div>
</div>
</div>
</div>
</section> /* Fintech Trust — navy compliance header on top, blue-toned card grid
below, ROI callout in the featured card animates in numerically via
a static gradient backdrop (no JS counter here — the visible number
is pre-rendered). Pulsing trust dot in the header signals "live
monitoring". */
.tm-fin {
--tm-fin-bg: #f0f4fa;
--tm-fin-white: #ffffff;
--tm-fin-navy: #0f1f3d;
--tm-fin-blue: #1d4ed8;
--tm-fin-teal: #0d9488;
--tm-fin-green: #16a34a;
--tm-fin-amber: #d97706;
--tm-fin-red: #dc2626;
--tm-fin-text: #0f1f3d;
--tm-fin-muted: #64748b;
--tm-fin-border: #e2e8f0;
background: var(--tm-fin-bg);
font-family: 'Inter', system-ui, sans-serif;
color: var(--tm-fin-text);
min-height: 520px;
}
.tm-fin-bank-header {
background: var(--tm-fin-navy);
padding: 14px clamp(20px, 4vw, 48px);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.tm-fin-bh-logo {
display: flex;
align-items: center;
gap: 10px;
}
.tm-fin-bh-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.tm-fin-bh-name {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 16px;
letter-spacing: 0.04em;
color: #fff;
}
.tm-fin-bh-tagline {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-top: 2px;
}
.tm-fin-bh-trust {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.tm-fin-bh-trust-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
animation: tm-fin-trustpulse 2.5s infinite;
}
@keyframes tm-fin-trustpulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.tm-fin-section { padding: clamp(28px, 4vw, 44px); }
.tm-fin-trust-banner {
background: var(--tm-fin-navy);
border-radius: 8px;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 16px;
}
.tm-fin-tb-left {
display: flex;
align-items: center;
gap: 18px;
}
.tm-fin-tb-shield {
width: 44px;
height: 44px;
background: rgba(59,130,246,0.15);
border: 1px solid rgba(59,130,246,0.3);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.tm-fin-tb-title {
font-family: 'Instrument Serif', Georgia, serif;
font-size: 1.2rem;
color: #fff;
line-height: 1.2;
}
.tm-fin-tb-sub {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-top: 3px;
}
.tm-fin-tb-stats { display: flex; gap: 26px; }
.tm-fin-tb-stat { text-align: center; }
.tm-fin-tb-val {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 1.25rem;
font-weight: 500;
line-height: 1;
}
.tm-fin-tb-lbl {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-top: 4px;
}
.tm-fin-green .tm-fin-tb-val { color: #22c55e; }
.tm-fin-blue .tm-fin-tb-val { color: #60a5fa; }
.tm-fin-amber .tm-fin-tb-val { color: #fbbf24; }
.tm-fin-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.tm-fin-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.tm-fin-grid2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.tm-fin-card {
background: var(--tm-fin-white);
border: 1px solid var(--tm-fin-border);
border-radius: 8px;
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
animation: tm-fin-risein 0.7s ease both;
display: flex;
flex-direction: column;
}
.tm-fin-card:hover {
border-color: #bfdbfe;
box-shadow: 0 8px 24px rgba(29,78,216,0.08);
transform: translateY(-2px);
}
.tm-fin-card:nth-child(1) { animation-delay: 0.04s; }
.tm-fin-card:nth-child(2) { animation-delay: 0.10s; }
.tm-fin-card:nth-child(3) { animation-delay: 0.16s; }
@keyframes tm-fin-risein {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-fin-feat .tm-fin-q { font-size: 1.1rem; flex: 1; }
.tm-fin-prod-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 14px;
width: fit-content;
}
.tm-fin-tag-invest { background: rgba(13,148,136,0.1); color: var(--tm-fin-teal); border: 1px solid rgba(13,148,136,0.2); }
.tm-fin-tag-loan { background: rgba(29,78,216,0.08); color: var(--tm-fin-blue); border: 1px solid rgba(29,78,216,0.15); }
.tm-fin-tag-save { background: rgba(22,163,74,0.08); color: var(--tm-fin-green); border: 1px solid rgba(22,163,74,0.15); }
.tm-fin-tag-trade { background: rgba(217,119,6,0.08); color: var(--tm-fin-amber); border: 1px solid rgba(217,119,6,0.15); }
.tm-fin-stars {
display: flex;
gap: 2px;
margin-bottom: 12px;
font-size: 12px;
color: var(--tm-fin-amber);
}
.tm-fin-q {
font-family: 'Instrument Serif', Georgia, serif;
font-style: italic;
font-size: 0.98rem;
line-height: 1.6;
color: var(--tm-fin-text);
margin: 0 0 18px;
}
.tm-fin-q em { font-style: normal; font-weight: 400; color: var(--tm-fin-blue); }
.tm-fin-author {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid var(--tm-fin-border);
padding-top: 14px;
margin-top: auto;
}
.tm-fin-av {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.tm-fin-av-t { background: rgba(13,148,136,0.1); color: var(--tm-fin-teal); }
.tm-fin-av-b { background: rgba(29,78,216,0.1); color: var(--tm-fin-blue); }
.tm-fin-av-g { background: rgba(22,163,74,0.1); color: var(--tm-fin-green); }
.tm-fin-av-a { background: rgba(217,119,6,0.1); color: var(--tm-fin-amber); }
.tm-fin-an {
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--tm-fin-text);
line-height: 1.3;
display: block;
}
.tm-fin-ar { font-size: 10px; color: var(--tm-fin-muted); margin-top: 2px; }
.tm-fin-roi-box {
background: linear-gradient(135deg, rgba(13,148,136,0.06), rgba(22,163,74,0.06));
border: 1px solid rgba(13,148,136,0.15);
border-radius: 6px;
padding: 12px 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 16px;
}
.tm-fin-roi-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 1.4rem;
font-weight: 500;
color: var(--tm-fin-teal);
line-height: 1;
}
.tm-fin-roi-lbl {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-fin-muted);
margin-top: 2px;
}
.tm-fin-roi-bench {
font-size: 0.75rem;
color: var(--tm-fin-muted);
font-weight: 300;
}
.tm-fin-verified {
position: absolute;
top: 18px;
right: 18px;
display: flex;
align-items: center;
gap: 4px;
font-size: 8px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tm-fin-green);
background: rgba(22,163,74,0.08);
border: 1px solid rgba(22,163,74,0.2);
padding: 3px 7px;
border-radius: 20px;
}
.tm-fin-v-dot {
width: 5px;
height: 5px;
background: var(--tm-fin-green);
border-radius: 50%;
}
.tm-fin-trust-score-card {
background: var(--tm-fin-navy);
border-color: transparent;
border-radius: 8px;
padding: 24px 22px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
animation: tm-fin-risein 0.7s ease 0.22s both;
}
.tm-fin-tsc-num {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 2.4rem;
font-weight: 500;
color: #60a5fa;
line-height: 1;
}
.tm-fin-tsc-lbl {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-top: 8px;
}
.tm-fin-tsc-line {
display: block;
width: 40px;
height: 1px;
background: rgba(255,255,255,0.1);
margin: 14px auto;
}
.tm-fin-tsc-count {
font-size: 10px;
color: rgba(255,255,255,0.3);
letter-spacing: 0.08em;
}
@media (max-width: 820px) {
.tm-fin-grid { grid-template-columns: 1fr; }
.tm-fin-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-fin-card, .tm-fin-trust-score-card { animation: none; }
.tm-fin-card:hover { transform: none; }
.tm-fin-bh-trust-dot { animation: none; }
}