Spotlight turns a grid of photos into an interactive showcase. Click any tile and it expands into a full-screen view with the full story, ideal for team profiles, project case studies and portfolios.
Spotlight replaces our older Showcase Grid. Existing Showcase Grid sections keep working exactly as they are, but new ones use Spotlight.
What visitors experience
Hovering a tile lifts the image slightly and, depending on your settings, reveals the name and subtitle. Clicking it smoothly expands that photo into a full-screen view containing a counter (02 / 06), the subtitle, the title, the description and your button.
From there visitors can move between items using arrows, the thumbnail strip along the bottom (which becomes dots on smaller screens), or their keyboard arrow keys. They close it with the × or the Esc key, and the page returns to exactly where they were.
Adding Spotlight
- 1In the editor, open Add Elements and choose Spotlight from the Gallery group.
- 2It arrives with three example items so you can see how it works, so replace them with your own.
- 3Hover the element and click the pencil icon to open its panel.
Adding your items
On the Content tab, click an item to open it:
- Image: the photo for the tile and the full-screen view
- Title: a person's name or a project name
- Subtitle: their role, or the project type. Shown in your accent colour.
- Description: the full story. This is what the expanded view is for, so there's plenty of room.
- Title heading level: H3 by default, which is usually right
- Button link and Button text: optional; the button only appears once you add a link
- Tags: comma-separated, for the filter bar
- Image alt text: for accessibility and search engines. Leave blank and your title is used.
- Hide this item: temporarily take someone out of the grid without deleting them
Use Add item to add more, drag the handle to reorder, and the bin icon to remove. You'll always keep at least one item.
Letting visitors filter by category
- 1Add tags to your items, for example Team on your people and Projects on your work.
- 2On the Layout tab, switch on Show tag filter bar.
- 3Choose a Filter bar position: Left, Centre or Right.
Visitors get an All button plus one button per tag, and clicking one smoothly filters the grid.
Tags are matched exactly, and capitals matter: 'team' and 'Team' create two separate buttons. Keep them consistent.
Layout options
On the Layout tab:
- Columns (desktop): 2 to 6, three by default
- Columns (tablet) and Columns (mobile): leave on Auto and Limecube picks sensible numbers
- Gap between tiles: Small, Medium or Large
- Tile shape: Square, Landscape or Portrait
- Last row alignment: what happens when the final row isn't full
- Name & subtitle: show the text On hover, Always, or Below image. Below image suits team grids; the overlays suit portfolios.
- Detail view style: Split panes puts your text on a solid panel beside the photo (best for longer bios), while Cinematic fills the screen with the image and lays the text over it (best for visual work).
- Pane order: whether the image sits left or right in Split panes
- Outer spacing: space above and below the whole element
Colours
The Styles tab has two settings, and both start from your site's colour palette so Spotlight matches your design automatically:
- Background colour: the text panel in Split panes, or the image tint in Cinematic
- Accent colour: the subtitle, button, selected thumbnail and filter buttons
Text automatically switches between light and dark depending on how light or dark your background colour is, so it always stays readable.
Tips
- Upload good-sized photos, around 1600px on the shorter side. The expanded view fills the whole screen, so small images will look soft.
- Keep subjects centred. Images are cropped from the middle, especially when you change the tile shape.
- Put your best item first, as many visitors only open one.
- Descriptions can be as long as you need. The expanded view gives them room and only scrolls if the text genuinely overflows.
- Filtering doesn't limit the expanded view. Once open, the arrows step through every item, not just the filtered ones.
- The page can't be scrolled while the expanded view is open. That's deliberate, and scrolling returns to exactly where the visitor was.
- Spotlight works with a keyboard and announces itself properly to screen readers, and visitors who've asked for reduced motion get the same content without the animation.
Was this helpful?
Last updated:
Related Articles
Grid Gallery
Display a wall of photos visitors can enlarge and filter by category, with masonry or grid layouts, per-image titles and descriptions, tagging, and lightbox styling.
5 min read
Before and After Slider Gallery
Show a transformation with a slider visitors drag between two photos. One before-and-after pair per element, with titles, alt text and layout controls.
4 min read
Showcase Grid
Build an interactive image grid with hover-reveal titles, descriptions, and background images, perfect for team or portfolio pages.
4 min read
Still need help?
Submit a Support Ticket