Products

Regular product

Lorem
Ipsum

Everything in heading 1 is included

Lorem
Ipsum

Everything in heading 2 is included

Lorem
Ipsum

<div class="o-grid">
    <div class="o-grid-4@md">
        <!-- product.blade.php -->
<div class="c-product" id="62f8e945958b9" data-uid="62f8e945958c6">
    <!-- card.blade.php -->
<div href="" id="62f8e945961ad" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62f8e945961ab">
    
    <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  -->
<h2 id="62f8e94595a13" class="c-typography c-product__heading c-product__heading--primary c-typography__variant--h3" data-uid="62f8e94595a0f">
    Heading 1
</h2>            <!-- typography.blade.php  -->
<p id="62f8e94595a51" class="c-typography c-product__label c-typography__variant--p" data-uid="62f8e94595a4f">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>            <div class="c-product__price c-product__price--primary">
        <!-- typography.blade.php  -->
<span id="62f8e94595ace" class="c-typography c-product__amount c-typography__variant--marketing" data-uid="62f8e94595acc">
    249
</span>                    <!-- typography.blade.php  -->
<span id="62f8e94595b02" class="c-typography c-product__currency c-typography__variant--marketing" data-uid="62f8e94595b00">
    :-
</span>                            <!-- typography.blade.php  -->
<span id="62f8e94595b33" class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="62f8e94595b32">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
        </div>
        <div class="c-card__body c-product__body">
                                        <!-- pagination.blade.php -->
  <ul id="62f8e94595fc9" class="c-listing c-product__listing c-product__listing--primary" data-uid="62f8e94595fc5">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <span class="c-listing__label">
                        Lorem
                      </span>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-1">
          <span class="c-listing__label">
                        Ipsum
                      </span>
           
        </li>
        
      
  </ul>
                    </div>
        <div class="c-card__footer">
    <a id="62f8e94596129" class="c-button c-button__filled c-button__filled--primary c-button--md" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" data-uid="62f8e94596123">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span>
</a></div>
</div></div>
    </div>
    <div class="o-grid-4@md">
        <!-- product.blade.php -->
<div class="c-product" id="62f8e945961f7" data-uid="62f8e945961fd">
    <!-- card.blade.php -->
<div href="" id="62f8e945964ad" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62f8e945964aa">
    
    <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  -->
<h2 id="62f8e9459624a" class="c-typography c-product__heading c-product__heading--secondary c-typography__variant--h3" data-uid="62f8e94596248">
    Heading 2
</h2>            <!-- typography.blade.php  -->
<p id="62f8e9459627e" class="c-typography c-product__label c-typography__variant--p" data-uid="62f8e9459627c">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>            <div class="c-product__price c-product__price--secondary">
        <!-- typography.blade.php  -->
<span id="62f8e945962c9" class="c-typography c-product__amount c-typography__variant--marketing" data-uid="62f8e945962c6">
    349
</span>                    <!-- typography.blade.php  -->
<span id="62f8e945962fa" class="c-typography c-product__currency c-typography__variant--marketing" data-uid="62f8e945962f8">
    :-
</span>                            <!-- typography.blade.php  -->
<span id="62f8e94596329" class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="62f8e94596327">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
        </div>
        <div class="c-card__body c-product__body">
                            <!-- typography.blade.php  -->
<p id="62f8e9459635c" class="c-typography c-product__meta c-typography__variant--meta" data-uid="62f8e9459635a">
    Everything in heading 1 is included
</p>                                        <!-- pagination.blade.php -->
  <ul id="62f8e9459638d" class="c-listing c-product__listing c-product__listing--secondary" data-uid="62f8e9459638b">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <a href="#" aria-label="Lorem" class="c-listing__link">
            <span class="c-listing__label">
              Lorem
            </span>

            <!-- icon.blade.php -->
          </a>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-1">
          <span class="c-listing__label">
                        Ipsum
                      </span>
           
        </li>
        
      
  </ul>
                    </div>
        <div class="c-card__footer">
    <a id="62f8e94596469" class="c-button c-button__filled c-button__filled--secondary c-button--md" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" data-uid="62f8e94596466">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span>
</a></div>
</div></div>
    </div>
     <div class="o-grid-4@md">
        <!-- product.blade.php -->
<div class="c-product" id="62f8e945964f0" data-uid="62f8e945964f6">
    <!-- card.blade.php -->
