<!-- ### Begin: Element textpic ### -->
<div id="c66" class="frame frame-default frame-type-textpic 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="textpic textpic-left">
<div class="textpic-item textpic-gallery">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="textpic-item textpic-text">
<header class="frame-header">
<h2 class="element-header">
Position: Beside text, left
</h2>
<p class="">
<time datetime="2021-01-29">
January 29, 2021
</time>
</p>
</header>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element textpic ### -->
<!-- ### Begin: Element textpic ### -->
<div id="c906" class="frame frame-default frame-type-textpic 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="textpic textpic-right">
<div class="textpic-item textpic-gallery">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="textpic-item textpic-text">
<header class="frame-header">
<h2 class="element-header">
Position: Beside text, right
</h2>
</header>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element textpic ### -->
<!-- ### Begin: Element textpic ### -->
<div id="c479" class="frame frame-default frame-type-textpic 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="textpic textpic-above">
<div class="textpic-item textpic-gallery">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="textpic-item textpic-text">
<header class="frame-header">
<h2 class="element-header">
Position: Above
</h2>
</header>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element textpic ### -->
<!-- ### Begin: Element textpic ### -->
<div id="c231" class="frame frame-default frame-type-textpic 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="textpic textpic-below">
<div class="textpic-item textpic-gallery">
<div class="gallery-row">
<div class="gallery-item gallery-item-size-1">
<figure class="image">
<picture>
<img loading="lazy" src="holder.js/640x360?auto=yes" width="640" height="360" intrinsicsize="640x360" title="Image Title" alt="Alternative Title" />
</picture>
<figcaption class="caption">
Insert description
</figcaption>
</figure>
</div>
</div>
</div>
<div class="textpic-item textpic-text">
<header class="frame-header">
<h2 class="element-header">
Position: Below
</h2>
</header>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet.
</div>
</div>
</div>
</div>
</div>
<!-- ### End: Element textpic ### -->
{% for variant in variants %}
{% include '@frame-textpic' with variant %}
{% endfor %}
{
"header": "Position: Beside text, left",
"bodytext": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,\nsed diam nonumy eirmod tempor invidunt ut labore et dolore\nmagna aliquyam erat, sed diam voluptua. At vero eos et\naccusam et justo duo dolores et ea rebum. Stet clita kasd\ngubergren, no sea takimata sanctus est Lorem ipsum dolor\nsit amet. Lorem ipsum dolor sit amet, consetetur sadipscing\nelitr, sed diam nonumy eirmod tempor invidunt ut labore et\ndolore magna aliquyam erat, sed diam voluptua. At vero eos\net accusam et justo duo dolores et ea rebum. Stet clita\nkasd gubergren, no sea takimata sanctus est Lorem ipsum\ndolor sit amet.\n",
"image": [
{
"type": "image",
"holder": {
"width": 640,
"height": 360
},
"properties": {
"title": "Image Title",
"alternative": "Alternative Title",
"description": "Insert description"
}
}
],
"imageorient": "left",
"imagecols": 1,
"variants": [
{
"header": "Position: Beside text, left",
"date": "now",
"imageorient": "left"
},
{
"header": "Position: Beside text, right",
"imageorient": "right"
},
{
"header": "Position: Above",
"imageorient": "above"
},
{
"header": "Position: Below",
"imageorient": "below"
}
]
}
No notes defined.