Slider

A responsive content carousel component for presenting grouped elements within a controlled horizontal flow. Combine slider structure classes with layout, spacing, and breakpoint utilities to define item width, visible count, and interaction behavior across screen sizes.

Basic

A standard slide configuration designed for horizontal content flow within the slider track. Use this variant for grouped content that follows natural height and adapts responsively across breakpoints.
slider
|
|
slider-mask
|
slider-nav
|
slider-arrow-wrap
|
|
slider-arrow
|
|
slide
Text Content

Heading 2

This slide demonstrates standard content alignment within the slider component. Use consistent spacing, alignment addons, and interaction classes to maintain structural balance across all slides in the same instance.
Media Content
Image Placeholder

Full Screen

A slider configuration where each slide occupies 100vh height. Use this variant for immersive layouts, hero sections, or scroll-driven presentations that require full-screen visual impact.
slider
|
|
slider-mask
|
slider-nav
|
slider-arrow-wrap
|
|
slider-arrow
|
|
slide
|
|
position-relative
|
|
min-height-100vh
Mixed Content
Image Placeholder

Heading 2

This slide demonstrates standard content alignment within the slider component. Use consistent spacing, alignment addons, and interaction classes to maintain structural balance across all slides in the same instance.

Elements

Slider Base
slider
|
|
slider-mask
|
slider-nav
|
slider-arrow-wrap
|
|
slider-arrow
|
|
slide
Arrow Left
slider-arrow
|
|
button
|
|
icon-size-*
|
|
Icon - Chevron
is-left
Arrow Right
slider-arrow
|
|
button
|
|
icon-size-*
|
|
Icon - Chevron
is-right

User Guide

Align Y — Slide Addons

The slide class supports vertical alignment through Align Y addon classes. These addons control how content inside each slide aligns along the Y axis (top, center, or bottom).

For consistent alignment across the slider, every slide must use the same Align Y addon.

Because slides sit within a shared track and often inherit equal height behavior, mixing different vertical alignment addons inside the same slider can create visual imbalance. If one slide uses top alignment while another uses center alignment, content will not line up consistently across the row.

To maintain clean horizontal rhythm:

Alignment consistency ensures predictable layout behavior and preserves structural integrity across breakpoints.

See the examples below for correct implementation of addon classes. The slide class is aligned top by default.

Align Top (Default)
slide
Align Middle
slide
is-middle
Align Bottom
slide
is-bottom