Back to Home

Mega Menu - Tabbed

Tab 1 Tab 2 Tab 3 Tab 4
Back to Mega Menu - Tabbed

Tab 1

Page group one

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Page group two

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Page group three

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Back to Mega Menu - Tabbed

Tab 2

Page group one

Back to Mega Menu - Tabbed

Tab 3

Page group one

Back to Mega Menu - Tabbed

Tab 4

Page group one

Back to Home

Mega Menu - Cards

Medium length heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button

Eyebrow

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..

Link

Eyebrow

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..

Button

Eyebrow

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..

Button
Back to Home

Mega Menu - Simple

Link 1Link 2
Back to Home

Mega Menu - Links

Page group one

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Page group two

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Page group three

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

Page group four

  • Page One

    Lorem ipsum dolor sit amet consectetur elit

  • Page Two

    Lorem ipsum dolor sit amet consectetur elit

  • Page Three

    Lorem ipsum dolor sit amet consectetur elit

  • Page Four

    Lorem ipsum dolor sit amet consectetur elit

No results found matching your criteria

Why not check out our most popular searches?

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Title

Praesent placerat, magna in vehicula vestibulum, felis urna cursus lorem, sed vestibulum quam eros vel libero..
Button

Gallery

📖 Overview

The Gallery block displays a collection of images in either a responsive grid or Swiper slider layout. It supports click-to-zoom modal functionality, custom layouts, and optional image shadows.

✏️ Content Options

Field Type Required Description
Gallery Gallery No Select multiple images to display in the gallery

⚙️ Settings Options

Setting Type Default Description
Convert to slider? Toggle Off Display images in a Swiper slider instead of a grid
Enable Modal Functionality Toggle Off Enable click-to-zoom modal for gallery images (Grid only)
Columns Select 3 Number of columns (1-4). Only visible when not a slider
Enable Custom Layout? Toggle Off Use a custom layout with the first image full-width. Only uses first 3 images (Grid only)
Set slides per view automatically? Toggle Off Base slides per view on slide widths rather than fixed number (Slider only)
Slides Per View (Desktop) Select 3 Number of slides visible on desktop (Slider only)
Slides Per View (Tablet) Select 2 Number of slides visible on tablet (Slider only)
Slides Per View (Mobile) Select 1 Number of slides visible on mobile (Slider only)
Show Overflow? Toggle Off Show images that overflow the slider container (Slider only)
Enable Image Shadow Toggle Off Add shadow to the gallery images

🎨 CSS Variables

The following CSS variables can be configured to customise the block’s appearance:

Variable Default Value
--block-gallery-gallery-gap var(--spacing-xs)
--block-gallery-gallery-image-border-radius var(--radius-card)
--block-gallery-gallery-image-shadow var(--shadow-card)
--block-gallery-gallery-image-background-colour var(--colour-rgba-white-20)
--block-gallery-gallery-image-element-border-radius var(--radius-card)
--block-gallery-slide-auto-width 500px
--block-gallery-image-zoom-background-colour var(--colour-rgba-black-60)
Image caption here
Image caption here
Image caption here
Image caption here
Image caption here
Image caption here