ProductNumber

ProductNumber - with additional formatting adding spacing for Volkswagen product numbers.

Use the after-number slot to add a copy button or other actions next to the product number (e.g. on PDP pages).

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

000051443F

000.051.443.F

000-051-443-F

000 051 443 F

WHT005227

WHT.005.227

WHT-005-227

WHT 005 227

N0385491

N03.854.91

N03-854-91

N03 854 91

<ProductNumber
  small
  productNumber="6R0920870F"
  class="mb-2"
/>

With ButtonCopy (PDP usage)

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

000051443F

000.051.443.F

000-051-443-F

000 051 443 F

WHT005227

WHT.005.227

WHT-005-227

WHT 005 227

N0385491

N03.854.91

N03-854-91

N03 854 91

6R0920870F

6R0.920.870.F

6R0-920-870-F

6R0 920 870 F

000051443F

000.051.443.F

000-051-443-F

000 051 443 F

WHT005227

WHT.005.227

WHT-005-227

WHT 005 227

N0385491

N03.854.91

N03-854-91

N03 854 91

Props

Prop	Type	Default	Description
`productNumber`*	`string`	`—`	Raw VW product number (e.g. `6R0920870F`).
`numberFormatted`	`{ dot: string; dash: string; standard: string }`	`—`	Pre-formatted number from API. Falls back to client-side formatting when omitted.
`isPdp`	`boolean`	`false`	Uses `h2`/`h3` semantic wrappers for product detail page usage.
`big`	`boolean`	`false`	Larger font size variant.
`small`	`boolean`	`false`	Tighter letter spacing for compact layouts.
`class`	`string`	`—`	Extra classes appended to the wrapper.

Slots

Slot	Description
`after-number`	Renders next to the product number (typically a `ButtonCopy`)