ProductInfo

Used for displaying product information such as title and categorization.

Component

Title fills the container, but is truncated if it is over 2 lines.
Subtype
Style

Storybook

Storybook - ProductInfo Documentation

Figma Demo

Guidelines

Variations

ProductInfo has no variants and will always display both the product title and the subtype and style categorization. Note that the product title is limited to two lines before it truncates.

Usage

Use the ProductInfo component to display product information such as title and categories.

Component Specs

API

  • title: string | Default: undefined
    The title of the product.
  • categories: string[] | Default: [] The categories of the product.

Example

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

<ProductInfo
	title="Title fills the container, but is truncated if it is over 2 lines."
	categories={['Subtype', 'Style']}
/>

Types

interface ProductInfoProps {
	title: string;
	categories: string[];
}