Widgets — Component Gallery

Carousel

Carousel Basic

Basic

Navigation

Basic

Slide 1

Slide 2

Slide 3

View DSL Source

carousel
  carousel-item Slide 1
  carousel-item Slide 2
  carousel-item Slide 3

Navigation

Slide 1

Slide 2

Slide 3

View DSL Source

carousel(navigation pagination loop)
  carousel-item Slide 1
  carousel-item Slide 2
  carousel-item Slide 3

Carousel-item

Carousel Item Basic

Basic

Slide 1 — Introduction

Slide 2 — Features

Slide 3 — Get Started

View DSL Source

carousel
  carousel-item
    card Slide 1 — Introduction
  carousel-item
    card Slide 2 — Features
  carousel-item
    card Slide 3 — Get Started

Comparison

Comparison Basic

Basic

Initial Position

Basic

View DSL Source

comparison
  img(slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80&sat=-100" alt="Grayscale kittens in a basket" style="width:100%")
  img(slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Colour kittens in a basket" style="width:100%")

Initial Position

View DSL Source

comparison(position=25)
  img(slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Untied boot on bricks" style="width:100%")
  img(slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Boot being tied on yellow curb" style="width:100%")

Zoomable-frame

Zoomable Frame

Basic

View DSL Source

zoomable-frame(min-zoom=0.5 max-zoom=3 src="/showroom")