15 — Components
Images, gallery & lightbox
.image-frame wraps an image in a system-consistent border.
.gallery with data-lightbox opens the lightbox on click.
Image frame · ratio 1:1
Image frame · ratio 4:5
Image frame · ratio 16:9
<!-- 1:1 -->
<figure class="image-frame is-square">
<div class="image-media">
<img src="image.jpg" alt="Description">
</div>
<figcaption class="image-caption">Caption</figcaption>
</figure>
<!-- 4:5 -->
<figure class="image-frame is-4-5">
<div class="image-media">
<img src="image.jpg" alt="Description">
</div>
<figcaption class="image-caption">Caption</figcaption>
</figure>
<!-- 16:9 -->
<figure class="image-frame is-16-9">
<div class="image-media">
<img src="image.jpg" alt="Description">
</div>
<figcaption class="image-caption">Caption</figcaption>
</figure>Gallery with lightbox
Click any image to open the lightbox. Arrow keys ←/→ to navigate, Esc to close.
<div class="gallery gallery-4" data-lightbox="demo">
<a href="image-full.jpg" class="gallery-item">
<img src="image-thumb.jpg" alt="Photo 1">
</a>
<a href="image-full.jpg" class="gallery-item">
<img src="image-thumb.jpg" alt="Photo 2">
</a>
<a href="image-full.jpg" class="gallery-item">
<img src="image-thumb.jpg" alt="Photo 3">
</a>
<a href="image-full.jpg" class="gallery-item">
<img src="image-thumb.jpg" alt="Photo 4">
</a>
</div>16 — Components
Slider / Carousel
Image carousel with dots and arrows. Add data-slider-auto="5000" for auto-play.
Image only with dots & arrows
<div class="slider" data-slider data-slider-dots data-slider-arrows>
<div class="slider-track">
<div class="slider-slide"><img src="image.jpg" alt="Slide 1"></div>
<div class="slider-slide"><img src="image.jpg" alt="Slide 2"></div>
<div class="slider-slide"><img src="image.jpg" alt="Slide 3"></div>
</div>
</div>Hero slider (image + text overlay)
<div class="slider slider-hero" data-slider data-slider-dots data-slider-arrows data-slider-auto="6000">
<div class="slider-track">
<div class="slider-slide">
<img src="image.jpg" alt="">
<div class="slider-hero-overlay">
<div class="slider-hero-content">
<h2>Slide title</h2>
<p>Slide description text.</p>
</div>
</div>
</div>
</div>
</div>17 — Components
Video Player
Minimal custom video player. Auto-builds controls from a <video> tag.
<!-- Add data-video-player to auto-init the custom controls -->
<div class="video-player" data-video-player>
<video src="video.mp4" preload="metadata"></video>
</div>18 — Components
Audio Player
Lightweight audio player built from data attributes.
<div class="audio-player" data-audio-player
data-src="audio.mp3"
data-title="Track Title"
data-artist="Artist Name">
</div>29 — Utilities
Image Filters
CSS filter classes for quick image treatment. Hover variants restore the original.
Original
.img-bw
.img-sepia
.img-muted
<!-- Original (no filter) -->
<img src="image.jpg" alt="Original">
<!-- Black & white -->
<img src="image.jpg" alt="B/W" class="img-bw">
<!-- Sepia -->
<img src="image.jpg" alt="Sepia" class="img-sepia">
<!-- Muted -->
<img src="image.jpg" alt="Muted" class="img-muted">Hover to reveal
.img-bw .img-bw-hover
.img-sepia .img-sepia-hover
.img-warm
<!-- B/W → colour on hover -->
<img src="image.jpg" alt="B/W hover" class="img-bw img-bw-hover">
<!-- Sepia → colour on hover -->
<img src="image.jpg" alt="Sepia hover" class="img-sepia img-sepia-hover">
<!-- Warm filter -->
<img src="image.jpg" alt="Warm" class="img-warm">