Stage @stage
Default @stage
<!-- Default -->
<!-- Add class .stage -->
<div class="stage stage--hasimage stage--hasheadline" id="stage">
<div class="stage__spacer">
<picture>
<source class="lazy" media="(min-width:1600px)" sizes="100vw" srcset="https://placehold.co/1920x768 1920w" />
<source class="lazy" sizes="100vw" srcset="https://placehold.co/1200x1200 480w" /><img class="lazy lazy--loaded" src="https://placehold.co/1920x768" width="1920" height="768" alt="Junges Paar umarmt sich in der Abendsonne" title="Vorsorge" data-da-img="true" data-da-id="23" data-da-next="24" data-da-prev="22" data-da-focused="false" /></picture>
<div class="stage__titlewrapper">
<h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
<div class="subheadline-h1 text-center">Vorsorge</div>
</div>
<div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
<path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
</svg></div>
</div>
</div>
Without gradient @stage--without-gradient
<!-- Without gradient -->
<!-- Add class .stage -->
<!-- Modifier class: stage--no-gradient -->
<div class="stage stage--hasimage stage--hasheadline stage--no-gradient" id="stage">
<div class="stage__spacer">
<picture>
<source class="lazy" media="(min-width:1600px)" sizes="100vw" srcset="https://placehold.co/1920x768 1920w" />
<source class="lazy" sizes="100vw" srcset="https://placehold.co/1200x1200 480w" /><img class="lazy lazy--loaded" src="https://placehold.co/1920x768" width="1920" height="768" alt="Junges Paar umarmt sich in der Abendsonne" title="Vorsorge" data-da-img="true" data-da-id="23" data-da-next="24" data-da-prev="22" data-da-focused="false" /></picture>
<div class="stage__titlewrapper">
<h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
<div class="subheadline-h1 text-center">Vorsorge</div>
</div>
<div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
<path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
</svg></div>
</div>
</div>{
"noGradient": true
}
Without gradient and image @stage--without-gradient-and-image
<!-- Without gradient and image -->
<!-- Add class .stage -->
<!-- Modifier class: stage--no-gradient -->
<!-- For stage without imgage, remove picture-tag -->
<div class="stage stage--hasimage stage--hasheadline stage--no-gradient" id="stage">
<div class="stage__spacer">
<div class="stage__titlewrapper">
<h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
<div class="subheadline-h1 text-center">Vorsorge</div>
</div>
<div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
<path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
</svg></div>
</div>
</div>{
"noGradient": true,
"noImage": true
}
Search @stage--search
<!-- Search -->
<!-- Add class .stage -->
<div class="stage stage--hasicon stage--hasheadline">
<div class="stage__spacer">
<div class="stage__titlewrapper">
<h1 class="text-center h2 mb-4">
<div class="header__svg">
<div class="header__svg-spacer header__svg-spacer--smile icon-animation icon-animation--smile"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 74.39 84.87">
<path class="lighten" d="M38.77 71.24A35.62 35.62 0 103.16 35.62a35.62 35.62 0 0035.61 35.62"></path>
<path class="darken" d="M18.77 84.87l1.9-1.75a38.11 38.11 0 006.42-8.28A36.88 36.88 0 1173.78 39.3a36.87 36.87 0 01-35.95 36.86c-5.92 8.12-16 8.59-16.48 8.61zM36.89 4.31a35 35 0 00-8.16 69l1.19.29-.57 1.08a41.25 41.25 0 01-5.46 7.84c3.32-.68 9-2.58 12.67-7.83l.28-.4h.48a35 35 0 00-.43-70zm0 50.24A16.94 16.94 0 0120 37.63h1.89a15 15 0 0030.05 0h1.86a16.94 16.94 0 01-16.91 16.92zM42 35h-1.9v-7.17H42zm-8.32 0h-1.9v-7.17h1.89z"></path>
</svg></div>
</div>Ihre Suche
</h1>
<div class="container">
<div class="row">
<div class="col-12">
<div class="search-bar" data-source="/data/search-bar.json">
<div class="search-bar__inner">
<form class="search-bar__form" autocomplete="off" method="get" action="/suchergebnisse" _lpchecked="1"><label class="search-bar__input-label" for="search-term">Suchbegriff</label><input class="search-bar__input" autocomplete="off" type="text" placeholder="Suchbegriff" required="required" name="tx_solr[q]" />
<div class="search-bar__buttons-right"><button class="search-bar__reset" type="reset" value="Zurücksetzen" aria-hidden="true"></button><button class="search-bar__button" type="submit" value="Suchen"></button></div>
</form>
<div class="search-bar__suggestions" aria-hidden="true">
<div class="search-bar__suggestions-inner">
<div class="search-bar__list-title">Oft gesucht</div>
<div class="search-bar__list"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73">
<path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
</svg></div>
</div>
</div>{
"variant": "search"
}