Integer tincidunt
Landingpage Heroes
Hero Layout 1
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/845 768w" media="(max-width: 768px)">
<source srcset="https://picsum.photos/992/558 992w" media="(max-width: 992px)">
<img class="hero-img img-max"
src="https://picsum.photos/1920/1080"
width="1920" height="1080"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Integer tincidunt</div>
<h1 class="headline">
<a href="#">Nullam dictum felis eu pede mollis pretium. </a>
</h1>
</header>
</div>
</div>
</div>
</div>
</article>
</section>Hero Layout 2
<section class="section section-type-hero-teaser section-layout-2 ">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6">
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/768 768w"
media="(max-width: 768px)">
<img class="hero-img img-max"
src="https://picsum.photos/768/384"
width="768" height="384"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Nam eget dui</div>
<h2 class="headline">
<a href="#">Tellus eget condimentum rhoncus</a>
</h2>
</header>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
<div class="col-md-6">
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/768 768w"
media="(max-width: 768px)">
<img class="hero-img img-max"
src="https://picsum.photos/768/384"
width="768" height="384"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Etiam rhoncus</div>
<h2 class="headline">
<a href="#">Sem quam semper libero</a>
</h2>
</header>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
</div>
</div>
</section>Hero Layout 3
<section class="section section-type-hero-teaser section-layout-3 ">
<div class="container">
<div class="row no-gutters">
<div class="col-md-4">
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/769 768w"
media="(max-width: 768px)">
<img class="hero-img img-max"
src="https://picsum.photos/768/577"
width="768" height="577"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Sed consequat</div>
<h2 class="headline">
<a href="#">Donec sodales sagittis magna</a>
</h2>
</header>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
<div class="col-md-4">
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/769 768w"
media="(max-width: 768px)">
<img class="hero-img img-max"
src="https://picsum.photos/768/577"
width="768" height="576"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Scelerisque ut</div>
<h2 class="headline">
<a href="#">Fusce vulputate eleifend sapien</a>
</h2>
</header>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
<div class="col-md-4">
<section class="section section-type-hero section-text-white section-layout-normal space-inner-before-none space-inner-after-none">
<article class="hero">
<div class="hero-img-container">
<picture>
<source srcset="https://picsum.photos/768/769 768w"
media="(max-width: 768px)">
<img class="hero-img img-max"
src="https://picsum.photos/768/577"
width="768" height="576"
alt="" title="" >
</picture>
</div>
<div class="hero-img-gradient bg-gradient-dark is-root"></div>
<div class="hero-text">
<div class="row no-gutters align-items-end">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="hero-text-inner">
<div class="hero-bar bar bar-primary bg-primary-gradient"></div>
<header>
<div class="kicker kicker-lead">Lorem in dui. </div>
<h2 class="headline">Cras ultricies mi eu turpis</h2>
</header>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
</div>
</div>
</section>Alle Elemente Kombiniert
Integer tincidunt