Feed Testimonial Card

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Quote *

  quote · string

  What the customer said, without quotation marks — the component sets those. Break the lines yourself with newlines: this is a pull quote, and the rag is a typographic decision nobody should hand to a text engine. Three to five short lines is the design. The type size is fitted to the LONGEST line and snapped to the library's scale, so two balanced lines of eighteen characters are set considerably larger than one of thirty-two and a stray long line quietly shrinks the whole quote.

  now: We stopped guessing what to post — and tripled our reach …

• Rating

  rating · number

  Stars out of five. Halves and any other fraction are honoured — 4.5 fills four stars and half of the fifth, because the sweep is one continuous front rather than five separate icons. Set the number you can actually evidence; a flat 5 with a named person under it is the strongest thing in the frame and the easiest to lose credit for.

  now: 5

• Name *

  name · string

  Who said it, as they would sign it. Also the fallback for the monogram, which takes the first letter of the first and last words.

  now: Priya Raghavan

• Role

  role · string

  Their job and company on the quiet second line — 'Head of Growth, Northwind'. This is the half of the attribution that makes the quote worth anything, so prefer a real title to a category.

  now: Head of Growth, Northwind Coffee

• Initials

  initials · string

  One or two letters for the monogram disc. Empty derives them from the name. There is no photograph here and no way to add one: this registry ships no image files, so initials on a token-coloured circle are the honest avatar rather than the compromise.

• Source

  source · string

  Provenance, set small and right-aligned opposite the name — 'Verified purchase', 'G2 review', 'Customer since 2021'. Omit it and the attribution row runs left-flush with an open right side.

  now: Verified customer

• Bottom reserve

  bottomReserve · number

  How much of the bottom edge to keep empty, as a percentage of frame height. In a 4:5 feed placement this is where the caption's first line and the call-to-action bar are drawn over the creative. Raise it if your placement carries a taller CTA; the whole composition lifts rather than the type shrinking.

  now: 13

• Brand

  brand · string

  Brand token id — one of the keys of BRANDS. Written for `field`: warm paper, olive marks, a rust rating. `paper` and `press` set well too. The dark palettes are legible but turn a printed page into a screen, which is the opposite of what a testimonial is trying to borrow.

  now: field