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

Raster filteren en sorteren New

Project grid of 12 cards filtered by category and sorted by date or price; cards glide to their new spot, filtered ones fade. View Transitions with view-transition-class, fallback a small FLIP script (Web Animations), instant with reduced motion. An empty category shows an empty state with reset button. For URL-based filters on a multi-page site: @view-transition { navigation: auto; } and the same view-transition-name per card on both pages.

    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.
    <!-- Raster filteren en sorteren · NedDev · eigen werk. -->
<div class="jouw-container">
<!-- Same-document: elke kaart krijgt tijdens de overgang view-transition-name vtg-c1..vtg-c12 en view-transition-class vtg-card.
  Multi-page (filter als /projecten?cat=keuken): @view-transition { navigation: auto; } en op beide pagina's per project dezelfde
  view-transition-name (bv. via style="view-transition-name: project-12"). Zonder support: FLIP-script hieronder, of gewoon direct.
  Reduced motion: @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } -->
<div class="vtg">
  <div class="vtg__bar">
    <div class="vtg__chips" role="group" aria-label="Filter op categorie">
      <button class="vtg__chip" type="button" data-f="alles" aria-pressed="true">Alles <span>12</span></button>
      <button class="vtg__chip" type="button" data-f="bad" aria-pressed="false">Badkamer <span>4</span></button>
      <button class="vtg__chip" type="button" data-f="keuken" aria-pressed="false">Keuken <span>4</span></button>
      <button class="vtg__chip" type="button" data-f="tuin" aria-pressed="false">Tuin <span>4</span></button>
      <button class="vtg__chip" type="button" data-f="dak" aria-pressed="false">Dakkapel <span>0</span></button>
    </div>
    <label class="vtg__sort"><span class="vtg__sr">Sorteer</span><select class="vtg__sel"><option value="datum">Nieuwste eerst</option><option value="laag">Prijs oplopend</option><option value="hoog">Prijs aflopend</option></select></label>
  </div>
  <ul class="vtg__grid" aria-label="Projecten"></ul>
  <div class="vtg__leeg" hidden><p>Nog geen dakkapellen in dit overzicht.</p><button class="vtg__reset" type="button">Toon alle projecten</button></div>
  <span class="vtg__sr vtg__live" 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 →