Left @text-image
<div class="text-image">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-60ea-label">
<div class="figure__media" data-gallery="lightbox-e4df">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="335" src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" height="335" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>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.</p>
</div>
</div>
</div>{
"figure": {
"image": {
"width": 500,
"height": 335
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np 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.\n"
}
}
Right @text-image--right
<div class="text-image text-image--right">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-419f-label">
<div class="figure__media" data-gallery="lightbox-5efe">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="335" src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" height="335" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>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.</p>
</div>
</div>
</div>{
"figure": {
"image": {
"width": 500,
"height": 335
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np 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.\n"
},
"right": true
}
Plain @text-image--plain
<div class="text-image text-image--plain">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-a7b3-label">
<div class="figure__media" data-gallery="lightbox-d45e">
<div class="image loading" style="padding-top: 67%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="335" src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/500x335/F5F5F5/28281a.png?text=500x335" width="500" height="335" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Ich bin eine Zwischenheadline</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. <br /><strong><a class="link link--external" href="#"> Zum Projekt</a></strong></p>
</div>
</div>
</div>{
"figure": {
"image": {
"width": 500,
"height": 335
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Ich bin eine Zwischenheadline',\n level: 3,\n})\np Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna. #[br]#[strong #[a(class='link link--external', href=\"#\") Zum Projekt]]\n"
},
"plain": true
}
Details @text-image--details
<div class="text-image text-image--details">
<div class="text-image__figure">
<figure class="figure" aria-labelledby="figure-dd01-label">
<div class="figure__media" data-gallery="lightbox-e9de">
<div class="image loading" style="padding-top: 70%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="350" src="/images/c4f/details-01-500x350.jpg" width="500" /></noscript><img class="image__img js-lazyload" data-src="/images/c4f/details-01-500x350.jpg" width="500" height="350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--5">Consetetur sadipscing:</h3>
<p>Lorem ipsum dolor sit amet</p>
<h3 class="headline headline--5">Lorem ipsum dolor:</h3>
<p>Diam voluptua</p>
<h3 class="headline headline--5">At vero eos:</h3>
<p>Lorem ipsum dolor <br />Consetetur sadipscing <br />Magna aliquyam erat</p>
<h3 class="headline headline--5">Lorem ipsum dolor:</h3>
<p>Diam voluptua</p>
</div>
</div>
</div>{
"figure": {
"image": {
"width": 500,
"height": 350,
"src": "/images/c4f/details-01-500x350.jpg"
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-5', {\n text: 'Consetetur sadipscing:',\n level: 3,\n})\np Lorem ipsum dolor sit amet\n+include('@headline--headline-5', {\n text: 'Lorem ipsum dolor:',\n level: 3,\n})\np Diam voluptua\n+include('@headline--headline-5', {\n text: 'At vero eos:',\n level: 3,\n})\np Lorem ipsum dolor
Consetetur sadipscing
Magna aliquyam erat\n+include('@headline--headline-5', {\n text: 'Lorem ipsum dolor:',\n level: 3,\n})\np Diam voluptua\n"
},
"details": true
}
Details Headline @text-image--details-headline
<div class="text-image text-image--details">
<div class="text-image__figure">
<div class="text-image__headline">01.05. - 14.05.</div>
<div class="text-image__text">17.00 Uhr</div>
<figure class="figure" aria-labelledby="figure-8893-label">
<div class="figure__media" data-gallery="lightbox-a8be">
<div class="image loading" style="padding-top: 70%;"><noscript><img class="image__fallback" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." height="350" src="/images/c4f/details-01-500x350.jpg" width="500" /></noscript><img class="image__img js-lazyload" data-src="/images/c4f/details-01-500x350.jpg" width="500" height="350" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
</div>
</figure>
</div>
<div class="text-image__content">
<div class="text">
<h3 class="headline headline--3">Veranstaltungsort:</h3>
<p>Name<br />Straße, Hausnummer<br />PLZ, Ort</p>
<h3 class="headline headline--3">Veranstalter:</h3>
<p>Name des Veranstalters<br /><a class="link link--external" href="#" rel="noopener noreferrer" target="_blank">Zur Website</a></p>
<h3 class="headline headline--3">Kontakt:</h3>
<p>Name<br />E-Mail <br />Telefonnummer</p>
</div>
</div>
</div>{
"figure": {
"image": {
"width": 500,
"height": 350,
"src": "/images/c4f/details-01-500x350.jpg"
},
"caption": null
},
"text": {
"content": "+include('@headline--headline-3', {\n text: 'Veranstaltungsort:',\n level: 3,\n})\np Name
Straße, Hausnummer
PLZ, Ort\n+include('@headline--headline-3', {\n text: 'Veranstalter:',\n level: 3,\n})\np Name des Veranstalters
\n +include('@link--external', {\n text: 'Zur Website',\n })\n\n+include('@headline--headline-3', {\n text: 'Kontakt:',\n level: 3,\n})\np Name
E-Mail
Telefonnummer\n"
},
"headline": {
"headline": "01.05. - 14.05.",
"text": "17.00 Uhr"
},
"details": true
}