📖 Overview
The Logos block displays a collection of logo images in either a flexible grid or Swiper slider layout. It supports optional shadow boxes around logos, alignment options, and various slider configurations including smooth autoplay.
✏️ Content Options
| Field |
Type |
Required |
Description |
| Logos |
Gallery |
Yes |
Select logo images to display (recommended width: 168px) |
⚙️ Settings Options
| Setting |
Type |
Default |
Description |
| Enable Slider? |
Toggle |
Off |
Display logos in a Swiper slider instead of a grid |
| Add a Box & Shadow to Logos? |
Toggle |
Off |
Add a box with padding and shadow around each logo |
| Alignment |
Select |
Left |
Align logos Left, Center, or Right (Grid only) |
| Full Width? |
Toggle |
Off |
Display the slider at full width (Slider 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 |
5 |
Number of slides visible on desktop (Slider only) |
| Slides Per View (Tablet) |
Select |
3 |
Number of slides visible on tablet (Slider only) |
| Slides Per View (Mobile) |
Select |
1 |
Number of slides visible on mobile (Slider only) |
| Hide Slider Navigation? |
Toggle |
Off |
Hide navigation arrows and pagination, enables autoplay (Slider only) |
| Disable Touch Move? |
Toggle |
Off |
Prevent touch/drag interaction on mobile devices (Slider only) |
| Pause on Mouse Enter? |
Toggle |
Off |
Pause autoplay when hovering over the slider (Slider only, requires hidden nav) |
| Autoplay Speed |
Select |
0 |
Speed of autoplay in milliseconds. Set to 0 for smooth continuous loop (Slider only, requires hidden nav) |
🎨 CSS Variables
The following CSS variables can be configured to customise the block’s appearance:
| Variable |
Default Value |
--block-logos-gap-row |
var(--grid-gap-row) |
--block-logos-gap-column |
var(--grid-gap-column) |
--block-logos-logo-max-width |
168px |
--block-logos-logo-box-max-width |
220px |
--block-logos-logo-box-padding |
var(--spacing-l) |
--block-logos-logo-box-shadow |
var(--shadow-logo-box) |
--block-logos-logo-box-border-radius |
var(--radius-logo-box) |
--block-logos-logo-box-background-colour |
var(--colour-white) |
