MediaGalleryHero
Composable responsive media hero primitives for image and video gallery entry points.
Quick Preview
Usage
import {
MediaGalleryHero,
MediaGalleryImages,
MediaGalleryIndicator,
MediaGalleryReview,
} from "@giddaa-housing/ui/media-gallery-hero";
<MediaGalleryHero>
<MediaGalleryImages images={images} imageCount={4} />
<MediaGalleryReview rating={4.8} reviewCount={23} />
<MediaGalleryIndicator totalMediaCount={35} />
</MediaGalleryHero>;Examples
Layouts
Use imageCount to control the desktop and tablet bento arrangement. Mobile switches to a swipeable carousel with compact gallery chrome.
imageCount is a layout choice, not a cap: the grid lays out at most four tiles, while the carousel carries every image in images and its counter reads the number of slides. Pass a bigger library figure to MediaGalleryIndicator when the hero links out to a fuller gallery — View All 35 Photos labels that link, and does not claim the carousel holds 35.
Video
Use MediaGalleryVideo for a video hero surface. It can render a native video, a poster thumbnail with a centered play button, or custom media through renderMedia.
Use inline playback when video is the hero's primary experience. When the hero is only an entry point—or when playback includes a title, description, or playlist—open Video Player Dialog from onPlayClick instead.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
MediaGalleryHero | native div props | - | Positioned shell with fixed responsive hero height and rounded clipping. |
MediaGalleryImages | images, imageCount, currentMedia, showMobileIndicator, onMediaClick, renderMedia | imageCount=4 | Owns the desktop bento grid and mobile carousel. Missing src renders a neutral placeholder. |
imageCount on MediaGalleryImages | 1 | 2 | 3 | 4 | 4 | Bento arrangement for the desktop grid. It is a layout choice, not a cap on the media set — the mobile carousel always carries every image in images. |
totalMediaCount on MediaGalleryImages | number | - | Deprecated — no longer read. The carousel counter counts its own slides. Pass a larger library figure to MediaGalleryIndicator instead. |
MediaGalleryVideo | src, poster, alt, label, native div props, native video behavior props, onPlayClick, renderMedia | - | Full video surface with centered play control unless controls is enabled. |
MediaGalleryReview | ReviewBlock props | size="xs", bordered=false | Positioned review badge wrapper. |
MediaGalleryIndicator | button props, label, totalMediaCount, size | generated label | Positioned desktop gallery indicator. It renders as a button when onClick is provided. |
Accessibility
- Provide descriptive
alttext for each image. - Use
onClickonMediaGalleryIndicatorwhen the indicator opens a full gallery; otherwise it renders as static chrome. - Keep routing, data fetching, authorization, and product-specific copy in the consuming app.
- Prefer Video Player Dialog over building a separate modal player when a gallery video should open above the page.