NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Hovercard teamlid + uitleg New

Names in running text and an avatar row open a card with a contact person or a glossary explanation. Hover opens with delay, click or Enter pins it; light dismiss and Esc via popover="auto", enter/exit animation with @starting-style. Anchor positioning with a JS positioning fallback.

Jouw dossier · badkamer Kerkstraat 8, Amersfoort

Je project wordt begeleid door , projectleider, en van calculatie. In de offerte staat een voor de tegels.

Team

How to use it

  1. Paste the HTML where the components should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Hovercard teamlid + uitleg · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hcp">
  <p class="hcp__eyebrow">Jouw dossier · badkamer Kerkstraat 8, Amersfoort</p>
  <p class="hcp__txt">Je project wordt begeleid door <button class="hcp__name" type="button" popovertarget="hcp-sanne">Sanne de Wit</button>, projectleider, en <button class="hcp__name" type="button" popovertarget="hcp-mehmet">Mehmet Yıldız</button> van calculatie. In de offerte staat een <button class="hcp__name hcp__name--term" type="button" popovertarget="hcp-stel">stelpost</button> voor de tegels.</p>
  <div class="hcp__team"><span class="hcp__lbl">Team</span>
    <button class="hcp__av hcp__av--a" type="button" popovertarget="hcp-sanne" aria-label="Sanne de Wit">SW</button>
    <button class="hcp__av hcp__av--b" type="button" popovertarget="hcp-mehmet" aria-label="Mehmet Yıldız">MY</button>
    <button class="hcp__av hcp__av--c" type="button" popovertarget="hcp-joost" aria-label="Joost Bakker">JB</button>
  </div>
  <div id="hcp-sanne" class="hcp__card" popover="auto" role="dialog" aria-label="Sanne de Wit">
    <div class="hcp__head"><span class="hcp__pic hcp__av--a" aria-hidden="true">SW</span><div><strong>Sanne de Wit</strong><span>Projectleider · Amersfoort</span></div></div>
    <p class="hcp__stat"><span class="hcp__dot" aria-hidden="true"></span>Bereikbaar tot 17:00</p>
    <dl class="hcp__meta"><div><dt>Tel</dt><dd><a href="tel:+31331234567">033 123 4567</a></dd></div><div><dt>Mail</dt><dd><a href="mailto:sanne@voorbeeld.nl">sanne@voorbeeld.nl</a></dd></div></dl>
    <a class="hcp__cta" href="#belafspraak">Plan een belafspraak</a>
  </div>
  <div id="hcp-mehmet" class="hcp__card" popover="auto" role="dialog" aria-label="Mehmet Yıldız">
    <div class="hcp__head"><span class="hcp__pic hcp__av--b" aria-hidden="true">MY</span><div><strong>Mehmet Yıldız</strong><span>Calculator · ma t/m do</span></div></div>
    <p class="hcp__stat"><span class="hcp__dot hcp__dot--busy" aria-hidden="true"></span>In overleg, terug om 14:30</p>
    <dl class="hcp__meta"><div><dt>Tel</dt><dd><a href="tel:+31331234568">033 123 4568</a></dd></div><div><dt>Mail</dt><dd><a href="mailto:mehmet@voorbeeld.nl">mehmet@voorbeeld.nl</a></dd></div></dl>
    <a class="hcp__cta" href="#offerte">Vraag over je offerte</a>
  </div>
  <div id="hcp-joost" class="hcp__card" popover="auto" role="dialog" aria-label="Joost Bakker">
    <div class="hcp__head"><span class="hcp__pic hcp__av--c" aria-hidden="true">JB</span><div><strong>Joost Bakker</strong><span>Tegelzetter · 14 jaar in dienst</span></div></div>
    <p class="hcp__stat"><span class="hcp__dot hcp__dot--off" aria-hidden="true"></span>Start bij jou op wo 21 okt</p>
    <p class="hcp__note">Joost legt de vloer en wanden. Vragen over de planning lopen via Sanne.</p>
  </div>
  <div id="hcp-stel" class="hcp__card hcp__card--term" popover="auto" role="dialog" aria-label="Wat is een stelpost?">
    <span class="hcp__kick">Begrip</span><strong>Stelpost</strong>
    <p class="hcp__note">Een gereserveerd bedrag, hier € 1.200, voor tegels die je nog zelf uitkiest. Kies je duurder, dan betaal je het verschil. Kies je goedkoper, dan krijg je het terug.</p>
  </div>
</div>
</div>

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 →