Linten en labels · 4 varianten Nieuw
Vier manieren om een abonnement of actie te markeren: diagonaal hoeklint, "Meest gekozen"-pil op de rand, hangende vaan met inkeping (clip-path) en een lint dat om de kaartrand vouwt. Pure CSS; het lint staat vóór de naam in de DOM zodat schermlezers "Meest gekozen, Comfort" voorlezen. Hover en focus kleuren de rand rustig.
Onderhoudsabonnement cv-ketel · prijzen per maand, incl. btw
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Linten en labels · 4 varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rbn"><p class="rbn__k">Onderhoudsabonnement cv-ketel · prijzen per maand, incl. btw</p><div class="rbn__g">
<a class="rbn__c rbn__c--a" href="#"><span class="rbn__corner">Actie</span><span class="rbn__n">Compleet</span><span class="rbn__p"><s>€ 19,95</s> € 16,95<small>/mnd</small></span><span class="rbn__d">Eerste jaar, daarna € 19,95</span><span class="rbn__v">A · hoeklint</span></a>
<a class="rbn__c rbn__c--b" href="#"><span class="rbn__pill">Meest gekozen</span><span class="rbn__n">Comfort</span><span class="rbn__p">€ 14,50<small>/mnd</small></span><span class="rbn__d">Beurt + storing binnen 24 uur</span><span class="rbn__v">B · pil op rand</span></a>
<a class="rbn__c rbn__c--c" href="#"><span class="rbn__flag">-15%</span><span class="rbn__n">Basis jaarlijks</span><span class="rbn__p">€ 8,05<small>/mnd</small></span><span class="rbn__d">Bij betaling per jaar</span><span class="rbn__v">C · vaan</span></a>
<a class="rbn__c rbn__c--d" href="#"><span class="rbn__band">Nieuw</span><span class="rbn__n">Warmtepomp</span><span class="rbn__p">€ 24,50<small>/mnd</small></span><span class="rbn__d">Hybride en all-electric</span><span class="rbn__v">D · gevouwen lint</span></a></div></div>
</div>/* Linten en labels · 4 varianten · NedDev · eigen werk. */
.rbn{position:absolute;inset:0;box-sizing:border-box;padding:10px 18px 14px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.rbn__k{margin:0;font:500 9.5px 'JetBrains Mono',monospace;color:#5f5e5a}
.rbn__g{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:14px 14px}
.rbn__c{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1px;padding:10px 12px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:5px;color:inherit;text-decoration:none;transition:border-color .18s,box-shadow .18s}
.rbn__c:hover{border-color:#0a0a0a}
.rbn__c:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.rbn__n{font-size:12px;font-weight:650}
.rbn__p{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.rbn__p s{font-size:11px;font-weight:500;color:#6b6a66;margin-right:3px}
.rbn__p small{font-size:10.5px;font-weight:500;color:#6b6a66;margin-left:2px}
.rbn__d{font-size:10.5px;color:#5f5e5a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbn__v{position:absolute;right:8px;bottom:5px;font:500 8.5px 'JetBrains Mono',monospace;color:#9a9893}
.rbn__c--a{overflow:hidden}
.rbn__corner{position:absolute;top:13px;right:-30px;width:104px;transform:rotate(45deg);background:#F5480F;color:#fff;text-align:center;font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;padding:4px 0;box-shadow:0 2px 0 rgba(10,10,10,.12)}
.rbn__c--b{border:2px solid #F5480F}
.rbn__c--b:hover{border-color:#0a0a0a}
.rbn__pill{position:absolute;top:0;left:50%;transform:translate(-50%,-55%);background:#F5480F;color:#fff;border-radius:999px;padding:3px 10px;font-size:10px;font-weight:700;white-space:nowrap;transition:background .18s}
.rbn__c--b:hover .rbn__pill{background:#0a0a0a}
.rbn__flag{position:absolute;top:-5px;right:12px;width:34px;padding:7px 0 12px;background:#0a0a0a;color:#fff;text-align:center;font-size:11px;font-weight:700;clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%);transition:padding .2s}
.rbn__c--c:hover .rbn__flag{padding-bottom:15px}
.rbn__c--d{padding-top:24px}
.rbn__band{position:absolute;top:8px;left:-7px;background:#F5480F;color:#fff;font:700 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px 4px 13px}
.rbn__band::after{content:"";position:absolute;left:0;top:100%;width:7px;height:6px;background:#9c2d07;clip-path:polygon(0 0,100% 0,100% 100%)}
@container (max-width:360px){.rbn__d,.rbn__v{display:none}.rbn__g{gap:12px 10px}.rbn__p{font-size:16px}.rbn__c{padding:8px 10px}.rbn__c--d{padding-top:26px;justify-content:flex-end}.rbn__corner{top:10px;right:-34px}}
@media(prefers-reduced-motion:reduce){.rbn__c,.rbn__flag,.rbn__pill{transition:none}}// Linten en labels · 4 varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.rbn');if(w)w.querySelectorAll('.rbn__c').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));Meer uit componenten
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →