Product

<div class="o-grid">
  <div class="o-grid-4@md">
    <!-- product.blade.php -->
    <div class="c-product" id="id_6ab018e3a5b3c" data-component="product">
      <!-- card.blade.php -->
      <div class="c-card c-card--ratio-16-9" 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" data-component="card__header">
            <!-- typography.blade.php   original: h2 -->
            <h2 class="c-typography c-product__heading c-product__heading--primary c-typography__variant--h3" data-component="typography">
              Heading 1
            </h2><!-- typography.blade.php   original: p -->
            <p class="c-typography c-product__label c-typography__variant--p" data-component="typography">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
          <div class="c-card__footer c-product__footer" data-component="card__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-component="typography">249</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__currency c-typography__variant--marketing" data-component="typography">:-</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__frequency c-typography__variant--subtitle" 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-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_6ab018e3a77df" data-component="product">
      <!-- card.blade.php -->
      <div class="c-card c-card--ratio-16-9" 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" data-component="card__header">
            <!-- typography.blade.php   original: h2 -->
            <h2 class="c-typography c-product__heading c-product__heading--secondary c-typography__variant--h3" data-component="typography">
              Heading 2
            </h2><!-- typography.blade.php   original: p -->
            <p class="c-typography c-product__label c-typography__variant--p" data-component="typography">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
          <div class="c-card__footer c-product__footer" data-component="card__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-component="typography">349</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__currency c-typography__variant--marketing" data-component="typography">:-</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__frequency c-typography__variant--subtitle" 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-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_6ab018e3a8235" data-component="product">
      <!-- card.blade.php -->
      <div class="c-card c-card--ratio-16-9" 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" data-component="card__header">
            <!-- typography.blade.php   original: h2 -->
            <h2 class="c-typography c-product__heading c-product__heading--custom c-typography__variant--h3" data-component="typography">
              Heading 3
            </h2><!-- typography.blade.php   original: p -->
            <p class="c-typography c-product__label c-typography__variant--p" data-component="typography">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
          <div class="c-card__footer c-product__footer" data-component="card__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-component="typography">349</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__currency c-typography__variant--marketing" data-component="typography">:-</span> <!-- typography.blade.php   original: span -->
                 <span class="c-typography c-product__frequency c-typography__variant--subtitle" 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-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>