Divider Wave

Fetch pattern JSON: curl https://webspire.de/patterns/divider/wave.json

wave.html

<!-- Wave divider: dark section → light section -->
<div class="ws-divider relative">
  <div class="bg-[var(--ws-color-surface)] py-20 text-center text-white">
    <h2 class="text-3xl font-bold">Dark Section Above</h2>
  </div>
  <div class="relative -mt-px text-white">
    <svg class="block w-full" viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <path d="M0 48h720S360 0 0 0v48zm720 0h720V0s-360 48-720 48z" fill="currentColor"/>
    </svg>
  </div>
  <div class="bg-[var(--ws-color-surface)] py-20 text-center">
    <h2 class="text-3xl font-bold text-slate-900">Light Section Below</h2>
  </div>
</div>

Details

Family

divider

Tier

enhanced

Kind

section

Extends

divider/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Experimental Draft

dividerwavesvgsectiontransitionseparatorcurve

Slots

Name	Required	Description
svg	Yes	The SVG wave path element.