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 real rescue-day video served from the fleet media host (`mediaUrl()`). 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.

    - partnerLinks credits outside organizations named in the stage's own text (description is plain text, so it can't carry inline links). Always opens in a new tab.

    - relatedLinks links out to the story behind the stage — the news post or blog entry that announced it. An href starting with / renders as a client-side link; anything else opens in a new tab. Never use partnerLinks for an internal route — it always opens a new tab, so the site would open itself in a second one.

    - 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.

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