4leggedITTemplate

    Standards

    Testimonials pattern

    Use the shared testimonials module for adopter/foster/community stories.

    Example — featured (default)

    Featured layout supports a single highlighted story with optional random selection on load.

    Featured testimonial

    "Fostering with our rescue has been an amazing experience. The support, supplies, and guidance made everything manageable."

    Rated 5 out of 5 stars

    — AlexFoster FamilyExample Rescue

    Grid

    Grid layout works for standard multi-card sections.

    Grid testimonials

    "Fostering with our rescue has been an amazing experience. The support, supplies, and guidance made everything manageable."

    Rated 5 out of 5 stars

    Alex

    Foster Family

    Example Rescue

    "The adoption process was clear and thoughtful. We felt supported the entire time and found the right dog for our home."

    Rated 4 out of 5 stars

    Jordan

    Adopter

    "Our volunteer team works hard, but these stories keep us going. Seeing dogs settle into loving homes is everything."

    Team Volunteer

    Community Member

    Longform

    Longform renders a single letter-length testimonial as real paragraphs — not italic, no literal quote characters, with an optional pull quote. Blank lines separate paragraphs; a single line break keeps consecutive lines grouped in one paragraph.

    Longform testimonial

    We had never fostered before, and honestly we almost didn't apply. The form asked how much experience we had and the answer was none at all.

    Someone called us back the same afternoon anyway.

    She walked us through what the first week actually looks like, and then she asked us the questions we hadn't thought to ask ourselves:

    "What happens if he doesn't settle?"
    "What if our own dog doesn't like him?"
    "What if we can't give him back?"

    Nobody pretended it would be easy. That is the part I did not expect, and it is the reason we said yes.

    Three fosters later, we still call with questions, and somebody still picks up.

    Rated 5 out of 5 stars

    Sam

    Foster Family

    Example Rescue

    Longform, collapsible

    Set `collapsible` to close the body behind a native `<details>` toggle when a letter runs long — the pull quote stays visible as the summary, and the full text still ships in the rendered HTML (crawlable, and works with JS disabled, since expand/collapse is native browser behavior). Has no effect without a `pullQuote`.

    Collapsible longform testimonial

    Read the full letter

    We had never fostered before, and honestly we almost didn't apply. The form asked how much experience we had and the answer was none at all.

    Someone called us back the same afternoon anyway.

    She walked us through what the first week actually looks like, and then she asked us the questions we hadn't thought to ask ourselves:

    "What happens if he doesn't settle?"
    "What if our own dog doesn't like him?"
    "What if we can't give him back?"

    Nobody pretended it would be easy. That is the part I did not expect, and it is the reason we said yes.

    Three fosters later, we still call with questions, and somebody still picks up.

    Rated 5 out of 5 stars

    Sam

    Foster Family

    Example Rescue

    Standard

    - Use `TestimonialsSection` instead of page-local testimonial markup.

    - Default behavior shows one random testimonial (`layout="featured"`, `featuredStrategy="randomOnLoad"`) to avoid clutter — just pass `testimonials` and let the defaults apply.

    - Opt into `layout="grid"` only when a page intentionally wants multiple testimonials shown at once.

    - An empty `testimonials` array renders nothing.

    - Keep testimonials in page/site data files, not inline component internals.

    - Text content renders server-side without JS — preserve SSR rendering, testimonials must remain readable without JS.

    - Opt into `layout="longform"` for letter-length testimonials — it renders real paragraphs and picks its single item from `featuredIndex`, never at random.

    - Use `authorTitle` for the person's role or title — it renders between `author` and `authorMeta`, so a named partner reads as name / title / organization. `authorHref` stays on `authorMeta`: the link belongs to the organization, not the job title.

    - Set `collapsible` on `layout="longform"` when a letter is too long to show in full up front — it closes the body behind a native `<details>` toggle (default closed) while the `pullQuote` stays visible as the summary. Requires `pullQuote`; without one the item falls back to the always-expanded rendering. Pass `labels.readMoreLabel` for the toggle text on i18n sites.

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