Image List & Gallery

Design an image list and gallery component for browsing a collection of visual assets in a product context: portfolio items, product photos, or album images. The main view should make scanning easy, with a repeatable thumbnail grid, consistent aspect ratios, and enough metadata to identify each item without opening it.

Include a detail state for viewing one image at full size. That view should preserve orientation in the collection with next/previous controls, a clear close action, and a way back to the exact scroll position in the grid. If you include tags, filters, or sorting, keep them visible and easy to reset.

Show the full set of states needed to make the component usable: loading, empty collection, selected thumbnail, hover/focus, and no-results after filtering. The interaction should feel calm and direct, with no surprise layout shifts when images load or when the viewport changes.

Make the responsive behavior explicit. On larger screens, the grid can be denser; on smaller screens, the layout should collapse cleanly without losing tap targets or making captions unreadable. The result should feel like one browsing system, not separate desktop and mobile designs.

Experiment with grid systems and masonry layouts to ensure a dynamic yet organized appearance.