<div href="" id="62f8e9459677e" class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="62f8e9459677b">
    
    <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  -->
<h2 id="62f8e94596550" class="c-typography c-product__heading c-product__heading--custom c-typography__variant--h3" data-uid="62f8e9459654d">
    Heading 3
</h2>            <!-- typography.blade.php  -->
<p id="62f8e94596589" class="c-typography c-product__label c-typography__variant--p" data-uid="62f8e94596587">
    Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p>            <div class="c-product__price c-product__price--custom">
        <!-- typography.blade.php  -->
<span id="62f8e945965d1" class="c-typography c-product__amount c-typography__variant--marketing" data-uid="62f8e945965cf">
    349
</span>                    <!-- typography.blade.php  -->
<span id="62f8e94596601" class="c-typography c-product__currency c-typography__variant--marketing" data-uid="62f8e945965ff">
    :-
</span>                            <!-- typography.blade.php  -->
<span id="62f8e94596631" class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="62f8e9459662f">
    <span class="c-product__seperator">/</span>
                mon
</span>            </div>
        </div>
        <div class="c-card__body c-product__body">
                            <!-- typography.blade.php  -->
<p id="62f8e94596663" class="c-typography c-product__meta c-typography__variant--meta" data-uid="62f8e94596661">
    Everything in heading 2 is included
</p>                                        <!-- pagination.blade.php -->
  <ul id="62f8e94596694" class="c-listing c-product__listing c-product__listing--custom" data-uid="62f8e94596692">
     
      
        
                <li class="c-listing__item c-listing__item-0">
          <a href="#" aria-label="Lorem" class="c-listing__link">
            <span class="c-listing__label">
              Lorem
            </span>

            <!-- icon.blade.php -->
          </a>
           
        </li>
        
      
        
                <li class="c-listing__item c-listing__item-1">
          <span class="c-listing__label">
                        Ipsum
                      </span>
           
        </li>
        
      
  </ul>
                    </div>
        <div class="c-card__footer">
    <a id="62f8e94596742" class="c-button c-button__filled c-button__filled--custom c-button--md" href="#" target="_top" js-toggle-trigger="" js-toggle-item="" type="filled" data-uid="62f8e9459673e">   
    <span class="c-button__label">
        
        
                    <span class="c-button__label-text ">
                Buy
            </span>
        
    </span>
</a></div>
</div></div>
    </div>
</div>

<div class="o-grid">
    <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 1',
            'label' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'prices' => [
                ['amount' => '249', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'bulletPoints' => [
                ['label' => 'Lorem'],
                ['label' => 'Ipsum']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
    <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 2',
            'backgroundColor' => 'secondary',
            'label' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'meta' => 'Everything in heading 1 is included',
            'prices' => [
                ['amount' => '349', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'bulletPoints' => [
                ['label' => 'Lorem', 'href' => '#'],
                ['label' => 'Ipsum']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
     <div class="o-grid-4@md">
        @product([
            'heading' => 'Heading 3',
            'backgroundColor' => 'custom',
            'label' => 'Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.',
            'image' => [
                'src' => '/assets/img/component.svg',
                'alt' => 'ALT', 
                'backgroundColor' => 'secondary',
                'padded' => true
            ],
            'meta' => 'Everything in heading 2 is included',
            'prices' => [
                ['amount' => '349', 'currency' => ':-', 'frequency' => 'mon']
            ],
            'bulletPoints' => [
                ['label' => 'Lorem', 'href' => '#'],
                ['label' => 'Ipsum']
            ],
            'button' => ['type' => 'filled', 'text' => 'Buy', 'href' => '#']
        ])
        @endproduct
    </div>
</div>

Blade component parameters

Key	Default value	Type	Available values	Description
heading		string	-	Product name
backgroundColor	primary	string	-	Background color to use
image	false	boolean	-	An image object
prices	[]	array	-	Array of price objects
currencyFirst	false	boolean	-	Should currency be displayed before the price
label		string	-	Label describing the product
meta		string	-	Extra text displayed above bullet points
bulletPoints	[]	array	-	Array of bullet points for the product
button	[]	array	-	The button to display at the bottom
featured	false	boolean	-	Is the product featured? Make the product stand out from the rest
id		string	-	The DOM id of the component.
classList	[]	array	-	Array containing wrapping classes array
attributeList	[]	array	-	Array containing keys and values rendered as attributes
containerAware	false	boolean	true/false	Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.

Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Product/product.json