4leggedITTemplate

    Standards

    Media carousel pattern

    A photo carousel where the name, description and link on each tile are all optional.

    Photos only

    No name, description or link. This is what a site renders when it cannot name the animals in its own photos -- inventing a name is not an option.

    A dog resting on a blanket
    A puppy looking up at the camera
    A dog running through grass
    A dog sitting beside a volunteer

    Named, described and linked

    Every optional field set. The first two tiles deliberately point at the same anchor, because one story often has more than one photo.

    A dog resting on a blanket

    Navy

    Stayed three weeks before finding her home.

    A puppy looking up at the camera

    Bear

    Came in underweight and left thriving.

    A dog running through grass

    Miley

    Adopted alongside her littermate.

    A dog sitting beside a volunteer

    Squirtle

    Fostered twice, then adopted by the second family.

    Anchor target one -- the first two tiles link here.

    Anchor target two -- the last two tiles link here.

    Standard

    - Use `MediaCarouselSection` instead of a page-local photo carousel.

    - `name`, `description` and `href` are all optional and independent -- a tile with none of them renders as a bare photo.

    - Several tiles may share one `href`; one story often has more than one photo.

    - The page owns the heading, not the module -- this keeps heading levels correct and lets the carousel sit under whatever `<h2>` the page already has.

    - Photos are never cropped: tiles are `aspect-[3/4]` with `object-contain`, so the whole image is always visible.

    - `href` passes through `safeContentUrl`; a disallowed scheme renders the tile unlinked rather than dropping it.

    - Anchor targets need a `scroll-mt-*` matching the site's sticky header, or the target lands underneath it.

    - Leave `autoPlayDelayMs` unset once tiles are links -- an auto-advancing carousel slides the link out from under the pointer.

    - A video tile links from its caption only; wrapping `<video controls>` in an anchor would navigate on play.

    - Component: `template/src/components/patterns/MediaCarouselSection.tsx`