Stage (article) @stage-article
Default @stage-article
<!-- Default -->
<div class="stage-article stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert"
}
Grün @stage-article--green
<!-- Grün -->
<div class="stage-article t-green stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "green"
}
Blau @stage-article--blue
<!-- Blau -->
<div class="stage-article t-blue stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "blue"
}
Rot @stage-article--red
<!-- Rot -->
<div class="stage-article t-red stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "red"
}
Türkis @stage-article--turquoise
<!-- Türkis -->
<div class="stage-article t-turquoise stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "turquoise"
}
Dunkelblau (Invertiert) @stage-article--blue-dark-inverted
<!-- Dunkelblau (Invertiert) -->
<div class="stage-article t-blue-dark-inverted stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "blue-dark-inverted"
}
Blau (Invertiert) @stage-article--blue-inverted
<!-- Blau (Invertiert) -->
<div class="stage-article t-blue-inverted stage-article--image">
<div class="stage-article__inner">
<picture class="picture">
<source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
<source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
<source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
<source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
<source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Lorem ipsum dolor sit<br />Lorem ipsum dolor</h2><br />
<p class="stage-article__text">In jeder Lebenslage richtig versichert</p>
</div>
</div>
</div>
</div>{
"image": "picture--sources",
"headline": {
"level": 2,
"text": "Lorem ipsum dolor sit#[br]Lorem ipsum dolor"
},
"text": "In jeder Lebenslage richtig versichert",
"theme": "blue-inverted"
}
Figure @stage-article--figure
<!-- Figure -->
<div class="stage-article stage-article--figure">
<div class="stage-article__inner">
<div class="stage-article__content">
<div class="stage-article__headline-wrapper">
<h2 class="stage-article__headline">Terminvereinbarung</h2><br />
<p class="stage-article__text">Buchen Sie einen Beratungstermin vor Ort</p>
</div>
<figure class="stage-article__figure"><img class="stage-article__figure-image" src="/images/pencil.svg" alt="Figure" /></figure>
</div>
</div>
</div>{
"image": null,
"headline": {
"level": 2,
"text": "Terminvereinbarung"
},
"text": "Buchen Sie einen Beratungstermin vor Ort",
"figure": "/images/pencil.svg"
}