<!-- ### Begin: Element card-group ### -->
<div id="c460" class="frame frame-default frame-type-card-group 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-group-element card-group-element-align- card-group-element-columns-2">
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element card-group ### -->
<!-- ### Begin: Element card-group ### -->
<div id="c583" class="frame frame-default frame-type-card-group 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-group-element card-group-element-align- card-group-element-columns-3">
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element card-group ### -->
<!-- ### Begin: Element card-group ### -->
<div id="c785" class="frame frame-default frame-type-card-group 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-group-element card-group-element-align- card-group-element-columns-4">
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
<div class="card-group-element-item">
<div class="card">
<div class="card-img-top">
<a href="#">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
</a>
</div>
<div class="card-body">
<h3 class="card-title">
<a href="#"> Card title
</a>
</h3>
<h4 class="card-subtitle">Card subtitle</h4>
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
<div class="card-footer">
<a href="#" class="btn btn-default" title="Go somewhere">
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Outline_Icons">
<g>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z"></path>
<line fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="7.875" y1="12.526" x2="11.4" y2="16.056"></line>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689"></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354"></path>
</g>
</g>
<g id="invisible_shape">
<rect fill="none" width="24" height="24"></rect>
</g>
</svg>
</span>
<span class="btn-text">
Go somewhere
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element card-group ### -->
{% for variant in variants %}
{% include '@frame-card-group' with variant %}
{% endfor %}
{
"pi_flexform": {
"align": "left",
"columns": 2,
"icon_position": null
},
"records": [
{
"header": "Card title",
"subheader": "Card subtitle",
"bodytext": "Some quick example text to build on the card title and make up the bulk of the card's content.\n",
"image": [
{
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title"
}
}
],
"link": "#",
"link_target": null,
"link_title": "Go somewhere",
"link_class": "default",
"linkIcon": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\"><g id=\"Outline_Icons\"><g><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z\"></path><line fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\"7.875\" y1=\"12.526\" x2=\"11.4\" y2=\"16.056\"></line><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354\"></path></g></g><g id=\"invisible_shape\"><rect fill=\"none\" width=\"24\" height=\"24\"></rect></g></svg>"
]
},
{
"header": "Card title",
"subheader": "Card subtitle",
"bodytext": "Some quick example text to build on the card title and make up the bulk of the card's content.\n",
"image": [
{
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title"
}
}
],
"link": "#",
"link_target": null,
"link_title": "Go somewhere",
"link_class": "default",
"linkIcon": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\"><g id=\"Outline_Icons\"><g><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z\"></path><line fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\"7.875\" y1=\"12.526\" x2=\"11.4\" y2=\"16.056\"></line><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354\"></path></g></g><g id=\"invisible_shape\"><rect fill=\"none\" width=\"24\" height=\"24\"></rect></g></svg>"
]
},
{
"header": "Card title",
"subheader": "Card subtitle",
"bodytext": "Some quick example text to build on the card title and make up the bulk of the card's content.\n",
"image": [
{
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title"
}
}
],
"link": "#",
"link_target": null,
"link_title": "Go somewhere",
"link_class": "default",
"linkIcon": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\"><g id=\"Outline_Icons\"><g><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z\"></path><line fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\"7.875\" y1=\"12.526\" x2=\"11.4\" y2=\"16.056\"></line><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354\"></path></g></g><g id=\"invisible_shape\"><rect fill=\"none\" width=\"24\" height=\"24\"></rect></g></svg>"
]
},
{
"header": "Card title",
"subheader": "Card subtitle",
"bodytext": "Some quick example text to build on the card title and make up the bulk of the card's content.\n",
"image": [
{
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title"
}
}
],
"link": "#",
"link_target": null,
"link_title": "Go somewhere",
"link_class": "default",
"linkIcon": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" x=\"0px\" y=\"0px\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\" enable-background=\"new 0 0 24 24\" xml:space=\"preserve\"><g id=\"Outline_Icons\"><g><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M6.464,13.949 c0,0,10.945-10.975,11.653-11.682C19.177,1.207,23.42,0.5,23.42,0.5s-0.707,4.242-1.769,5.303 C20.238,7.217,9.984,17.47,9.984,17.47L6.464,13.949z\"></path><line fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\"7.875\" y1=\"12.526\" x2=\"11.4\" y2=\"16.056\"></line><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M15.288,12.168 c0,0.707,0,3.534-0.354,4.595c-0.224,0.672-0.93,1.637-1.415,2.122c-1.393,1.393-3.535,3.535-3.535,3.535l0.655-5.605\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M11.752,8.632 c-0.706,0-3.565-0.03-4.625,0.323c-0.671,0.225-1.608,0.96-2.092,1.444C3.641,11.793,1.5,13.935,1.5,13.935l5.641-0.689\"></path><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" d=\"M7.863,17.47 c0.708,0.707,0.413,1.709-0.354,2.476c-0.976,0.976-5.657,2.136-5.657,2.136s1.146-4.695,2.122-5.672 c0.777-0.776,1.769-1.061,2.476-0.354\"></path></g></g><g id=\"invisible_shape\"><rect fill=\"none\" width=\"24\" height=\"24\"></rect></g></svg>"
]
}
],
"variants": [
{
"header": "Cards in 2 columns",
"pi_flexform": {
"columns": 2
},
"maxItems": 2
},
{
"header": "Cards in 3 columns",
"pi_flexform": {
"columns": 3
},
"maxItems": 3
},
{
"header": "Cards in 4 columns",
"pi_flexform": {
"columns": 4
}
}
]
}
No notes defined.