16 components

Gallery

Expandable Case Study Cards
Gallery
Expandable Case Study Cards

A gallery of expandable case study cards with hover effects. Each card expands on hover to reveal additional details including title, description, and badge. Features smooth width transitions and gradient overlays. Ideal for portfolios, case studies, project showcases, and work samples where you want to highlight multiple items with progressive disclosure.

gallerycase-studyportfolio+6 more
Carousel Badge Cards
Gallery
Carousel Badge Cards

A carousel gallery with badge labels and descriptions on each card. Features navigation buttons, smooth transitions, and cards with category badges. Ideal for product showcases, feature highlights, blog posts, or any content that benefits from categorization and horizontal browsing.

gallerycarouselbadges+5 more
Carousel Gradient Overlay
Gallery
Carousel Gradient Overlay

A carousel with gradient overlay cards and dot indicators. Features smooth transitions, gradient text overlays on images, and progress dot navigation. Ideal for hero sections, featured content, image galleries, or any visual content that needs elegant text overlays.

gallerycarouselgradient+5 more
Carousel Demo Link
Gallery
Carousel Demo Link

A carousel with a prominent demo link in the header section. Features navigation buttons, external demo link, and cards with images and descriptions. Ideal for product demos, feature showcases, or any content where you want to drive users to a live demo or external resource.

gallerycarouseldemo+5 more
Auto Scroll Carousel
Gallery
Auto Scroll Carousel

A continuously auto-scrolling carousel with staggered image layout. Features automatic scrolling using embla-carousel-auto-scroll, alternating vertical offsets for visual interest, and smooth infinite loop. Ideal for client logos, partner showcases, image galleries, or any content that benefits from passive browsing.

gallerycarouselauto-scroll+5 more
Carousel Sidebar Resources
Gallery
Carousel Sidebar Resources

A carousel with a sidebar resource list in a three-column layout. Features categorized resource links alongside image carousel. Ideal for documentation, resource libraries, learning platforms, or any content that combines visual browsing with organized link navigation.

gallerycarouselsidebar+5 more
Carousel Icon Tabs
Gallery
Carousel Icon Tabs

A carousel with icon-based tab navigation and animated indicator. Features icon tabs that sync with carousel slides, animated underline indicator, and slide counter. Ideal for feature showcases, product tours, or any content that benefits from categorized visual navigation.

gallerycarouseltabs+5 more
Testimonial Carousel Cards
Gallery
Testimonial Carousel Cards

A testimonial carousel with image and quote panels in a two-panel layout. Features customer photos alongside their testimonials, progress bar indicator, and navigation buttons. Ideal for customer testimonials, reviews, success stories, or any social proof content.

gallerycarouseltestimonials+5 more
Carousel Icon Sidebar
Gallery
Carousel Icon Sidebar

A carousel with a dynamic icon sidebar panel in a two-column layout. Features a muted sidebar showing active slide details with icon, title, and description. Ideal for feature tours, product showcases, or any content that benefits from contextual sidebar information.

gallerycarouselsidebar+5 more
Carousel Gradient Text
Gallery
Carousel Gradient Text

A carousel with gradient overlay text and expanding pill indicators. Features a two-column layout with animated pill indicators that expand on active state. Ideal for portfolio showcases, project galleries, or any visual content with elegant text overlays.

gallerycarouselgradient+5 more
Service Hover Carousel
Gallery
Service Hover Carousel

A carousel of service cards with hover image swap effect. Features portrait cards with primary/secondary image swap on hover, badges, and call-to-action buttons. Ideal for service showcases, team members, product cards, or any content that benefits from reveal-on-hover interactions.

gallerycarouselservices+5 more
Carousel Tabs Content
Gallery
Carousel Tabs Content

A carousel with animated tab navigation synced to slides. Features a tab bar with animated underline indicator that follows the active slide. Ideal for categorized content, product features, or any content that benefits from tab-based navigation with visual previews.

gallerycarouseltabs+5 more
Carousel Scale Focus
Gallery
Carousel Scale Focus

A carousel with scale and opacity focus effect on the active slide. Features active slide at full scale/opacity with adjacent slides scaled down and faded. Ideal for hero carousels, featured content, image galleries, or any content where you want to emphasize the current item.

gallerycarouselscale+5 more
Masonry Motion Grid
Gallery
Masonry Motion Grid

An animated masonry grid layout with Framer Motion animations. Features a 4-column grid with staggered heights and alternating animation directions on scroll. Ideal for image galleries, portfolios, photo collections, or any visual content that benefits from dynamic, Pinterest-style layouts.

gallerymasonrygrid+5 more
Blur Vignette Grid
Gallery
Blur Vignette Grid

A grid gallery with animated blur vignette effect on hover. Features a 5-column grid with varying column spans and CSS blur mask effect that reveals on interaction. Ideal for artistic galleries, photography portfolios, or any visual content that benefits from dramatic hover effects.

gallerygridblur+5 more
Interior Carousel
Gallery
Interior Carousel

A looping two-up carousel layout with semi-transparent navigation overlays. Features portrait images displayed two at a time with elegant navigation controls. Ideal for interior design galleries, real estate showcases, product photography, or any content that benefits from side-by-side image comparison.

gallerycarouselinterior+5 more
OpenSite Logo

Delivering the world's first Semantic UI site builder

Components

© 2026 OpenSite. All rights reserved.