Testimonials

The testimonials component showcases user testimonials (in text, video, or photo format) in a fully responsive and beautiful masonry grid.

The testimonials component can also be used as a carousel instead of a masonry grid, to highlight specific testimonials:

The component draws all testimonials from the config file config/testimonials.yml

Config structure:

• default
  • accent_color: highlight/accent color shown in all testimonial cards (example: "#df430d")
  • accent_text_color: text color on highlighted/accented text (example: "#fff")
  • star_max: maximum number of stars on testimonial cards (default: 5)
  • default_avatar_url: fallback avatar when avatar_url is missing
• development / test / production: you can have different sets of configurations and testimonials per environment
  • testimonials: array of testimonial entries

Example config:

default: &defaults
  accent_color: "#df430d"
  accent_text_color: "#fff"
  star_max: 5
  default_avatar_url: "https://example.com/avatar.jpg"

development:
  <<: *defaults
  testimonials:
    - kind: text
      text: "Launched [[in a week]] and seeing great user engagement."
      name: "Charlie Quinn"
      rating: 5

    - kind: video
      quote: "Everything you need to build your app fast"
      name: "Morgan Casey"
      rating: 5
      video:
        mp4_url: "https://example.com/video.mp4"
        poster_url: "https://example.com/image.jpg"

Testimonial entry (common fields):

• kind: one of text, image, text_image, video, tweet
• name: person name
• position: job title (optional)
• company: company name (optional)
• handle: social handle (optional)
• avatar_url: image URL (optional; falls back to default_avatar_url)
• rating: number of stars to show (optional)
• date: date string (optional)
• tags: array of labels (optional; useful to curate subsets like featured or demo)

For testimonials of different kinds, you can add specific fields:

• text
  • text: testimonial body
• image
  • image_url: image URL to display
• text_image
  • text: testimonial body
  • image_url: image URL to display
• video
  • quote: short highlighted quote
  • video.mp4_url: MP4 URL
  • video.poster_url: poster image URL (optional but recommended)
• tweet
  • text: tweet body
  • source.label: source name (example: "X") (optional)
  • source.url: source URL (optional)