Omnira Docs v1.0.0

Section reference › People & social proof

Testimonials "type": "testimonials"

Customer quotes with name, role, photo and star rating, as a grid of cards or a large rotating carousel. Use it to build trust near your pricing or contact sections.

Example of the testimonials section
The example below, rendered with placeholder images.

Example#

Paste this into the sections list of a page file:

JSON
{
  "type": "testimonials",
  "style": "grid",
  "eyebrow": "Kind words",
  "title": "Loved by our clients",
  "items": [
    {
      "quote": "They rebuilt our website in six weeks and online bookings doubled in the first month. The team was calm, clear and always on time.",
      "name": "Rachel Moore",
      "role": "Owner, Harbor Coffee",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "The best agency we have worked with. They asked the hard questions early and it saved us months later.",
      "name": "James Patel",
      "role": "Head of Marketing, Fernway",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "Clear pricing, honest advice and a result our whole team is proud of. We have already started the next project.",
      "name": "Elena Rossi",
      "role": "Director, Tidewater Studio",
      "avatar": "placeholder",
      "rating": 5
    }
  ]
}

Options#

OptionTypeDefaultDescription
eyebrowstring—Small label shown above the title.
titlestring (HTML allowed)—Section heading. You can use <em> or <br> inside it.
textstring—Short intro paragraph under the title.
headAlignstringcenterAlignment of the eyebrow/title/text block. "start" puts it on the left.
Values: center | start
itemsarray—The testimonials. See the "items" fields.
stylestringcarousel"carousel": one big quote at a time, changing every 7 seconds, with dots. "grid": cards three per row. Any value other than "grid" gives the carousel.
Values: carousel | grid

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in items#

OptionTypeDefaultDescription
quotestring—What the customer said (without quotation marks).
namestring—Customer name.
rolestring—Job title, company or location.
avatarstring—Small round photo (optional).
ratingnumber—Stars out of 5; halves such as 4.5 work. Without it a quote icon is shown.

Variants and styles#

Default. One large quote at a time with navigation dots; slides change every 7 seconds.

JSON
{
  "type": "testimonials",
  "style": "carousel",
  "tone": "alt",
  "eyebrow": "Kind words",
  "title": "Loved by our clients",
  "items": [
    {
      "quote": "They rebuilt our website in six weeks and online bookings doubled in the first month. The team was calm, clear and always on time.",
      "name": "Rachel Moore",
      "role": "Owner, Harbor Coffee",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "The best agency we have worked with. They asked the hard questions early and it saved us months later.",
      "name": "James Patel",
      "role": "Head of Marketing, Fernway",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "Clear pricing, honest advice and a result our whole team is proud of. We have already started the next project.",
      "name": "Elena Rossi",
      "role": "Director, Tidewater Studio",
      "avatar": "placeholder",
      "rating": 5
    }
  ]
}

grid#

All quotes visible as cards, three per row on large screens.

JSON
{
  "type": "testimonials",
  "style": "grid",
  "eyebrow": "Kind words",
  "title": "Loved by our clients",
  "items": [
    {
      "quote": "They rebuilt our website in six weeks and online bookings doubled in the first month. The team was calm, clear and always on time.",
      "name": "Rachel Moore",
      "role": "Owner, Harbor Coffee",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "The best agency we have worked with. They asked the hard questions early and it saved us months later.",
      "name": "James Patel",
      "role": "Head of Marketing, Fernway",
      "avatar": "placeholder",
      "rating": 5
    },
    {
      "quote": "Clear pricing, honest advice and a result our whole team is proud of. We have already started the next project.",
      "name": "Elena Rossi",
      "role": "Director, Tidewater Studio",
      "avatar": "placeholder",
      "rating": 5
    }
  ]
}

Tips#

  • Use 3 or 6 quotes in the grid style so the rows are full.
  • For a single highlighted quote, use the carousel with one item, or the "quote" section.
  • The field is "quote", not "text".

Editing it in the HTML files#

Each testimonial is a blockquote.testimonial: the text is the p, the name is cite and the role is the span after it. In the carousel, each quote sits in a .carousel-item, and there must be one dot button in .carousel-dots per item.

Where it's used#

Open these pages in template/ to see it working:

  • Creative Agency: template/creative-agency/home-2.html (source src/demos/creative-agency/pages/home-2.json)
  • Real Estate: template/real-estate/agent-olivia-bennett.html (source src/demos/real-estate/pages/agent.json)
  • Corporate: template/corporate/careers.html (source src/demos/corporate/pages/careers.json)
  • Finance: template/finance/advisor-margaret-ellison.html (source src/demos/finance/pages/advisor.json)
  • Law Firm: template/law-firm/attorney-eleanor-harrow.html (source src/demos/law-firm/pages/attorney.json)
  • SaaS Product: template/saas/customers.html (source src/demos/saas/pages/customers.json)
  • Mobile App: template/mobile-app/home-2.html (source src/demos/mobile-app/pages/home-2.json)
  • Tech Conference: template/conference/about.html (source src/demos/conference/pages/about.json)
  • Online Academy: template/education/course-ux-ui-design.html (source src/demos/education/pages/course.json)
  • Restaurant: template/restaurant/awards.html (source src/demos/restaurant/pages/awards.json)
  • Coffee Shop: template/cafe/index.html (source src/demos/cafe/pages/index.json)
  • Hotel & Resort: template/hotel/index.html (source src/demos/hotel/pages/index.json)
  • Wedding: template/wedding/home-2.html (source src/demos/wedding/pages/home-2.json)
  • Gym & Fitness: template/gym/home-2.html (source src/demos/gym/pages/home-2.json)
  • Yoga Studio: template/yoga/home-2.html (source src/demos/yoga/pages/home-2.json)
  • Day Spa & Salon: template/spa/index.html (source src/demos/spa/pages/index.json)
  • Medical Clinic: template/medical/home-2.html (source src/demos/medical/pages/home-2.json)
  • Dental Clinic: template/dental/home-2.html (source src/demos/dental/pages/home-2.json)
  • Pet Care: template/pet-care/index.html (source src/demos/pet-care/pages/index.json)
  • Construction: template/construction/home-2.html (source src/demos/construction/pages/home-2.json)
  • Car Dealer: template/car-dealer/testimonials.html (source src/demos/car-dealer/pages/testimonials.json)
  • Travel Agency: template/travel/destinations.html (source src/demos/travel/pages/destinations.json)
  • Photographer: template/photography/albums.html (source src/demos/photography/pages/albums.json)
  • Architecture Studio: template/architecture/home-2.html (source src/demos/architecture/pages/home-2.json)
  • Interior Design: template/interior-design/index.html (source src/demos/interior-design/pages/index.json)
  • Portfolio: template/portfolio/testimonials.html (source src/demos/portfolio/pages/testimonials.json)
  • Charity: template/charity/index.html (source src/demos/charity/pages/index.json)
  • Logistics: template/logistics/careers.html (source src/demos/logistics/pages/careers.json)