Website
Media
Photograph collections, lightboxes, image details and map controls.
Usage
When to reach for it
Ships from@misoto22/design/website
import { MediaMasthead } from '@misoto22/design/website'Notes
The quiet opening to an image collection, before its controls and prints.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
photograph collection
A gallery receives link and image slots while preserving each print's orientation. The illustrations stand in for host-owned photographs and retain descriptive alternatives.
photograph detail
A media detail preserves the host's return destination as a real link, while the layout holds it at a measured touch target across browser rounding.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
PhotographFeature
A photograph and an editorial introduction, with the original image ratio.
| Prop | Type | Default | Description |
|---|---|---|---|
| imagerequired | ReactNode | — | |
| titlerequired | ReactNode | — | |
| action | ReactNode | — | |
| caption | ReactNode | — | |
| description | ReactNode | — | |
| eyebrow | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MediaCollection
Page-level gallery composition; the host owns its filters and collection.
| Prop | Type | Default | Description |
|---|---|---|---|
| mastheadrequired | ReactNode | — | |
| collectionId | string | — | |
| controls | ReactNode | — | |
| footer | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaGallery
Level mounts keep unlike aspect ratios aligned without cropping the prints.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | |
| emptyAction | ReactNode | — | |
| emptyTitle | ReactNode | Supply localized empty copy when the collection may have no children. |
Also accepts everything in HTMLAttributes<HTMLUListElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaGalleryItem
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactElement | A host link containing its image. The package supplies the print layout. | |
| titlerequired | ReactNode | — | |
| index | ReactNode | — | |
| location | ReactNode | — | |
| orientation | 'portrait' | 'landscape' | 'square' | — |
Also accepts everything in Omit<HTMLAttributes<HTMLLIElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MediaGallerySkeleton
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| count | number | 6 | — |
MediaDetailLayout
Portraits share a spread with their notes; landscapes lead a full-width spread.
| Prop | Type | Default | Description |
|---|---|---|---|
| backLinkrequired | ReactElement | — | |
| mediarequired | ReactNode | — | |
| notesLabelrequired | string | — | |
| orientationrequired | 'portrait' | 'landscape' | 'square' | — | |
| titlerequired | ReactNode | — | |
| titleIdrequired | string | — | |
| actions | ReactNode | — | |
| category | ReactNode | — | |
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | The title level when this page composition sits inside another document. |
| index | ReactNode | — | |
| light | ReactNode | — | |
| location | ReactNode | — | |
| metadata | ReactNode | — | |
| pager | ReactNode | — | |
| related | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MediaMetadata
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | DescriptionListItem[] | — |
Also accepts everything in HTMLAttributes<HTMLDListElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaPager
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| next | ReactNode | — | |
| previous | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaPagerItem
| Prop | Type | Default | Description |
|---|---|---|---|
| directionrequired | 'previous' | 'next' | — | |
| labelrequired | ReactNode | — | |
| linkrequired | ReactElement | — | |
| titlerequired | ReactNode | — | |
| image | ReactNode | — |
MediaThumbnailStrip
| Prop | Type | Default | Description |
|---|---|---|---|
| headingrequired | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaThumbnail
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactElement | — |
MediaLightNote
The host supplies observations and formatted labels; this is presentation only.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | ReactNode | — | |
| linesrequired | MediaLightNoteLine[] | — |
MediaMapSection
| Prop | Type | Default | Description |
|---|---|---|---|
| maprequired | ReactNode | — | |
| previewrequired | ReactNode | — | |
| titlerequired | ReactNode | — | |
| aliasId | string | An optional legacy anchor, owned and named by the host. | |
| hint | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MediaMapFrame
| Prop | Type | Default | Description |
|---|---|---|---|
| compact | boolean | false | — |
| hint | ReactNode | — | |
| label | ReactNode | — | |
| navigation | ReactNode | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
MediaMapNavigation
| Prop | Type | Default | Description |
|---|---|---|---|
| onZoomInrequired | () => void | — | |
| onZoomOutrequired | () => void | — | |
| zoomInLabelrequired | string | — | |
| zoomOutLabelrequired | string | — |
MediaMapCanvas
A sized provider container. Map creation, themes and geographic math stay in the host.
Also accepts everything in ComponentPropsWithRef<'div'>. Those are forwarded to the underlying element and are not listed row by row.
MediaMapPreview
| Prop | Type | Default | Description |
|---|---|---|---|
| titlerequired | ReactNode | — | |
| action | ReactNode | — | |
| children | ReactNode | — | |
| coordinates | ReactNode | — | |
| image | ReactNode | — | |
| place | ReactNode | — |
MediaMapAreaList
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | MediaMapArea[] | — | |
| onValueChangerequired | (value: string) => void | — | |
| value | string | — |
MediaMapMarker
A keyboard-operable 44px marker for a host's map-provider portal.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| active | boolean | false | — |
Also accepts everything in Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'>. Those are forwarded to the underlying element and are not listed row by row.
MediaMapPin
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | — |
MediaMapSkeleton
Takes no props of its own.
MediaLightbox
A print and its controlled, focus-trapped full-screen dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
| aspectRatiorequired | number | Intrinsic width divided by height; invalid dimensions use a safe fallback. | |
| closeLabelrequired | string | — | |
| mediarequired | ReactNode | — | |
| onOpenChangerequired | (open: boolean) => void | — | |
| openrequired | boolean | — | |
| titlerequired | string | — | |
| triggerLabelrequired | string | — | |
| expandedMedia | ReactNode | media | — |