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="id_6966988c3e824" data-uid="6966988c3e841">
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6966988c3edec">
<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="6966988c3e986">
Heading 1
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6966988c3e9e4">
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="6966988c3eab5">
<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="6966988c3ebb9">
249
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6966988c3ec00">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6966988c3ec5b">
<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="6966988c3ed36">
<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="id_6966988c3ee4d" data-uid="6966988c3ee5d">
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6966988c3f3fd">
<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="6966988c3eef3">
Heading 2
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6966988c3ef38">
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="6966988c3efa0">
Everything in heading 1 is included
</p> <!-- listing.blade.php -->
<ul class="c-listing c-product__listing c-product__listing--secondary" data-uid="6966988c3efdf">
<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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6966988c3f1dc">
</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="6966988c3f2b7">
349
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6966988c3f2f9">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6966988c3f335">
<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="6966988c3f3a1">
<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="id_6966988c3f455" data-uid="6966988c3f461">
<!-- card.blade.php -->
<div class="c-card c-card--ratio-16-9" data-uid="6966988c3f7f8">
<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="6966988c3f4d8">
Heading 3
</h2> <!-- typography.blade.php original: p -->
<p class="c-typography c-product__label c-typography__variant--p" data-uid="6966988c3f51a">
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="6966988c3f56e">
Everything in heading 2 is included
</p> <!-- listing.blade.php -->
<ul class="c-listing c-product__listing c-product__listing--custom" data-uid="6966988c3f5a8">
<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" data-material-symbol="chevron_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="6966988c3f5fb">
</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="6966988c3f6c2">
349
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__currency c-typography__variant--marketing" data-uid="6966988c3f704">
:-
</span> <!-- typography.blade.php original: span -->
<span class="c-typography c-product__frequency c-typography__variant--subtitle" data-uid="6966988c3f73c">
<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="6966988c3f7a3">
<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. |