Gallery

Searchable and filterable image galleries with lightbox, keyboard navigation, thumbnails, and Sass v2 variants.

Use the focused gallery template when JS behavior matters because it emits the exact antsand-gallery class contract.

Component
Mountain Sunrise

Mountain Sunrise

Golden hour at elevation.

Nature
Glass Tower

Glass Tower

Modern architecture and reflections.

Architecture
Forest Canopy

Forest Canopy

Looking up through ancient trees.

Nature
Color Flow

Color Flow

Abstract movement and contrast.

Abstract
Bridge at Night

Bridge at Night

Steel cables and city lights.

Architecture
Ocean Waves

Ocean Waves

Pacific coast at sunset.

Nature

Gallery data contract

Set header.component_type to gallery, choose a gallery_config.variant, then provide body[] image items.

databoard.menu.stylesdoc_component_gallery.topo json 
{
  "header": {
    "component_type": "gallery",
    "gallery_config": {
      "variant": "cards",
      "search": true,
      "filters": ["nature", "architecture"]
    }
  },
  "body": [
    {
      "gallery_item": true,
      "img_src": "/images/thumb.jpg",
      "full_src": "/images/full.jpg",
      "title": "Project title",
      "description": "Short caption",
      "category": "nature"
    }
  ]
}

Grid gallery

A balanced responsive grid for media libraries, product images, and project screenshots.

Layout
Field Study

Field Study

A calm outdoor frame.

Nature
Mountain Trail

Mountain Trail

Open landscape and motion.

Nature
Urban Edge

Urban Edge

Structure and contrast.

Architecture
Color Field

Color Field

Soft abstract palette.

Abstract

Masonry gallery

A CSS-column flow for mixed image ratios where rigid rows would waste space.

Layout
Forest Road

Forest Road

Tall editorial crop.

Travel
Workbench

Workbench

Short texture crop.

Editorial
Cafe Window

Cafe Window

Vertical story frame.

Editorial
Cloudline

Cloudline

Landscape detail.

Travel
Street Light

Street Light

Long vertical rhythm.

Editorial

Minimal image wall

Tight, captionless tiles for high-density photo streams and quick visual scanning.

Layout
Tile 01

Tile 01

Tile 02

Tile 02

Tile 03

Tile 03

Tile 04

Tile 04

Tile 05

Tile 05

Tile 06

Tile 06

Showcase gallery

A featured image plus supporting grid for portfolios, launches, and case-study highlights.

Layout
Featured Launch

Featured Launch

Large lead item anchors the gallery.

Featured
Detail A

Detail A

Supporting image.

Support
Detail B

Detail B

Supporting image.

Support
Detail C

Detail C

Supporting image.

Support
Detail D

Detail D

Supporting image.

Support

One data shape. Five layouts.

The renderer keeps the same image data contract. The variant class changes the layout.

Variants

grid

Default responsive grid for media libraries.

grid json 
"gallery_config": { "variant": "grid", "search": true }

cards

Elevated portfolio cards with captions and hover lift.

cards json 
"gallery_config": { "variant": "cards", "filters": ["web", "brand"] }

masonry

Pinterest-style flow for mixed image ratios.

masonry json 
"gallery_config": { "variant": "masonry", "theme": "dark" }

minimal

Tight image wall for photo streams.

minimal json 
"gallery_config": { "variant": "minimal", "search": false }

showcase

Hero image plus supporting grid for featured work.

showcase json 
"gallery_config": { "variant": "showcase", "show_count": true }

Canonical classes

New Databoard templates emit antsand-gallery, antsand-gallery__grid, antsand-gallery__item, and related BEM children. Legacy ant-gallery aliases remain supported only for compatibility.

ANTSAND

AI-readable CSS, Header/Body/Footer contracts, and generated-site hardening across the ANTSAND ecosystem.

ANTSAND Styles v2 - Open Source CSS Framework