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

Knop wordt bevestigingskaart New

The "Cancel appointment" button grows into a confirmation card (native dialog) and shrinks back; with loading, error (tick "storing") and success. View Transitions for the shape change, without support or with reduced motion the card appears instantly. Esc and Back close it, focus returns to the button. For a separate confirmation page on a multi-page site: @view-transition { navigation: auto; } and the same view-transition-name on button and card.

Garage Bakker · ZwolleGepland

APK en kleine beurt

vr 16 okt · 09:30 tot ca. 11:00

GX-418-K

Afspraak annuleren?

Je APK op vr 16 okt om 09:30 vervalt. Kosteloos tot 24 uur vooraf.

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.
<!-- Knop wordt bevestigingskaart · NedDev · eigen werk. -->
<div class="jouw-container">
<!-- Knop en dialog krijgen om beurten view-transition-name: vtd-shape; de browser morpht de vorm.
  De dialog opent met show() (niet-modaal, blijft in het blok). Op een echte pagina mag showModal() en is Esc ingebouwd.
  Bevestiging als aparte pagina (multi-page): @view-transition { navigation: auto; } en op beide pagina's view-transition-name: vtd-shape
  op de knop en op de kaart. Reduced motion: @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } -->
<div class="vtd">
  <div class="vtd__card">
    <div class="vtd__row"><span class="vtd__kick">Garage Bakker · Zwolle</span><span class="vtd__state">Gepland</span></div>
    <p class="vtd__h">APK en kleine beurt</p>
    <p class="vtd__meta">vr 16 okt · 09:30 tot ca. 11:00</p>
    <div class="vtd__plate" aria-label="Kenteken GX-418-K"><span class="vtd__nl" aria-hidden="true">NL</span><span>GX-418-K</span></div>
    <button class="vtd__open" type="button" aria-haspopup="dialog">Afspraak annuleren</button>
    <button class="vtd__nieuw" type="button" hidden>Nieuwe afspraak plannen</button>
    <dialog class="vtd__dlg" aria-labelledby="vtd-t" aria-describedby="vtd-d">
      <p class="vtd__dt" id="vtd-t">Afspraak annuleren?</p>
      <p class="vtd__dd" id="vtd-d">Je APK op vr 16 okt om 09:30 vervalt. Kosteloos tot 24 uur vooraf.</p>
      <p class="vtd__err" role="alert" hidden></p>
      <div class="vtd__acts"><button class="vtd__terug" type="button">Terug</button><button class="vtd__ja" type="button">Ja, annuleren</button></div>
    </dialog>
  </div>
  <label class="vtd__sim"><input type="checkbox" class="vtd__storing"> storing</label>
  <span class="vtd__sr" aria-live="polite"></span>
</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 →