VtFeedbackCard

VtFeedbackCard displays a grid of testimonial cards (image, name, subtitle, quote, CTA) and is fully driven by JSON config.

Component Key

VtFeedbackCard in component-map and JSON.

JSON Example

{
  "VtFeedbackCard": {
    "config": {
      "title": "Der Hafer-Hype ist real...",
      "className": "content-container py-16",
      "gridClassName": "grid grid-cols-1 small:grid-cols-2 xl:grid-cols-4 gap-6",
      "cardClassName": "rounded-2xl overflow-hidden bg-[#CFECD9]",
      "imageClassName": "w-full h-[260px] object-cover",
      "contentClassName": "p-6",
      "nameClassName": "text-[#003F31] text-[20px] font-bold",
      "subtitleClassName": "mt-1 text-[#003f31b3] text-[14px]",
      "quoteClassName": "mt-4 text-[#003F31] text-[16px]",
      "ctaClassName": "mt-6 inline-flex items-center justify-center bg-[#FCEE56] text-[#0D382E] px-6 py-2 rounded-full font-bold",
      "items": [
        {
          "imageSrc": "/overnight-oat.webp",
          "name": "Harry Kane",
          "subtitle": "Profißballer...",
          "quote": "Als Sportler ist das Frühstück...",
          "cta": { "label": "Mehr erfahren", "href": "/" }
        }
      ]
    }
  }
}

Item Fields

imageSrc: Path to image. Optional.
imageAlt: Alt text for image. Defaults to name.
name: Person name.
subtitle: Role or description.
quote: Testimonial text.
cta.label: Button text.
cta.href: Optional link; if missing, renders as a button.
className, nameClassName, subtitleClassName, quoteClassName: Per-item style overrides.

Styling Keys

className: Section container.
title, titleClassName: Optional header text and style.
gridClassName: Cards layout grid.
cardClassName: Card container.
imageClassName: Image styles.
contentClassName: Inner content padding/layout.
nameClassName, subtitleClassName, quoteClassName: Typography.
ctaClassName: CTA button styles.

Notes

Omit imageSrc to create text-only cards.
Add or remove cards by editing items array in JSON.