Betaalpas die omdraait New
A business expense card in CSS that flips in 3D to its back with a magnetic strip, hidden CVC and a call-back number. Flip with the button (aria-pressed) or by clicking the card; next to it the amount spent this month. Masked numbers only, never a real card number. For fintech, SaaS and banking pages that show off their card.
Van Leeuwen Bouw
Kaartnummer eindigt op 0427
R. van LeeuwenGeldig tot 09/29
€ 612,40 besteed van € 1.500 in oktober
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Betaalpas die omdraait · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bpo">
<div class="bpo__in">
<div class="bpo__scene">
<div class="bpo__inner">
<div class="bpo__face bpo__front">
<p class="bpo__org">Van Leeuwen Bouw</p>
<svg class="bpo__chip" viewBox="0 0 30 22" aria-hidden="true"><rect x=".5" y=".5" width="29" height="21" rx="4"/><path d="M0 8h9v6H0M30 8h-9v6h9M9 0v22M21 0v22M9 11h12"/></svg>
<p class="bpo__nr"><span class="bpo__sr">Kaartnummer eindigt op </span><span aria-hidden="true">•••• •••• •••• </span>0427</p>
<p class="bpo__onder"><span>R. van Leeuwen</span><span><span class="bpo__sr">Geldig tot </span>09/29</span></p>
</div>
<div class="bpo__face bpo__back" aria-hidden="true">
<span class="bpo__strip"></span>
<p class="bpo__cvc"><span>Handtekening</span><b>•••</b></p>
<p class="bpo__help">Gevonden? Bel 030 123 4567. De CVC staat alleen in de app.</p>
</div>
</div>
</div>
<div class="bpo__side">
<p class="bpo__lim"><strong>€ 612,40</strong> besteed van € 1.500 in oktober</p>
<div class="bpo__meter" role="progressbar" aria-valuemin="0" aria-valuemax="1500" aria-valuenow="612" aria-label="Besteed deze maand"><i></i></div>
<button class="bpo__btn" type="button" aria-pressed="false">Toon achterkant</button>
</div>
</div>
</div>
</div>/* Betaalpas die omdraait · NedDev · eigen werk. */
.bpo{position:absolute;inset:0;padding:12px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left;container-type:size}
.bpo *{box-sizing:border-box}
.bpo__in{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:18px}
.bpo__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bpo__scene{width:min(232px,58cqw);aspect-ratio:85.6/54;perspective:900px;flex:none;cursor:pointer;container-type:inline-size}
.bpo__inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.bpo.is-om .bpo__inner{transform:rotateY(180deg)}
.bpo__face{position:absolute;inset:0;border-radius:8px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#0a0a0a;color:#fff;box-shadow:0 12px 24px -12px rgba(10,10,10,.6)}
.bpo__front{padding:12px 14px;display:flex;flex-direction:column}
.bpo__front::after{content:'';position:absolute;right:-30%;top:-46%;width:78%;aspect-ratio:1;border-radius:50%;background:#F5480F;opacity:.92}
.bpo__front>*{position:relative;z-index:1}
.bpo__org{margin:0;font-size:12.5px;font-weight:600;white-space:nowrap}
.bpo__chip{width:30px;height:22px;margin-top:auto;fill:#d8d3cb;stroke:#9a958d;stroke-width:.8}
.bpo__nr{margin:8px 0 0;font-size:max(12px,6.4cqi);font-weight:600;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.bpo__onder{margin:6px 0 0;display:flex;justify-content:space-between;font-size:12px;color:#d8d5cf}
.bpo__back{transform:rotateY(180deg);background:#1b1b1b}
.bpo__strip{position:absolute;left:0;right:0;top:14px;height:24%;background:#0a0a0a}
.bpo__cvc{position:absolute;left:12px;right:12px;top:48%;margin:0;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:#f4f3f1;color:#0a0a0a;border-radius:4px;font-size:12px}
.bpo__cvc b{letter-spacing:.1em}
.bpo__help{position:absolute;left:12px;right:12px;bottom:10px;margin:0;font-size:12px;line-height:1.3;color:#d8d5cf}
.bpo__side{display:flex;flex-direction:column;gap:8px;width:140px}
.bpo__lim{margin:0;font-size:12.5px;line-height:1.35;color:#3a3a3a}
.bpo__lim strong{display:block;font-size:18px;color:#0a0a0a;font-variant-numeric:tabular-nums}
.bpo__meter{height:6px;background:#dedad4;border-radius:4px;overflow:hidden}
.bpo__meter i{display:block;height:100%;width:41%;background:#0a0a0a}
.bpo__btn{min-height:34px;padding:0 12px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 12.5px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s,color .15s}
.bpo__btn:hover{background:#0a0a0a;color:#fff}
.bpo__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@container (max-width:380px){
.bpo__in{flex-direction:column;gap:10px}
.bpo__scene{width:min(196px,calc(60cqh * 1.585))}
.bpo__side{width:min(100%,300px);flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 10px}
.bpo__lim{flex:1;min-width:0}.bpo__lim strong{display:inline;font-size:14px}
.bpo__meter{display:none}
}
@media (prefers-reduced-motion:reduce){.bpo__inner{transition:none}}// Betaalpas die omdraait · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.bpo'), b = w.querySelector('.bpo__btn');
var front = w.querySelector('.bpo__front'), back = w.querySelector('.bpo__back');
function flip() {
var om = !w.classList.contains('is-om');
w.classList.toggle('is-om', om);
b.setAttribute('aria-pressed', String(om));
b.textContent = om ? 'Toon voorkant' : 'Toon achterkant';
front.setAttribute('aria-hidden', String(om)); back.setAttribute('aria-hidden', String(!om));
}
b.addEventListener('click', flip);
w.querySelector('.bpo__scene').addEventListener('click', flip);
}
init(document.querySelector('.jouw-container'));More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →