Components

Image Comparison

Before/after media comparison using .wckd-image-comparison with three required layers: base image, .wckd-image-comparison-after-clip overlay image, and .wckd-image-comparison-bar divider. Drag support and scroll-aware reveal are progressive enhancements from wckd-ui.js.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Basic before/after

Place before image, clipped after image, and divider bar in the comparison body.

Markup

<div class="wckd-image-comparison">
  <div>
    <img src="before.jpg" alt="Before" />
    <div class="wckd-image-comparison-after-clip">
      <img src="after.jpg" alt="After" />
    </div>
    <div class="wckd-image-comparison-bar" aria-hidden="true"></div>
  </div>
</div>

When to use

Product before/after showcases, redesign comparisons, and visual QA proof.
Campaign sections where one visual state needs to be contrasted with another in place.

Implementation notes

Provide meaningful alt text for both before and after assets.
Use similar image dimensions to keep divider movement smooth and avoid jumpy clipping.
Include visible helper copy so people understand the divider is draggable.
Optional: set --wic-wipe-start on .wckd-image-comparison (default 0.15) so scroll reveal starts partially open.

Developer checklist

Keep the required wrapper and child class names exactly as documented so JS can bind drag behavior.
Use equal image dimensions and optimized formats to keep pointer interactions smooth.
Test touch drag on mobile and reduced-motion behavior for accessibility.

← All components