<!-- ### Begin: Element texticon ### -->
<div id="c433" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size- texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Default - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c872" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-right">
<div class="texticon-icon texticon-size- texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Right - Default - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c538" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-top">
<div class="texticon-icon texticon-size- texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Top - Default - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c772" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size- texticon-type-square">
<span class="texticon-inner-icon" style="fill:#fff; background-color:#333;">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Square - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c936" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size- texticon-type-circle">
<span class="texticon-inner-icon" style="fill:#fff; background-color:#333;">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Circle - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c719" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size-medium texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Default - Medium
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c290" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size-large texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Default - Large
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c532" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size-awesome texticon-type-">
<span class="texticon-inner-icon">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Default - Awesome
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
<!-- ### Begin: Element texticon ### -->
<div id="c909" class="frame frame-default frame-type-texticon 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">
<div class="texticon texticon-left">
<div class="texticon-icon texticon-size- texticon-type-circle">
<span class="texticon-inner-icon" style="fill:#ff0000; background-color:#33ccff;">
<svg height="32px" width="32px">
<use href="../../common/img/svg/symbolSprite.svg#social-instagram-26x26"></use>
</svg>
</span>
</div>
<div class="texticon-content">
<header class="frame-header">
<h2 class="element-header">
Text and Icon - Left - Default - Default
</h2>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget
quam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est
sem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus
id arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat
tincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element texticon ### -->
{% for variant in variants %}
{% include '@frame-text-and-icon' with variant %}
{% endfor %}
{
"icon": "social-instagram-26x26",
"height": "32px",
"width": "32px",
"icon_background": null,
"icon_color": null,
"icon_position": "left",
"icon_size": null,
"icon_type": null,
"header": "Text and Icon",
"bodytext": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi odio, lacinia ac rutrum vitae, consequat eget\nquam. Curabitur ornare ipsum fringilla quam cursus, at condimentum sapien commodo. Mauris ac sagittis neque. Ut est\nsem, venenatis eget velit vitae, pellentesque vehicula nunc. Aliquam risus magna, rutrum vel pharetra eget, luctus\nid arcu. Cras vitae nunc pulvinar, tristique ipsum vitae, elementum magna. Praesent blandit ante ac placerat\ntincidunt. Vestibulum et elit arcu. Mauris sit amet libero non risus feugiat mattis vitae ac metus.</p>\n",
"variants": [
{
"header": "Text and Icon - Left - Default - Default"
},
{
"header": "Text and Icon - Right - Default - Default",
"icon_position": "right"
},
{
"header": "Text and Icon - Top - Default - Default",
"icon_position": "top"
},
{
"header": "Text and Icon - Left - Square - Default",
"icon_background": "#333",
"icon_color": "#fff",
"icon_type": "square"
},
{
"header": "Text and Icon - Left - Circle - Default",
"icon_background": "#333",
"icon_color": "#fff",
"icon_type": "circle"
},
{
"header": "Text and Icon - Left - Default - Medium",
"icon_size": "medium"
},
{
"header": "Text and Icon - Left - Default - Large",
"icon_size": "large"
},
{
"header": "Text and Icon - Left - Default - Awesome",
"icon_size": "awesome"
},
{
"header": "Text and Icon - Left - Default - Default",
"icon_background": "#33ccff",
"icon_color": "#ff0000",
"icon_type": "circle"
}
]
}
No notes defined.