Products
Regular product
Heading 1
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
- Lorem
- Ipsum
Heading 2
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
- Lorem
- Ipsum
Heading 3
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
- Lorem
- Ipsum
<div class="o-grid">
<div class="o-grid-4@md">
<!-- product.blade.php -->
<div class="c-product" id="673ed7a7f18d8" data-uid="673ed7a7f18e8">
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed7a7f1c86">
<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="673ed7a7f19ad">
Heading 1
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="673ed7a7f19f3">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p></div> <div class="c-card__body c-product__body">
<!-- listing.blade.php -->
<ul class="c-listing c-product__listing c-product__listing--primary" data-uid="673ed7a7f1a79">
<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 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="673ed7a7f1b2c">
249
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="673ed7a7f1b64">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="673ed7a7f1b99">
<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" target="_top" type="filled" href="#" aria-label="Buy" data-uid="673ed7a7f1c19">
<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="673ed7a7f1cc4" data-uid="673ed7a7f1cca">
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed7a7f2040">
<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="673ed7a7f1d23">
Heading 2
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="673ed7a7f1d55">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p></div> <div class="c-card__body c-product__body">
<!-- typography.blade.php original: p -->
<p class="c-typography c-product__meta c-typography__variant--meta" data-uid="673ed7a7f1d96">
Everything in heading 1 is included
</p> <!-- listing.blade.php -->
<ul class="c-listing c-product__listing c-product__listing--secondary" data-uid="673ed7a7f1dc3">
<li class="c-listing__item c-listing__item-0">
<a class="c-listing__link" href="#" aria-label="Lorem">
<span class="c-listing__label">
Lorem
</span>
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed7a7f1ebe">
</span>
</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 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="673ed7a7f1f54">
349
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="673ed7a7f1f86">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="673ed7a7f1fb4">
<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" target="_top" type="filled" href="#" aria-label="Buy" data-uid="673ed7a7f1fff">
<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="673ed7a7f2075" data-uid="673ed7a7f207c">
<!-- card.blade.php -->
<div class="c-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="673ed7a7f230d">
<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="673ed7a7f20d0">
Heading 3
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="673ed7a7f2100">
Atoms are the fundemental building blocks. They are rarely used just by them self but mostly used to build more advanced components.
</p></div> <div class="c-card__body c-product__body">
<!-- typography.blade.php original: p -->
<p class="c-typography c-product__meta c-typography__variant--meta" data-uid="673ed7a7f213f">
Everything in heading 2 is included
</p> <!-- listing.blade.php -->
<ul class="c-listing c-product__listing c-product__listing--custom" data-uid="673ed7a7f216b">
<li class="c-listing__item c-listing__item-0">
<a class="c-listing__link" href="#" aria-label="Lorem">
<span class="c-listing__label">
Lorem
</span>
<!-- icon.blade.php -->
<span class="c-icon c-icon--chevron-right c-icon--material c-icon--material-chevron_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="673ed7a7f21a8">
</span>
</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 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="673ed7a7f2225">
349
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="673ed7a7f225b">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="673ed7a7f2288">
<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" target="_top" type="filled" href="#" aria-label="Buy" data-uid="673ed7a7f22d0">
<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. |