Logo / Brands Grid
A responsive grid of partner or brand logos organised into groups, with optional grayscale rendering.
What It Does
The Logo Grid module displays partner, client, or brand logos in a clean responsive grid layout. Logos can be organised into named groups — for example "Technology Partners" and "Certification Bodies" — so editors can present different categories without writing code. An optional grayscale toggle applies a uniform filter across all logos, creating a subtle, cohesive look that keeps visual attention on the rest of the page.
Best Used For
- Partner and integration partner showcases
- Client or customer logo walls
- Technology stack and tooling displays
- Certification and accreditation badges
- Sponsor recognition sections
Variants
Default
Logos displayed in full colour, grouped under optional labels.
Best for: Hero-level partner sections where brand recognition matters
Grayscale
All logos rendered in grayscale, reducing visual noise and creating a unified appearance.
Best for: "As featured in" sections or long lists where colour uniformity is preferred
Size
An optional size field controls how each logo tile renders: default shows a bare logo at 120×120px directly on the page background, while compact renders a smaller white rounded tile (with shadow) around the logo, plus an optional caption below it — suited to icon-link rows like "Download Profile," "LinkedIn," or "Add LINE OA."
Best for:
compact-- shortcut/action rows on profile or contact pages;default-- standard partner and brand logo walls
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| title | component | No | Optional section heading displayed above the logo grid |
| grayScale | boolean | No | When enabled, all logos are rendered in grayscale |
| size | enumeration | No | Tile size/style for each logo -- default (bare logo) or compact (small white rounded tile with caption) |
| groups | component | Yes | One or more groups of logos; each group can have an optional label |
| entranceAnimation | component | No | Scroll-triggered entrance animation for the section |
Tips for Great Results
- Keep all logos on a transparent or white background for consistent presentation against any section colour.
- Aim for consistent logo widths (not heights) so logos appear balanced in the grid row.
- Use grayscale when displaying more than eight logos — it reduces visual clutter significantly.
- Group logos logically (e.g. by partner tier or category) and use a short, clear group label.
- Provide SVG or high-resolution PNG files to prevent blurriness on retina displays.
- Limit each group to 4–8 logos; beyond that, consider splitting into separate sections.
Supported Languages
This module supports English and Thai. All text fields (title, group labels) render in the active locale.