Components

Overlays

Modal-style panels from wckd-ui-components.css: pair .wckd-overlay triggers with adjacent .wckd-overlay-content, get backdrop dismiss and Escape handling from wckd-ui.js, and use matching data-overlay-group values when you need prev/next between siblings.

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

Single overlay trigger

Place the panel as the immediate next sibling after the trigger.

Open overlay

Overlay body

Preview content inside the panel.

Markup

<a href="#" class="wckd-overlay button">Open overlay</a>
<div class="wckd-overlay-content">
  <div class="pad">Overlay body</div>
</div>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Grouped gallery overlay

Assign a shared data-overlay-group value to connect related overlays.

Open A

Gallery A

Use next/previous arrows to move across the group.

Open B

Gallery B

Second panel in the same overlay group.

Markup

<a href="#" class="wckd-overlay button">Open A</a>
<div class="wckd-overlay-content" data-overlay-group="demo-g">...</div>
<a href="#" class="wckd-overlay button">Open B</a>
<div class="wckd-overlay-content" data-overlay-group="demo-g">...</div>

Right flyout panel

Slide in a side panel for contextual actions or details.

Open right flyout

Right flyout

Slides in from the right edge.

Markup

<a href="#" class="wckd-overlay button">Open right flyout</a>
<div class="wckd-overlay-content flyout">...</div>

Top slide-in panel

Slide down from the top for announcement or utility panels.

Open top panel

Top flyout

Slides in from above the viewport.

Markup

<a href="#" class="wckd-overlay button">Open top panel</a>
<div class="wckd-overlay-content flyout-top">...</div>

When to use

  • Use modal overlays for focused detail views and confirmation flows.
  • Use grouped overlays when users need previous/next traversal through related assets.
  • Use flyout variants for contextual details that should not replace the whole page.

Implementation notes

  • The trigger must be immediately followed by .wckd-overlay-content.
  • Use data-overlay-group to enable sequential navigation across related overlays.
  • Include close affordances and verify Escape key behaviour for accessibility.

Developer checklist

  • Ensure each .wckd-overlay trigger is immediately followed by its .wckd-overlay-content sibling.
  • Use shared data-overlay-group values for panels that should be navigated together.
  • Validate backdrop click, Escape close, and focus return behaviour in QA.

← All components