1 VtFeedbackCard component guideline

namds29 edited this page 2026-01-12 02:36:10 +00:00

Table of Contents

• VtFeedbackCard
• Component Key
• JSON Example
• Item Fields
• Styling Keys
• Notes

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.