Profielkaarten · 3 varianten New
Three profile cards for team pages and contact blocks: a portrait card with photo and booking button, a landscape card with availability plus call and mail buttons, and a dark card with a follow toggle (aria-pressed). On a small tile the secondary lines drop out via a container query. For practices, installers and advisory firms.
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.
<!-- Profielkaarten · 3 varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pks">
<article class="pks__v">
<img class="pks__foto" src="https://neddev.com/lab-media/profielkaart-set-1.webp" alt="Portret van Ingrid Smit" width="768" height="1376">
<div class="pks__vb"><h3 class="pks__n">Ingrid Smit</h3><p class="pks__r">Fysiotherapeut, Utrecht</p><a class="pks__btn pks__btn--oranje" href="#profielkaart-set">Plan bij Ingrid</a></div>
</article>
<article class="pks__h">
<img class="pks__av" src="https://neddev.com/lab-media/profielkaart-set-2.webp" alt="" width="800" height="979">
<div class="pks__hb"><h3 class="pks__n">Mehmet Kaya</h3><p class="pks__r">Monteur warmtepompen</p><p class="pks__on"><i aria-hidden="true"></i>Bereikbaar tot 17:00</p>
<div class="pks__acts"><a class="pks__btn" href="tel:0381234567">Bellen</a><a class="pks__btn" href="mailto:mehmet@voorbeeld.nl">Mailen</a></div></div>
</article>
<article class="pks__h pks__h--donker">
<img class="pks__av" src="https://neddev.com/lab-media/profielkaart-set-3.webp" alt="" width="768" height="1376">
<div class="pks__hb"><h3 class="pks__n">Noor Bakker</h3><p class="pks__r">Hypotheekadviseur, Amersfoort</p><p class="pks__x">Schrijft over verduurzamen</p>
<div class="pks__acts"><button class="pks__btn pks__volg" type="button" aria-pressed="false">Volgen</button></div></div>
</article>
</div>
</div>/* Profielkaarten · 3 varianten · NedDev · eigen werk. */
.pks{position:absolute;inset:0;display:grid;grid-template-columns:38% 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:9px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#f4f3f1;text-align:left;container-type:size}
.pks *{box-sizing:border-box}
.pks__v{grid-row:1/3;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pks__foto{flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 22%;display:block;background:#e6e3de}
.pks__vb{padding:8px 9px 9px;display:flex;flex-direction:column;gap:1px}
.pks__n{margin:0;font-size:13.5px;line-height:1.2;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pks__r{margin:0;font-size:12px;line-height:1.3;color:#4a4a4a}
.pks__h{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:start;min-height:0;padding:9px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;overflow:hidden}
.pks__av{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 20%;display:block;background:#e6e3de}
.pks__hb{min-width:0;display:flex;flex-direction:column;gap:1px;height:100%}
.pks__on{margin:2px 0 0;display:flex;align-items:center;gap:5px;font-size:12px;color:#1f6b3a}
.pks__on i{width:7px;height:7px;border-radius:50%;background:#1f9d4c;flex:none}
.pks__x{margin:2px 0 0;font-size:12px;color:#cfccc6}
.pks__acts{display:flex;gap:6px;margin-top:auto;padding-top:5px}
.pks__btn{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 12px/1 'Switzer',system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.pks__btn:hover{background:#0a0a0a;color:#fff}
.pks__btn--oranje{margin-top:6px;background:#F5480F;border-color:#F5480F;min-height:28px}
.pks__btn--oranje:hover{background:#0a0a0a;border-color:#0a0a0a}
.pks__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.pks__h--donker{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.pks__h--donker .pks__r{color:#d8d5cf}
.pks__h--donker .pks__btn{background:#0a0a0a;color:#fff;border-color:#fff}
.pks__h--donker .pks__btn:hover,.pks__volg[aria-pressed="true"]{background:#fff;color:#0a0a0a}
@container (max-height:230px){.pks__on,.pks__x{display:none}.pks__h{grid-template-columns:34px 1fr;gap:8px;padding:8px}.pks__av{width:34px;height:34px}.pks__vb{padding:7px 8px 8px}.pks__btn{padding:0 8px}}
@media (prefers-reduced-motion:reduce){.pks__btn{transition:none}}// Profielkaarten · 3 varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var b = root.querySelector('.pks__volg');
b.addEventListener('click', function () { var on = b.getAttribute('aria-pressed') !== 'true'; b.setAttribute('aria-pressed', String(on)); b.textContent = on ? 'Volgt' : 'Volgen'; });
[].forEach.call(root.querySelectorAll('.pks a[href^="#"]'), 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 →