Testimonials
Reader praise built from Ghost's product cards: a face, a name, the quote and a star rating, as a grid in the theme's pull-quote voice or as one slow row of quotes drifting across the page.
Quotes from readers, clients or reviewers. Each one is a Ghost product card, which is the only card in the editor that carries a star rating, and Quiet restyles it into the same italic serif it uses for pull quotes.
Like the logo strip, the page body is the band.
Create it
#home-testimonialsGo to Pages → New page. The title becomes the small label above the band, for example Praise or Kind words.
In the body, type /product to add a product card. Fill in what you have (see the table below), then repeat for each person.
Under Tags, add #home-testimonials.
Publish.
Editor: the Testimonials band - Editor
The testimonials band
What each part of a product card becomes
| Product card field | In the grid | In the marquee |
|---|---|---|
| Image | A small round portrait | A smaller portrait beside the name |
| Title | The person's name. Write Name, Role if you want both | The same |
| Description | The quote itself | The quote, opened by a large quotation mark |
| Rating | The stars | Hidden |
| Button | An optional link out, to their site or the full review | The same |
Everything is optional except the quote. A testimonial with no picture and no stars is just a quote, which is often the better choice.
The band's own fields
| Field | On the page |
|---|---|
| Title | The small uppercase label |
| Excerpt | One larger line under it |
| Body | The product cards |
Any other block you add to the body (a paragraph, a heading) spans the full width under the quotes in the grid, or rides along in the row as a short aside in the marquee.
Choosing a layout
The default is a grid of quotes. One alternative lays them in a single row on a tinted band that drifts slowly across the page. Add one tag to the same page, alongside #home-testimonials.
No tag. Remove the layout tag to get back here.
Best for: a handful of longer quotes, and a site that wants the stars to show.
Quotes in two or three columns, each over its own hairline, with the stars, the portrait and the name beneath.
#testimonials-marquee
Best for: five or more short quotes, and a homepage that already has a lot of stacked bands and wants one that moves.
One row of quotes on a tinted band the full width of the page. Each quote opens with a large quotation mark and carries the name, with the small portrait beside it when there is one; the stars are hidden. When the quotes are wider than the screen the row drifts slowly towards the start, pausing whenever a pointer rests on it, and a pause button appears beside the label so anyone can stop it. When they fit, nothing moves.
Readers who have asked their device for reduced motion, and readers with scripts off, get the same row standing still; they can scroll it sideways by hand or with the keyboard. A reader who tabs to a link inside a moving quote finds the row stops and brings that quote into view.
One more tag keeps the row still for everyone:
| Tag | Put it on | What it does |
|---|---|---|
#testimonials-static | the #home-testimonials page | The marquee never moves and scrolls by hand instead. On the grid it does nothing |
Accessibility, handled
Ghost's product card leaves the portrait without alt text and the five stars unlabelled. Quiet repairs both on the page, so a screen-reader user hears "Rated 5 out of 5" rather than five unnamed images. In the marquee the quotation marks are decorative and are not read aloud, and the second copy of the row that makes the loop seamless is hidden from assistive technology. Nothing for you to do.
The band needs a body
With no cards in the body, the band renders nothing rather than a label over empty space. The same applies if the page is members-only: signed-out readers see no band.
Related
- Logo strip, the other body-driven band, and the other one that can drift.
- Hook reference, for the
data-layouthandle if you want to restyle one layout from Code injection.
Logo strip
A spoken-at or featured-in row built from image cards in one page's body, with an optional button, a monochrome treatment and a pause control when it scrolls.
Podcast band
Cover art, the show's name and your three newest episodes on the homepage, with the listening links row and an All episodes link.