ProductSizeUnitBadges

Used for displaying unit size, case size, and sleeve size product information.

Component

750ml Case of 12 Pack of 6

Storybook

Storybook - ProductSizeUnitBadges Documentation

Figma Demo

Guidelines

Variations

ProductSizeUnitBadges should only use the boxy/neutral/static badge variant.

  • Up to 3 badges allowed

  • Order is always unit size, then case size, then sleeve size

  • Size should always be shown across all products; case size & pack size if needed.

Usage

Use the ProductSizeUnitBadges component to display unit size, case size, and sleeve size.

Component Specs

API

  • sizeUnitBadges: string[] | Default: []
    The size unit badges of the product.

Example

<script>
	import { ProductSizeUnitBadges } from '@getprovi/craft-svelte';
</script>

<ProductSizeUnitBadges sizeUnitBadges={['750ml', 'Case of 12', 'Pack of 6']} />

Types

interface ProductSizeUnitBadgesProps {
	sizeUnitBadges: string[];
}