Section: Testimonials Vertical

Display a vertical scrollable grid of testimonials. Designed for showcasing a larger number of shorter quotes in a masonry-style layout.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`testimonials`	array	Yes	Array of testimonial objects	—
`testimonials[].quote`	string	Yes	The testimonial text	—
`testimonials[].name`	string	Yes	Author's name	—
`testimonials[].title`	string	No	Author's role/company	—
`testimonials[].avatar`	string	No	URL to avatar image	—
`columns`	number	No	Number of columns (2 or 3)	`3`
`className`	string	No	Custom CSS class	—

Display

Unlike Testimonial Highlight which shows one at a time, this section displays all testimonials simultaneously in a vertical masonry grid. Quotes of varying lengths create a natural, organic layout.

Best for 6+ testimonials. For fewer high-impact quotes, use the Highlight variant.

Minimal Example

{
  "type": "testimonials-vertical",
  "testimonials": [
    { "quote": "Amazing product!", "name": "User A" },
    { "quote": "Saved us so much time.", "name": "User B" },
    { "quote": "The API is incredibly clean.", "name": "User C" }
  ]
}

Full Example

{
  "type": "testimonials-vertical",
  "label": "Wall of Love",
  "heading": "What Our Users Say",
  "columns": 3,
  "testimonials": [
    {
      "quote": "Replaced our entire Contentful setup in a day.",
      "name": "Alex Kim",
      "title": "Frontend Lead, Vercel"
    },
    {
      "quote": "The best CMS for AI agents. Period.",
      "name": "Jordan Lee",
      "title": "Founder, AgentOps"
    },
    {
      "quote": "We manage 500+ pages via the API. Zero issues.",
      "name": "Maria Santos",
      "title": "Engineering Manager"
    },
    {
      "quote": "Data Mode is a game changer. Encrypted content on a CDN — brilliant architecture.",
      "name": "Ryan Chen",
      "title": "CTO, DevTools Inc."
    },
    {
      "quote": "Went from idea to published docs site in 2 hours.",
      "name": "Emma Wilson",
      "title": "Developer Advocate"
    },
    {
      "quote": "Finally a CMS that doesn't require a PhD to operate.",
      "name": "Sam Park",
      "title": "Solo Founder"
    }
  ]
}

Tips

Volume builds trust: 6-12 testimonials creates a convincing "wall of love"
Mix lengths: Varied quote lengths create a more natural masonry layout
Diverse titles: Show different roles, company sizes, and use cases
Columns: Use 3 columns on content-focused pages, 2 columns in narrower layouts

When to Use Which

Section	Best For
Testimonial Highlight	1-5 detailed, featured quotes (carousel)
Testimonials Vertical	6+ shorter quotes (wall of love)

Placement

Works well as a dedicated "social proof" section between your product details and the final CTA. The visual density of many quotes creates a strong impression of widespread adoption.