Start typing to search components and docs…
↵ select ↑ ↓ navigate ESC close

ProductTile

ProductTile - product link component which can be used for carousels, section with related products, recently added etc.

It requires a container with a specific width - it’s best to set it directly in the carousel’s <swiper-slide> tag.

Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
Image Alt
6R0920870F
6R0.920.870.F
6R0-920-870-F
6R0 920 870 F
export const productObject = {
  name: 'Combi-instrument MFA+',
  url: 'https://google.com',
  number: '6R0920870F',
  photo: 'https://placehold.co/400x300'
}

<ProductTile productObject={productObject} />

Props

PropTypeDefaultDescription
productObject*ProductObject—Object describing the product — see shape below.
indexnumber—Index within a list. When `1`, the inner `Image` is marked as hero (eager-loaded, Pagefind indexed).

ProductObject shape

interface ProductObject {
  name: string;        // Display name (becomes link text)
  url: string;         // Product detail page URL
  number: string;      // VW product number (rendered via ProductNumber)
  photo: string | null; // Image URL — pass null to render a placeholder
}