Opener: Fullwidth Image with Overlay
.organisms-herounit-image-with-overlay
<div class="herounit-homepage herounit-image-with-overlay fullwidth">
<div class="image image--herounit-coverall-with-overlay">
<div class="image__image">
<img src="../../dummy/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
</div>
<div class="image__overlay">
<div class="inner">
<h1 class="title">Pagetitle</h1>
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="aural" for="myInputField">Suchbegriff</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<p class="text">(No patterns found. Show searchslot and title as default fallback.)</p>
</div>
</div>
</div>
</div>
Opener ohne abgedunkelten Hintergrund
Mit der .image
-Klasse .no-darken
kann die Abdunklung des Bildes deaktiviert werden. Bitte genug Kontrast zum Text sicherstellen.
Opener mit Teasern (optional)
Drei optionale Teaser im unteren .tiles
Bereich des Bildes.
<div class="herounit-homepage herounit-image-with-overlay fullwidth">
<div class="image image--herounit-coverall-with-overlay">
<div class="image__image">
<img src="../../dummy/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
</div>
<div class="image__overlay">
<div class="inner">
<h1 class="title">Pagetitle</h1>
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="aural" for="myInputField">Suchbegriff</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField" >
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<p class="text">(No patterns found. Show searchslot and title as default fallback.)</p>
</div>
</div>
</div>
<div class="tiles">
<ul class="flexgrid grid--3">
<li>
<div class="modul-teasertile_buehne" data-add-clickable-area="full" >
<h2 class="title">Teasertile Bühne</h2>
<p class="text">
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
</p>
<span class="action">
<a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a>
</span>
</div>
</li>
<li>
<div class="modul-teasertile_buehne" data-add-clickable-area="full" >
<h2 class="title">Teasertile Bühne</h2>
<p class="text">
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
</p>
<span class="action">
<a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a>
</span>
</div>
</li>
<li>
<div class="modul-teasertile_buehne" data-add-clickable-area="full" >
<h2 class="title">Teasertile Bühne</h2>
<p class="text">
Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
</p>
<span class="action">
<a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a>
</span>
</div>
</li>
</ul>
</div>
</div>