Linten en labels · 4 varianten New
Four ways to flag a plan or deal: diagonal corner ribbon, "Most chosen" pill on the border, hanging notched flag (clip-path) and a ribbon folding around the card edge. Pure CSS; the ribbon comes before the name in the DOM so screen readers say "Most chosen, Comfort". Hover and focus calmly recolour the border.
Onderhoudsabonnement cv-ketel · prijzen per maand, incl. btw
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.
<!-- 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'));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 →