<!-- ### Begin: Element menu_card_list ### -->
<div id="c906" class="frame frame-default frame-type-menu_card_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Cards in 1 Column
</h2>
</header>
<div class="card-menu card-menu card-menu-align- card-menu-columns-1">
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
Page 1
</a>
</h3>
<h4 class="card-subtitle">
From above
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" target="_blank" class="card-link" title="Page 1" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_card_list ### -->
<!-- ### Begin: Element menu_card_list ### -->
<div id="c567" class="frame frame-default frame-type-menu_card_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Cards in 2 columns
</h2>
</header>
<div class="card-menu card-menu card-menu-align- card-menu-columns-2">
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
Page 1
</a>
</h3>
<h4 class="card-subtitle">
From above
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" target="_blank" class="card-link" title="Page 1" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 2" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 2" data-toggle="tooltip">
Page 2
</a>
</h3>
<h4 class="card-subtitle">
Cheers For The Years
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 2" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_card_list ### -->
<!-- ### Begin: Element menu_card_list ### -->
<div id="c508" class="frame frame-default frame-type-menu_card_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Cards in 3 columns
</h2>
</header>
<div class="card-menu card-menu card-menu-align- card-menu-columns-3">
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
Page 1
</a>
</h3>
<h4 class="card-subtitle">
From above
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" target="_blank" class="card-link" title="Page 1" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 2" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 2" data-toggle="tooltip">
Page 2
</a>
</h3>
<h4 class="card-subtitle">
Cheers For The Years
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 2" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 3" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 3" data-toggle="tooltip">
Page 3
</a>
</h3>
<h4 class="card-subtitle">
Photo by Geran de Klerk
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 3" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 4" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 4" data-toggle="tooltip">
Page 4
</a>
</h3>
<h4 class="card-subtitle">
Bird eye’s view!
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 4" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 5" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 5" data-toggle="tooltip">
Page 5
</a>
</h3>
<h4 class="card-subtitle">
Photo by Nikita Maru
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 5" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 6" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 6" data-toggle="tooltip">
Page 6
</a>
</h3>
<h4 class="card-subtitle">
Big Sur Road Trip
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 6" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_card_list ### -->
<!-- ### Begin: Element menu_card_list ### -->
<div id="c855" class="frame frame-default frame-type-menu_card_list frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<header class="frame-header">
<h2 class="element-header">
Cards in 4 columns
</h2>
</header>
<div class="card-menu card-menu card-menu-align- card-menu-columns-4">
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" target="_blank" title="Page 1" data-toggle="tooltip">
Page 1
</a>
</h3>
<h4 class="card-subtitle">
From above
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" target="_blank" class="card-link" title="Page 1" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 2" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 2" data-toggle="tooltip">
Page 2
</a>
</h3>
<h4 class="card-subtitle">
Cheers For The Years
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 2" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 3" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 3" data-toggle="tooltip">
Page 3
</a>
</h3>
<h4 class="card-subtitle">
Photo by Geran de Klerk
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 3" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
<div class="card-menu-item">
<div class="card">
<div class="card-img-top">
<a href="#" title="Page 4" data-toggle="tooltip">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#" title="Page 4" data-toggle="tooltip">
Page 4
</a>
</h3>
<h4 class="card-subtitle">
Bird eye’s view!
</h4>
<p class="card-text">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.
</p>
</div>
<div class="card-footer">
<a href="#" class="card-link" title="Page 4" data-toggle="tooltip">
more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_card_list ### -->
{% for variant in variants %}
{% include '@frame-menu-cards' with variant %}
{% endfor %}
{
"header": "3 Columns",
"data": {
"readmore_label": "Read more",
"pi_flexform": {
"align": "left",
"columns": 3
}
},
"settings": {
"menucard": {
"title": {
"crop": 0
},
"subtitle": {
"crop": 0
},
"abstract": {
"crop": 0
},
"icon": {
"width": 32,
"height": 32
}
}
},
"menu": [
{
"title": "Page 1",
"link": "#",
"target": "_blank",
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"icon": [
{
"title": null,
"alternative": null,
"extension": null
}
],
"data": {
"subtitle": "From above",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 2",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"data": {
"subtitle": "Cheers For The Years",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 3",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"data": {
"subtitle": "Photo by Geran de Klerk",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 4",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"data": {
"subtitle": "Bird eye’s view!",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 5",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"data": {
"subtitle": "Photo by Nikita Maru",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
},
{
"title": "Page 6",
"link": "#",
"target": null,
"files": [
{
"holder": {
"width": 640,
"height": 360
}
}
],
"data": {
"subtitle": "Big Sur Road Trip",
"abstract": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum fringilla pede sit amet augue. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc.\n"
}
}
],
"variants": [
{
"header": "Cards in 1 Column",
"maxItems": 1,
"data": {
"pi_flexform": {
"columns": 1
}
}
},
{
"header": "Cards in 2 columns",
"maxItems": 2,
"data": {
"pi_flexform": {
"columns": 2
}
}
},
{
"header": "Cards in 3 columns",
"data": {
"pi_flexform": {
"columns": 3
}
}
},
{
"header": "Cards in 4 columns",
"maxItems": 4,
"data": {
"pi_flexform": {
"columns": 4
}
}
}
]
}
No notes defined.