1 Homepage Category Highlight Component Guidelines setup

namds29 edited this page 2025-12-26 08:37:52 +00:00

Unescape Escape

Table of Contents

• Using VtCategoryHighlight

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Using VtCategoryHighlight

• Renders a grid of category tiles with optional images or text CTA content.
• Displays an optional section title above the grid via config.title.
• Each tile can link to a route using items[].href (wrapped with a localized client link).
• Styling is fully configurable via JSON: container, title, grid, label, and per‑item classes.

JSON Config

• Place VtCategoryHighlight under a page key in your design JSON. Examples:

{
  "pages": {
    "Home": [
      {
        "VtCategoryHighlight": {
          "config": {
            "title": "Oder lieber stöbern? Hier findest du sicher deine neuen Hafer-Favoriten.",
            "className": "content-container py-12 small:py-20",
            "gridClassName": "grid grid-cols-2 gap-6 w-full",
            "labelClassName": "absolute left-4 bottom-4 text-[#003F31] text-[18px] font-semibold",
            "items": [
              {
                "imageSrc": "/overnight-oat.webp",
                "href": "/categories/overnight-oats",
                "label": "Overnight Oats",
                "className": "bg-[#CFECD9] h-[250px]",
                "imageClassName": "object-contain"
              },
              {
                "headingLabel": "The Squatch Difference",
                "descriptionLabel": "Learn why men everywhere are loving Dr. Squatch.",
                "buttonLabel": "Learn more",
                "className": "flex-col bg-[#F9E0B0] p-6 justify-center",
                "headingClassName": "text-[#003F31] text-[28px] font-semibold",
                "descriptionClassName": "text-[#003f31b3]",
                "buttonClassName": "mt-4 text-[#003F31] text-[18px] font-semibold bg-orange-500 py-2 px-16 rounded text-white"
              }
            ]
          }
        }
      }
    ]
  }
}

• Alternate grid sizing example (4 columns):

{
  "pages": {
    "Home": [
      {
        "VtCategoryHighlight": {
          "config": {
            "gridClassName": "grid grid-cols-4 gap-6 w-full",
            "items": [
              { "imageSrc": "/overnight-oat.webp", "href": "/categories/overnight-oats", "label": "Overnight Oats", "className": "bg-[#CFECD9] col-start-1 col-end-3 row-start-1 row-end-3", "imageClassName": "object-contain" },
              { "imageSrc": "/overnight-oat.webp", "href": "/categories/porridge", "label": "Porridge", "className": "bg-[#F9E0B0]", "imageClassName": "object-contain" },
              { "imageSrc": "/overnight-oat.webp", "href": "/categories/cereals", "label": "Cereals", "className": "bg-[#F59E0B]", "imageClassName": "object-contain" },
              { "imageSrc": "/overnight-oat.webp", "href": "/categories/granola", "label": "Granola", "className": "bg-[#A7D8F0]", "imageClassName": "object-contain" },
              { "imageSrc": "/overnight-oat.webp", "href": "/categories/oat-bars", "label": "Oat Bars", "className": "bg-[#EED7F2]", "imageClassName": "object-contain" }
            ]
          }
        }
      }
    ]
  }
}

Fields

• config.title
  • Optional section heading shown above the grid.
• config.className
  • Wrapper classes for the section container.
  • Default: content-container py-12.
• config.titleClassName
  • Classes for the title text element.
  • Default: text-[#003F31] text-[28px] font-semibold mb-6.
• config.gridClassName
  • Classes applied to the grid container.
  • Default: grid grid-cols-3 gap-6 w-full.
• config.labelClassName
  • Classes for the label overlay rendered inside each tile when items[].label is provided.
  • Default: text-[#003F31] text-[18px] font-semibold.
• config.imageClassName
  • Classes forwarded to each tile image element.
  • Default: w-full h-full object-contain.
• config.tileClassName
  • Note: currently defined but not applied in rendering; style tiles via items[].className instead.
• config.items
  • Array of tile objects. Each tile supports two variants:
  • Image tile
    • imageSrc: path/URL to the image.
    • imageClassName: image element classes.
    • label: optional text displayed over the image using config.labelClassName.
    • href: optional; when set, the tile becomes a link.
    • className: classes for the tile wrapper.
  • Text CTA tile (no imageSrc)
    • headingLabel, descriptionLabel, buttonLabel: content shown centered in the tile.
    • headingClassName, descriptionClassName, buttonClassName: styling for each content piece.
    • className: classes for the tile wrapper, e.g., flex direction, padding, background.

Placement

• Add under the relevant page key in your design JSON to control visibility per route.
• Additions appear under your chosen page key (e.g., Home).
• The component is registered in the app’s component map as VtCategoryHighlight.
• For the route-aware config model, see docs/page-layout-config.md.

Notes

• If config.items is empty, nothing renders (returns null).
• Use items[].href to wrap tiles with the localized link.
• Use items[].className to size and position tiles in the grid. config.tileClassName is not used by the renderer.
• Images are rendered with a plain <img>; set imageClassName for fit/size control.