<div class="selector-sub mega-menu mega-menu--grid">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Recreation</p>
<div class="atm-paragraph">
<p>Holiday parks, Theme parks and more.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Education</p>
<div class="atm-paragraph">
<p>From primary schools till universities.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Industry</p>
<div class="atm-paragraph">
<p>Farmaceutische , High Care and Voedingsmiddelenindustrie</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Transport and logistics</p>
<div class="atm-paragraph">
<p>Public transport and airports</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Offices</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Government</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<footer>
<p>Do you need advice right now? Call <a href="#">+31 (0)88 099 08 90</a></p>
</footer>
</div>
{{#if subitems}}
<div class="selector-sub mega-menu mega-menu--{{modifier}}">
<ul>
{{#each subitems}}
<li>
<a href="{{href}}">
{{render '@icon' itemIcon}}
<div>
<p class="atm-heading h6">{{title}}</p>
<div class="atm-paragraph"><p>{{text}}</p></div>
</div>
</a>
</li>
{{/each}}
</ul>
{{#if contact}}
<footer>
<p>{{contact.text}} <a href="{{contact.href}}">{{contact.linkText}}</a></p>
</footer>
{{/if}}
</div>
{{/if}}
{
"contact": {
"text": "Do you need advice right now? Call",
"linkText": "+31 (0)88 099 08 90",
"href": "#"
},
"subitems": [
{
"title": "Recreation",
"text": "Holiday parks, Theme parks and more.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Education",
"text": "From primary schools till universities.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Industry",
"text": "Farmaceutische , High Care and Voedingsmiddelenindustrie",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Transport and logistics",
"text": "Public transport and airports",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
},
{
"title": "Offices",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Government",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
}
],
"modifier": "grid",
"hasIcon": false,
"icon": {}
}
.mega-menu {
@apply overflow-hidden min-w-[48rem] w-max border border-primary border-opacity-10;
&.mega-menu--grid,
&.mega-menu--marketing {
> ul {
> li a .atm-paragraph p {
@apply max-w-none;
}
}
}
&.mega-menu--grid {
> ul {
@apply grid grid-cols-2 !p-8;
}
}
&.mega-menu--marketing {
@apply grid grid-cols-2 p-2;
> ul {
@apply max-h-[480px] overflow-y-scroll;
}
.marketing-area {
@apply bg-primary bg-opacity-10 text-primary p-4 justify-between flex flex-col rounded-2xl max-w-sm;
.atm-image img {
@apply aspect-video object-cover rounded-lg mb-4 w-full;
}
.atm-heading {
@apply mb-2;
}
.atm-paragraph {
@apply mb-8 text-gray-500 text-left;
}
}
}
> ul {
@apply !p-6 flex flex-col gap-6;
> li a {
@apply flex gap-6;
.atm-icon {
@apply text-h4 w-7 flex-shrink-0;
}
.atm-heading {
@apply m-0 mb-2;
}
.atm-paragraph p {
@apply text-sm max-w-[26ch] transition-colors m-0;
}
&:hover * {
@apply text-secondary-col-1;
}
}
}
footer {
@apply font-display bg-primary bg-opacity-10 text-primary px-10 py-3 text-sm text-center;
}
}
No notes defined.