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

Ingangen per levensgebeurtenis New

Visitors pick their situation ("You are buying a house", "Someone has died") and see what to arrange with the notary, what with the municipality, lead time and starting price. Tabs with arrow keys; switch via View Transitions with a feature check, without the API the panel swaps instantly.

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.

How to use it

  1. Paste the HTML where the page sections 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.
<!-- 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>

More page sections

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 →