VtBrand — Usage Guide

Renders a horizontal row of brand logos with an optional section title.
Supports image logos via items[].imageSrc with alt, or text fallback via items[].label.
Fully styleable through JSON classes for container, title, row layout, and per-item overrides.

Location

Component is available as VtBrand in the dynamic layout system.

Add To A Page

Route-aware pages:

{
  "pages": {
    "Home": [
      {
        "VtBrand": {
          "config": {
            "className": "w-full py-12 bg-[#CFECD9]",
            "innerClassName": "content-container flex flex-col items-center",
            "title": "Trusted By",
            "titleClassName": "text-[#1f3521] text-[20px] font-bold mb-8",
            "brandsClassName": "flex w-full items-center justify-between gap-12",
            "items": [
              { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "imageClassName": "h-[40px] object-contain" },
              { "imageSrc": "/brands/gq.svg", "alt": "GQ", "imageClassName": "h-[40px] object-contain" },
              { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "imageClassName": "h-[40px] object-contain" }
            ]
          }
        }
      }
    ]
  }
}

Global layout (always visible across pages):

{
  "layout": [
    { "Header": { "config": { "sticky": true } } },
    { "PropsChildren": {} },
    { "VtBrand": { "config": { "title": "Trusted By", "items": [ { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health" } ] } } },
    { "Footer": { "config": { /* ... */ } } }
  ]
}

Config Fields

config.title — optional section heading. Default "Trusted By".
config.className — outer section classes. Default w-full py-12 bg-[#CFECD9].
config.innerClassName — inner wrapper. Default content-container flex flex-col items-center.
config.titleClassName — title element classes. Default text-[#1f3521] text-[20px] font-bold mb-8.
config.brandsClassName — row layout for logos. Default flex w-full items-center justify-between gap-12.
config.itemClassName — per-item wrapper defaults. Default opacity-90.
config.imageClassName — default for all images. Default h-[48px] w-auto object-contain.
config.labelClassName — text fallback style. Default text-[#1f3521] text-[36px] font-semibold.
config.items[] — array of brand entries:
- Image logo: imageSrc, alt, optional containerClassName, imageClassName, href.
- Text fallback: omit imageSrc, provide label, optional className.

Behavior

If items is empty, the component returns nothing.
If href is supplied, the item wraps with a localized link for country-aware routing.
Image alt falls back to label or brand-{index} when alt is omitted.

Examples

Image-only logos with consistent height:

{
  "VtBrand": {
    "config": {
      "brandsClassName": "flex items-center justify-between gap-12",
      "items": [
        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "imageClassName": "h-[40px] object-contain" },
        { "imageSrc": "/brands/gq.svg", "alt": "GQ", "imageClassName": "h-[40px] object-contain" },
        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "imageClassName": "h-[40px] object-contain" }
      ]
    }
  }
}

Mixed image and text fallback:

{
  "VtBrand": {
    "config": {
      "items": [
        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health" },
        { "label": "GQ", "className": "text-[#1f3521] text-[44px] font-black" },
        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox" }
      ]
    }
  }
}

Clickable logos:

{
  "VtBrand": {
    "config": {
      "items": [
        { "imageSrc": "/brands/menshealth.svg", "alt": "Men's Health", "href": "/press/menshealth" },
        { "imageSrc": "/brands/gq.svg", "alt": "GQ", "href": "/press/gq" },
        { "imageSrc": "/brands/birchbox.svg", "alt": "Birchbox", "href": "/press/birchbox" }
      ]
    }
  }
}

Styling Tips

Keep all logos visually consistent by setting a uniform height via imageClassName and using object-contain to preserve aspect ratio.
Adjust spacing with brandsClassName (gap-*, justify-*) and per-logo containerClassName.
Use SVG assets for crisp rendering; place assets under public/brands/ for simple imageSrc paths.