<!-- ### Begin: Element menu_thumbnail_list ### -->
<div id="c715" class="frame frame-default frame-type-menu_thumbnail_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">
1 Column
</h2>
<h3 class="element-subheader">Thumbnails of subpages</h3>
</header>
<div class="thumbnail-menu thumbnail-menu-align- thumbnail-menu-columns-1">
<div class="thumbnail-menu-item">
<a href="#" target="_blank" title="Page 1" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 1
</h3>
<p class="thumbnail-menu-caption-subtitle">
From above
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_thumbnail_list ### -->
<!-- ### Begin: Element menu_thumbnail_list ### -->
<div id="c241" class="frame frame-default frame-type-menu_thumbnail_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">
2 Columns
</h2>
<h3 class="element-subheader">Thumbnails of subpages</h3>
</header>
<div class="thumbnail-menu thumbnail-menu-align- thumbnail-menu-columns-2">
<div class="thumbnail-menu-item">
<a href="#" target="_blank" title="Page 1" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 1
</h3>
<p class="thumbnail-menu-caption-subtitle">
From above
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 2" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 2
</h3>
<p class="thumbnail-menu-caption-subtitle">
Cheers For The Years
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_thumbnail_list ### -->
<!-- ### Begin: Element menu_thumbnail_list ### -->
<div id="c442" class="frame frame-default frame-type-menu_thumbnail_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">
3 Columns
</h2>
<h3 class="element-subheader">Thumbnails of subpages</h3>
</header>
<div class="thumbnail-menu thumbnail-menu-align- thumbnail-menu-columns-3">
<div class="thumbnail-menu-item">
<a href="#" target="_blank" title="Page 1" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 1
</h3>
<p class="thumbnail-menu-caption-subtitle">
From above
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 2" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 2
</h3>
<p class="thumbnail-menu-caption-subtitle">
Cheers For The Years
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 3" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 3
</h3>
<p class="thumbnail-menu-caption-subtitle">
Photo by Geran de Klerk
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 4" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 4
</h3>
<p class="thumbnail-menu-caption-subtitle">
Bird eye’s view!
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 5" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 5
</h3>
<p class="thumbnail-menu-caption-subtitle">
Photo by Nikita Maru
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 6" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 6
</h3>
<p class="thumbnail-menu-caption-subtitle">
Big Sur Road Trip
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_thumbnail_list ### -->
<!-- ### Begin: Element menu_thumbnail_list ### -->
<div id="c107" class="frame frame-default frame-type-menu_thumbnail_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">
4 Columns
</h2>
<h3 class="element-subheader">Thumbnails of subpages</h3>
</header>
<div class="thumbnail-menu thumbnail-menu-align- thumbnail-menu-columns-4">
<div class="thumbnail-menu-item">
<a href="#" target="_blank" title="Page 1" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 1
</h3>
<p class="thumbnail-menu-caption-subtitle">
From above
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 2" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 2
</h3>
<p class="thumbnail-menu-caption-subtitle">
Cheers For The Years
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 3" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 3
</h3>
<p class="thumbnail-menu-caption-subtitle">
Photo by Geran de Klerk
</p>
</div>
</div>
</a>
</div>
<div class="thumbnail-menu-item">
<a href="#" title="Page 4" class="thumbnail-menu-link" data-toggle="tooltip">
<div class="thumbnail-menu-image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="" alt="" />
</picture>
</div>
<div class="thumbnail-menu-caption">
<div class="thumbnail-menu-caption-inner">
<h3 class="thumbnail-menu-caption-title">
Page 4
</h3>
<p class="thumbnail-menu-caption-subtitle">
Bird eye’s view!
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element menu_thumbnail_list ### -->
{% for variant in variants %}
{% include '@frame-menu-thumbnails' 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": "1 Column",
"subheader": "Thumbnails of subpages",
"maxItems": 1,
"data": {
"pi_flexform": {
"columns": 1
}
}
},
{
"header": "2 Columns",
"subheader": "Thumbnails of subpages",
"maxItems": 2,
"data": {
"pi_flexform": {
"columns": 2
}
}
},
{
"header": "3 Columns",
"subheader": "Thumbnails of subpages",
"data": {
"pi_flexform": {
"columns": 3
}
}
},
{
"header": "4 Columns",
"subheader": "Thumbnails of subpages",
"maxItems": 4,
"data": {
"pi_flexform": {
"columns": 4
}
}
}
]
}
No notes defined.