Homepage: Implement Feedback User (3Bear) #26

New Issue

2025-12-23T02:56:47Z

Ghost commented

2025-12-23 02:56:47 +00:00

![image](/attachments/080fc781-a8ac-4bb7-9e02-212c0274b4c3)

image.png

2.8 MiB

Ghost changed title from ~~Homepage: Implement Feedback User~~ to Homepage: Implement Feedback User (3Bear)

2025-12-23 02:57:25 +00:00

Ghost added this to the Storefront Shop project 2025-12-23 03:06:17 +00:00

Ghost commented

2026-01-07 03:59:27 +00:00

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.

![image](/attachments/95631ba5-0e66-4b1c-9f69-f92a8a70ae5b) # 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.

image.png

1.1 MiB

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Shop/Shop-Storefront#26