Basic Stepper Example, Responsive behavior triggered via plain CSS

Suppress small step indicator dots

Suppress small step interactivity

Stepper example with mds-stepper--wide modifier class triggering the wide layout regardless of viewport width

mds-stepper--wide could be added dynamically via Javascript if desired

Stepper example with mds-stepper--light-labels modifier class triggering the wide layout regardless of viewport width

Stepper examples with responsive behavior defined using the scss mixin in a separate stylesheet

Long Labels, doesn't switch to wide layout until 1568px

Long Labels, medium font size, switches to wide layout at 1280px

Long Labels, small font size, switches to wide layout at 1112px

Labels are short enough, switch to wide layout at 200px

Basic Stepper Example, Responsive behavior triggered via plain CSS

Suppress small step indicator dots

Suppress small step interactivity

Stepper example with mds-stepper--wide modifier class triggering the wide layout regardless of viewport width

mds-stepper--wide could be added dynamically via Javascript if desired

Stepper example with mds-stepper--light-labels modifier class triggering the wide layout regardless of viewport width

Stepper examples with responsive behavior defined using the scss mixin in a separate stylesheet

Long Labels, doesn't switch to wide layout until 1568px

Long Labels, medium font size, switches to wide layout at 1280px

Long Labels, small font size, switches to wide layout at 1112px

Labels are short enough, switch to wide layout at 200px

Basic Stepper Example, Responsive behavior triggered via plain CSS

Suppress small step indicator dots

Suppress small step interactivity

Stepper example with mds-stepper--wide modifier class triggering the wide layout regardless of viewport width

mds-stepper--wide could be added dynamically via Javascript if desired

Stepper example with mds-stepper--light-labels modifier class triggering the wide layout regardless of viewport width

Stepper examples with responsive behavior defined using the scss mixin in a separate stylesheet

Long Labels, doesn't switch to wide layout until 1568px

Long Labels, medium font size, switches to wide layout at 1280px

Long Labels, small font size, switches to wide layout at 1112px

Labels are short enough, switch to wide layout at 200px

Basic Stepper Example, Responsive behavior triggered via plain CSS

Suppress small step indicator dots

Suppress small step interactivity

Stepper example with mds-stepper--wide modifier class triggering the wide layout regardless of viewport width

mds-stepper--wide could be added dynamically via Javascript if desired

Stepper example with mds-stepper--light-labels modifier class triggering the wide layout regardless of viewport width

Stepper examples with responsive behavior defined using the scss mixin in a separate stylesheet

Long Labels, doesn't switch to wide layout until 1568px

Long Labels, medium font size, switches to wide layout at 1280px

Long Labels, small font size, switches to wide layout at 1112px

Labels are short enough, switch to wide layout at 200px

Basic Stepper Example, Responsive behavior triggered via plain CSS

Suppress small step indicator dots

Suppress small step interactivity

Stepper example with mds-stepper--wide modifier class triggering the wide layout regardless of viewport width

mds-stepper--wide could be added dynamically via Javascript if desired

Stepper example with mds-stepper--light-labels modifier class triggering the wide layout regardless of viewport width

Stepper examples with responsive behavior defined using the scss mixin in a separate stylesheet

Long Labels, doesn't switch to wide layout until 1568px

Long Labels, medium font size, switches to wide layout at 1280px

Long Labels, small font size, switches to wide layout at 1112px

Labels are short enough, switch to wide layout at 200px





Demos





Demo No Animation

Small Steps No Animation

Demo No Animation

Small Steps No Animation

Demo No Animation

Small Steps No Animation

Demo No Animation

Small Steps No Animation

Demo No Animation

Small Steps No Animation