NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Ingangen per levensgebeurtenis Nieuw

Bezoekers kiezen hun situatie ("U koopt een huis", "Er is iemand overleden") en zien wat ze bij de notaris regelen, wat bij de gemeente, de doorlooptijd en de prijs vanaf. Tabs met pijltjestoetsen; wissel via View Transitions met @supports-check, zonder die API wisselt het paneel direct.

Hendriks & Van Loon notarissen · ’s-Hertogenbosch

Wat speelt er bij u?

Kies uw situatie. U ziet wat u bij ons regelt, wat bij de gemeente en wat het kost.

Zo gebruik je het

  1. Plak de HTML op de plek waar het onderdeel moet komen.
  2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
  3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Ingangen per levensgebeurtenis · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lvg">
  <div class="lvg__in">
    <div class="lvg__head">
      <p class="lvg__eyebrow">Hendriks &amp; Van Loon notarissen · ’s-Hertogenbosch</p>
      <h2 class="lvg__h">Wat speelt er bij u?</h2>
      <p class="lvg__lead">Kies uw situatie. U ziet wat u bij ons regelt, wat bij de gemeente en wat het kost.</p>
    </div>
    <div class="lvg__wrap">
      <div class="lvg__tabs" role="tablist" aria-label="Levensgebeurtenissen" aria-orientation="vertical">
        <button class="lvg__tab" role="tab" id="lvg-t0" aria-controls="lvg-p" aria-selected="true" data-i="0"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M5 15L16 6l11 9M8 13v14h16V13"/><path d="M14 27v-7h4v7"/></svg>U koopt een huis</button>
        <button class="lvg__tab" role="tab" id="lvg-t1" aria-controls="lvg-p" aria-selected="false" tabindex="-1" data-i="1"><svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="12" cy="17" r="7"/><circle cx="20" cy="17" r="7"/></svg>U gaat trouwen of samenwonen</button>
        <button class="lvg__tab" role="tab" id="lvg-t2" aria-controls="lvg-p" aria-selected="false" tabindex="-1" data-i="2"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M16 28V12M16 12c-4 0-7-3-7-7 4 0 7 3 7 7zM16 12c4 0 7-3 7-7-4 0-7 3-7 7z"/></svg>Er is iemand overleden</button>
        <button class="lvg__tab" role="tab" id="lvg-t3" aria-controls="lvg-p" aria-selected="false" tabindex="-1" data-i="3"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M8 4h11l5 5v19H8z"/><path d="M19 4v5h5M12 16h8M12 20h8M12 24h4"/></svg>U wilt iets vastleggen voor later</button>
        <button class="lvg__tab" role="tab" id="lvg-t4" aria-controls="lvg-p" aria-selected="false" tabindex="-1" data-i="4"><svg viewBox="0 0 32 32" aria-hidden="true"><rect x="5" y="10" width="22" height="16" rx="2"/><path d="M12 10V6h8v4M5 17h22"/></svg>U start een bedrijf</button>
        <button class="lvg__tab" role="tab" id="lvg-t5" aria-controls="lvg-p" aria-selected="false" tabindex="-1" data-i="5"><svg viewBox="0 0 32 32" aria-hidden="true"><path d="M16 5v22M6 10h20M9 10l-4 9h8zM23 10l-4 9h8z"/></svg>U gaat scheiden</button>
      </div>
      <div class="lvg__panel" id="lvg-p" role="tabpanel" aria-labelledby="lvg-t0" tabindex="0"></div>
    </div>
  </div>
</div>
</div>

Meer uit paginasecties

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 →