Add Card feedback component guideline

namds29 2026-01-07 03:30:23 +00:00
parent 2475bbdd4f
commit 4bb28b3b63
1 changed files with 65 additions and 0 deletions

@ -0,0 +1,65 @@
# 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
```json
{
"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.