Product Box

This component is used to display our product catalogues in a consistent way. It is composed of several parts that are all optional.

Example

Variants: Recommended

Example

Variants: Active

Example

API

ProductBox

Name Type Default Description
style string CSS class names you can apply (product-active, product-orange, product-purple)

ProductInner

Name Type Default Description
N/A

ProductHeader

Name Type Default Description
style string CSS class names you can apply - DEPRECATED, please update
title string Name of the product family or relevant header

ProductBody

Name Type Default Description
N/A
Name Type Default Description
link string URL link to the product details page

ProductName

Name Type Default Description
name string Name of the product used like a subtitle

ProductPrice

Name Type Default Description
price number Price as a float number to include cents
gstLabel string Label for the GST/VAT (usually ‘+GST’)
unit string Occurrence of the price (usually ‘month’ or ‘year’)

ProductDescription

Name Type Default Description
N/A

ProductRecommended

Name Type Default Description
N/A

Used by

Team
Bumblenauts
Galileo