Gallery Components

Overview of all six gallery variants in the easy-web ecosystem. Each variant is selected via a kind field in CMS entries undersrc/content/galleries/ and rendered on pages via<GallerySection />.

1. Hero Slider (hero-slider)

Full-bleed editorial carousel with title, subtitle, and optional CTA per slide. Ideal as the top section of a landing page.

Sample hero banner illustration

Welcome to achim.ismaili.de

The pilot instance of the easy-web ecosystem

Learn more

2. Image Grid (image-grid)

Static N-column grid with uniform image sizing. Suitable for component previews, team photos, or sponsors.

Component Preview

Hero Component
Hero
Card Grid
Card Grid
Theme Toggle
Theme Toggle

4. Masonry Grid (masonry-grid)

Pinterest-style variable-height grid via CSS columns. Suitable for photography and portfolios.

Masonry Grid Example

Hero component
Hero
Card Grid
Cards
Theme Toggle
Theme
Card Grid again
Cards again
Hero component again
Hero again
Theme Toggle again
Theme again

5. Feature Highlight (feature-highlight)

Alternating image-and-text rows with optional CTA. Suitable for product features or service descriptions.

Feature Highlight Example

Hero component

Hero — the eye-catcher

Large-format introduction component with title, subtitle and call-to-action. Ideal as the top section of a landing page.

More about Hero
Card Grid component

Card Grid — structured overview

Responsive card grid for features, people or linked content. Scales from one column (mobile) to four columns (desktop).

See blog examples
Theme Toggle component

Theme Toggle — light/dark

One-click switch between light and dark mode. Persists the selection per browser via CSS custom properties.