Product

The Product component provides a reusable pattern for products in the interface.

Regular product

<div class="o-grid">
    <div class="o-grid-4@md">
            <!-- product.blade.php -->
<div class="c-product" id="id_6a1052b2efbef" data-uid="6a1052b2efc06" data-component="product">
        <!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6a1052b2eff1c" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__image c-card__image--primary c-product__image-container">
    <img class="c-product__image c-product__image--primary" src="/assets/img/component.svg" alt="Heading 1">
</div>
        <div class="c-card__header c-product__header">
        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-product__heading c-product__heading--primary c-typography__variant--h3" data-uid="6a1052b2efcf2" data-component="typography">
    Heading 1
</h2>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6a1052b2efd36" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p></div>                <div class="c-card__footer c-product__footer">
                <div class="c-product__prices has-button">
    <div class="c-product__price c-product__price--primary">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__amount c-typography__variant--marketing" data-uid="6a1052b2efda1" data-component="typography">
    249
</span>                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6a1052b2efdd6" data-component="typography">
    :-
</span>                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6a1052b2efe08" data-component="typography">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
</div>
                <a class="c-button c-product__button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" aria-label="Buy" data-uid="6a1052b2efe9f" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span> </a>
        </div>
            </div>
</div>
</div>
    </div>
    <div class="o-grid-4@md">
            <!-- product.blade.php -->
<div class="c-product" id="id_6a1052b2eff61" data-uid="6a1052b2eff6a" data-component="product">
        <!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6a1052b2f0155" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__image c-card__image--secondary c-product__image-container">
    <img class="c-product__image c-product__image--secondary" src="/assets/img/component.svg" alt="Heading 2">
</div>
        <div class="c-card__header c-product__header">
        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-product__heading c-product__heading--secondary c-typography__variant--h3" data-uid="6a1052b2effd0" data-component="typography">
    Heading 2
</h2>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6a1052b2f0005" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p></div>                <div class="c-card__footer c-product__footer">
                <div class="c-product__prices has-button">
    <div class="c-product__price c-product__price--secondary">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__amount c-typography__variant--marketing" data-uid="6a1052b2f005e" data-component="typography">
    349
</span>                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6a1052b2f008f" data-component="typography">
    :-
</span>                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6a1052b2f00be" data-component="typography">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
</div>
                <a class="c-button c-product__button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" aria-label="Buy" data-uid="6a1052b2f0112" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span> </a>
        </div>
            </div>
</div>
</div>
    </div>
     <div class="o-grid-4@md">
            <!-- product.blade.php -->
<div class="c-product" id="id_6a1052b2f018f" data-uid="6a1052b2f0198" data-component="product">
        <!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6a1052b2f0361" data-component="card">
    <div class="c-card__paint-container">
                        <div class="c-card__image c-card__image--custom c-product__image-container">
    <img class="c-product__image c-product__image--custom" src="/assets/img/component.svg" alt="Heading 3">
</div>
        <div class="c-card__header c-product__header">
        <!-- typography.blade.php   original: h2 -->
<h2 class="c-typography c-product__heading c-product__heading--custom c-typography__variant--h3" data-uid="6a1052b2f01f3" data-component="typography">
    Heading 3
</h2>        <!-- typography.blade.php   original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6a1052b2f0226" data-component="typography">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p></div>                <div class="c-card__footer c-product__footer">
                <div class="c-product__prices has-button">
    <div class="c-product__price c-product__price--custom">
            <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__amount c-typography__variant--marketing" data-uid="6a1052b2f0271" data-component="typography">
    349
</span>                        <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6a1052b2f02a0" data-component="typography">
    :-
</span>                                <!-- typography.blade.php   original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6a1052b2f02ce" data-component="typography">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
</div>
                <a class="c-button c-product__button c-button__filled c-button__filled--custom c-button--md" href="#" target="_top" aria-label="Buy" data-uid="6a1052b2f031e" data-component="button">   
     <span class="c-button__label">         
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span> </a>
        </div>
            </div>
</div>
</div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 1',
            'label' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'prices' => [
                ['amount' => '249', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
    <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 2',
            'backgroundColor' => 'secondary',
            'label' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'prices' => [
                ['amount' => '349', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
     <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 3',
            'backgroundColor' => 'custom',
            'label' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'prices' => [
                ['amount' => '349', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
</div>

API

Parameter	Default	Description
heading		Product name
backgroundColor	primary	Background color to use
image	false	An image object
prices	[]	Array of price objects
currencyFirst	false	Should currency be displayed before the price
label		Label describing the product
meta		Extra text displayed above bullet points
bulletPoints	[]	Array of bullet points for the product
button	[]	The button to display at the bottom
featured	false	Is the product featured? Make the product stand out from the rest

CSS API

Variable	Default	Type	Values	Description
--c-product--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-product--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-product--font-size-100	var(--font-size-100)	range	-	Base font size.
--c-product--font-size-600	var(--font-size-600)	range	-	Five steps above base in the type scale. Equivalent to h2.
--c-product--color--primary	var(--color--primary)	color	-	Primary
--c-product--color--secondary	var(--color--secondary)	color	-	Secondary

Similar components

Card