Ariake Design Components
Bff Products
ProductDetail / type="ProductDetail"
ProductGrid / color_code sub_image"
ProductCarouselDestroy / color_code sub_image"
ProductGrid Text
data-component-type="ProductGridText"
ProductGridText / column="2"
ProductGridText / column="3"
ProductCarousel Destroy
3 columns when Mobile, 5 columns when Desktop
data-component-type="ProductCarouselDestroy"
ProductCarouselDestroy: 5 products or more
ProductCarouselDestroy: 2 products or less
ProductCarouselDestroy: 2 products or less, Centred
ProductCarouselDestroy: 3 - 4 products
ProductCarouselDestroy: 3 - 4 products, Centred when Desktop
Product Carousel
data-component-type="ProductCarousel"
2.8 columns when Mobile, 4 columns when Desktop
2.8 columns when Mobile, 4 columns when Desktop
2.8 columns when Mobile, 4 columns when Desktop, 2Products or less
2.8 columns when Mobile, 4 columns when Desktop, 2Products or less, Centred
2.8 columns when Mobile, 4 columns when Desktop, 1Products or less, Centred
2.8 columns when Mobile, 5 columns when Desktop
ProductCarousel / 2.8 columns when Mobile, 5 columns when Desktop, 4 products or more
ProductCarousel / 2 products or less
ProductCarousel / 2 products or less Centred
ProductCarousel / 3 products or less
ProductCarousel / 3 products or less, Centred
Product Grid
2 columns when Mobile, 4 columns when Desktop
data-component-type="ProductGrid"
ProductGrid: 5products or more
ProductGrid: 2 products or less
ProductGrid: 2 products or less, Centred
ProductGrid: 3 - 4 products
ProductGrid: 3 - 4 products, Centred when Desktop
ProductGrid Horizontal
data-component-type="ProductGridHorizontal"