4leggedITTemplate

    Standards

    Journey Timeline pattern

    A vertical timeline of real, dated stages (rescued, foster, today) for a single dog's own detail page — the page a success-story card's storyHref links out to.

    Example — a dog's own detail page

    This is the composition, not just the bare timeline: a per-dog page pairs a short intro (name, status badge, summary — usually via PageHero) with JourneyTimeline for the story so far, then a foster/adopt CTA. A SuccessStoriesSection card's storyHref links straight here.

    Looking for a Forever Home

    Rickey

    Rickey was the shelter's longest resident with no adoption applications — now healthy, safe, and looking for his family.

    Their journey so far

    1. Rescued

      July 17, 2026

      Found at an overcrowded shelter as the longest resident with no adoption applications. Named Rickey after baseball's greatest leadoff hitter, because every great game begins with one opportunity.

      A volunteer greeting the dog on the day of rescue

    2. Clean Bill of Health

      July 22, 2026

      A wellness exam confirmed he's healthy and ready for the next step — finding his family.

    3. Today

      Settling into foster care and looking for the right forever home.

      The dog relaxing at home today

    Want to help write the next chapter?

    Standard

    - stages: JourneyTimelineStage[] — plain, site-owned array. No built-in sort/filter and no fixed stage vocabulary; labels are free text (e.g. "Rescued", "In Foster Care", "Today").

    - Every field except label/description is optional — a stage without a date just omits the date line, and a stage without imageSrc/videoSrc renders text only. Early stages of a real story often don't have media yet.

    - videoSrc renders a native <video controls playsInline poster={imageSrc}> instead of an image — for a self-hosted, real rescue-day video. Prefer this over a third-party embed: a prior fleet attempt at embedding Facebook video was reverted after hitting a rights-block on posts using licensed (non-original) audio.

    - Content must be real, sourced from the org's own posts/records — never invented backstory. This pattern exists specifically to hold a dog's actual rescue-to-today story.

    - Renders nothing if stages is empty — no empty-state placeholder.

    - Pairs with SuccessStoriesSection: that component's curated grid is the "wall," this is the detail page each card's storyHref points to — see the composed example above.

    - Composing a full rescue-journeys page (teaser → list → detail): the list/teaser pages are built from `SuccessStoriesSection` (see that pattern's page for the live status-split and auto-rotating-teaser examples); each dog's own detail page renders this component. Reference implementation: `the-comeback-pack`'s `/pack-journeys` + `/pack-journeys/:slug`.

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