Add Card feedback component guideline
parent
2475bbdd4f
commit
4bb28b3b63
|
|
@ -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.
|
||||||
|
|
||||||
Loading…
Reference in New Issue