Components
Gallery
A gallery is a grid or scrolling row of images, such as photos, templates or customer work, that visitors browse visually instead of by reading.
- Also called
- Image gallery, Photo gallery, Showcase, Template gallery
- Spotted on
- 10 of 422 homepages
- Browse examples
- About us pages →
What is a gallery?
Galleries let a SaaS site show breadth. Template and design tools use them to prove what can be made: Framer's homepage includes a site gallery, Spline a remix gallery, Fal a model gallery with product cards. A visitor sees dozens of results in seconds and imagines their own among them.
The other common home is the about or careers page, where an office or team photo gallery says more about culture than a values list. Clay's about page includes an office photo gallery between its staff directory and customer quotes.
A weak gallery is either too uniform or too random. A grid of identical thumbnails with no labels tells visitors little; a scatter of mismatched stock photos tells them less. Group items by category, add filter chips when there are many, and caption anything that needs explaining.
When to use a gallery, and when not to
Use it for
- Visual outputThe product produces something visual (sites, designs, images, video) and examples sell it.
- BreadthShowing many use cases or templates is more convincing than describing them.
- CultureAbout and careers pages that want to show real people and places.
Avoid it for
- Abstract productsAn API or backend tool has nothing to show in a grid of pictures; a code snippet works better.
- Few itemsThree images are a feature row, not a gallery.
- Stock imageryA gallery of generic photos reads as filler and undermines trust.
Anatomy of a gallery
- 1HeadingA title saying what the collection is ("Made with...", "Life at...").
- 2FiltersOptional chips or tabs to narrow by category.
- 3Grid or rowEven grid, masonry or horizontally scrolling strip of thumbnails.
- 4Item captionA title, author or category under or over each image.
- 5Browse linkA "View all" link to the full collection.
Common gallery variants
1. Template gallery
Filterable thumbnails of ready-made starting points.
2. Showcase strip
A scrolling row of customer work, often auto-moving.
3. Masonry gallery
Images of mixed heights packed into columns.
4. Photo gallery
Team and office photos on about and careers pages.
Spotted in our design reviews
Our reviews describe a gallery on 10 of the 422 SaaS homepages in the catalog. A few of them:
Two rows of four monochrome logos lead into "Apps that mean business", a two-row strip of dashboard thumbnails cropped at both edges, then a "View app gallery" pill.
Retool · Logos, app gallery and feature cards
Next comes "The world's largest generative media model gallery" with four photo tiles captioned "Flux 3 Image to Video", "Seedance 2.5 Image to Video", "MiniMax H3 Image to Video" and "Kling Video v3 Image to Video [Pro]".
Fal · Logos, model gallery and product cards
Below come a framed mission statement, a "Who we are" directory of about 100 staff in three columns, an office photo gallery, customer quote cards, investor logos, and press cards under "In the wild".
Clay · About Us
It stacks a centered hero, a logo wall, four steps, four alternating feature rows, a template gallery, a two-column feature list and a dark closing card above a four-column footer.
Feather · Overview
The logo grid becomes a one-row ticker, agent cards and platform tiles stack one per row, and the site gallery shrinks to three images.
Framer · Mobile
After the app buttons repeat, "Site Gallery" shows a blue panel of fanned phone screens: a mint store page titled "my cute life :)" with four $14 product tiles, a neon green goods page and a blue youtube tab.
Onuniverse · Site Gallery and sign-off
The homepage runs 12,595 pixels at 1440px wide: centered hero, mockup banner, press logos, three numbered rows, a six-item feature grid, video, brand gallery, support photo, six articles and a purple closing band.
Looka · Overview
Blocks run from a painterly aerial-landscape hero, a product chat mock, a logo marquee and capability grids to a creative gallery, analytics and Slack mocks, a dark connector band, four pricing cards, a closing call to action and a landscape-photo footer.
Gooseworks · Overview
Often confused with
Gallery vs. carousel
A carousel shows one or a few items at a time and pages through them. A gallery lays many items out at once for scanning.
Gallery vs. logo cloud
A logo cloud is a gallery of customer logos with one job: social proof. A gallery shows the work or the people themselves.
Frequently asked
Should a gallery on a homepage link to a full page?
Usually yes. Show a curated handful on the homepage and link to a full, filterable gallery; a homepage that tries to show everything gets very long.
Grid or masonry?
Grids suit items of the same shape, such as website thumbnails. Masonry suits mixed photos and artwork where cropping to one ratio would cut off content.