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

Sectiescheiders met vorm New

Six dividers between two sections: wave, teeth, checkerboard, scallop, pixel stairs and arch, plus three colour pairs. Inline SVG (patterns for repeating shapes, preserveAspectRatio="none" for wave and arch) with fill: currentColor, so the divider always takes the colour of the next section. Switching uses :has() on radio buttons, pure CSS, works everywhere.

Vorm
Kleur
WerkwijzeIn vier stappen naar je nieuwe tuin
01 Intake02 Ontwerp03 Aanleg04 Nazorg

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. No JavaScript needed.
<!-- Sectiescheiders met vorm · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ssd">
  <div class="ssd__pick">
    <fieldset class="ssd__set"><legend class="ssd__lg">Vorm</legend>
      <label><input type="radio" name="ssd-v" value="golf" checked><span>Golf</span></label><label><input type="radio" name="ssd-v" value="tand"><span>Tanden</span></label><label><input type="radio" name="ssd-v" value="schaak"><span>Schaak</span></label><label><input type="radio" name="ssd-v" value="schulp"><span>Schulp</span></label><label><input type="radio" name="ssd-v" value="pixel"><span>Pixel</span></label><label><input type="radio" name="ssd-v" value="boog"><span>Boog</span></label>
    </fieldset>
    <fieldset class="ssd__set ssd__set--c"><legend class="ssd__lg">Kleur</legend>
      <label><input type="radio" name="ssd-c" value="1" checked><span class="ssd__sw" style="--a:#0a0a0a;--b:#F5480F"></span><b class="ssd__lg">Zwart en oranje</b></label><label><input type="radio" name="ssd-c" value="2"><span class="ssd__sw" style="--a:#1f3b2d;--b:#e9dfc9"></span><b class="ssd__lg">Groen en zand</b></label><label><input type="radio" name="ssd-c" value="3"><span class="ssd__sw" style="--a:#f4f3f1;--b:#1b2a4a"></span><b class="ssd__lg">Beton en marine</b></label>
    </fieldset>
  </div>
  <div class="ssd__pg">
    <div class="ssd__a"><span class="ssd__k">Werkwijze</span><b>In vier stappen naar je nieuwe tuin</b></div>
    <div class="ssd__d" aria-hidden="true">
      <svg class="ssd__v ssd__v--golf" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 6 C8 0 17 0 25 5 S42 10 50 5 67 0 75 5 92 10 100 4 V10 H0Z"/></svg>
      <svg class="ssd__v ssd__v--tand"><defs><pattern id="ssd-p1" width="20" height="12" patternUnits="userSpaceOnUse"><path d="M0 12 10 0 20 12Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p1)"/></svg>
      <svg class="ssd__v ssd__v--schaak"><defs><pattern id="ssd-p2" width="16" height="16" patternUnits="userSpaceOnUse"><rect width="8" height="8" x="8"/><rect width="8" height="8" y="8"/><rect width="16" height="0"/></pattern></defs><rect width="100%" height="16" fill="url(#ssd-p2)"/></svg>
      <svg class="ssd__v ssd__v--schulp"><defs><pattern id="ssd-p3" width="24" height="12" patternUnits="userSpaceOnUse"><path d="M0 12A12 12 0 0 1 24 12Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p3)"/></svg>
      <svg class="ssd__v ssd__v--pixel"><defs><pattern id="ssd-p4" width="48" height="16" patternUnits="userSpaceOnUse"><path d="M0 16V12H8V8H16V4H24V0H32V4H40V8H48V16Z"/></pattern></defs><rect width="100%" height="100%" fill="url(#ssd-p4)"/></svg>
      <svg class="ssd__v ssd__v--boog" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0 10 C25 -2 75 -2 100 10Z"/></svg>
    </div>
    <div class="ssd__b"><span>01 Intake</span><span>02 Ontwerp</span><span>03 Aanleg</span><span>04 Nazorg</span></div>
  </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 →