<!-- ### Begin: Element ### -->
<div id="c370" class="frame frame-default 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">
Icon Group
</h2>
</header>
<div class="icongroup icongroup-align- icongroup-columns- icongroup-iconposition-">
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-facebook-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Pellentesque habitant morbi</span>
</h4>
<p class="icongroup-item-text-subheader">Vestibulum dapibus nunc ac augue</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Vestibulum fringilla pede</span>
</h4>
<p class="icongroup-item-text-subheader">Proin faucibus arcu quis ante</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-linkedin-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Morbi nec metus</span>
</h4>
<p class="icongroup-item-text-subheader">Pellentesque habitant morbi tristique senectus</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-xing-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Fusce vulputate eleifend</span>
</h4>
<p class="icongroup-item-text-subheader">Fusce risus nisl viverra et</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element ### -->
<!-- ### Begin: Element ### -->
<div id="c145" class="frame frame-default frame-layout-0 frame-background-primary frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="icongroup icongroup-align- icongroup-columns- icongroup-iconposition-">
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-facebook-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Pellentesque habitant morbi</span>
</h4>
<p class="icongroup-item-text-subheader">Vestibulum dapibus nunc ac augue</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Vestibulum fringilla pede</span>
</h4>
<p class="icongroup-item-text-subheader">Proin faucibus arcu quis ante</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-linkedin-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Morbi nec metus</span>
</h4>
<p class="icongroup-item-text-subheader">Pellentesque habitant morbi tristique senectus</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-xing-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Fusce vulputate eleifend</span>
</h4>
<p class="icongroup-item-text-subheader">Fusce risus nisl viverra et</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element ### -->
<!-- ### Begin: Element ### -->
<div id="c265" class="frame frame-default frame-layout-0 frame-background-dark frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<div class="icongroup icongroup-align- icongroup-columns- icongroup-iconposition-">
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-facebook-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Pellentesque habitant morbi</span>
</h4>
<p class="icongroup-item-text-subheader">Vestibulum dapibus nunc ac augue</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Vestibulum fringilla pede</span>
</h4>
<p class="icongroup-item-text-subheader">Proin faucibus arcu quis ante</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-linkedin-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Morbi nec metus</span>
</h4>
<p class="icongroup-item-text-subheader">Pellentesque habitant morbi tristique senectus</p>
</div>
</div>
<div class="icongroup-item">
<div class="icongroup-item-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-xing-26x26"></use>
</svg>
</div>
<div class="icongroup-item-text">
<h4 class="icongroup-item-text-header">
<span>Fusce vulputate eleifend</span>
</h4>
<p class="icongroup-item-text-subheader">Fusce risus nisl viverra et</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element ### -->
{% for variant in variants %}
{% include '@frame-icon-group' with variant %}
{% endfor %}
{
"pi_flexform": {
"align": "left",
"columns": 2,
"icon_position": null
},
"records": [
{
"header": "Pellentesque habitant morbi",
"subheader": "Vestibulum dapibus nunc ac augue",
"icon": "social-facebook-26x26",
"height": "32px",
"width": "32px"
},
{
"header": "Vestibulum fringilla pede",
"subheader": "Proin faucibus arcu quis ante",
"icon": "social-instagram-26x26",
"height": "32px",
"width": "32px"
},
{
"header": "Morbi nec metus",
"subheader": "Pellentesque habitant morbi tristique senectus",
"icon": "social-linkedin-26x26",
"height": "32px",
"width": "32px"
},
{
"header": "Fusce vulputate eleifend",
"subheader": "Fusce risus nisl viverra et",
"icon": "social-xing-26x26",
"height": "32px",
"width": "32px"
}
],
"variants": [
{
"header": "Icon Group"
},
{
"background_color_class": "primary"
},
{
"background_color_class": "dark"
}
]
}
No notes defined.