TEASER-DOUBLE (Standard Module )
src/app/shared/components/teaser-double/templates
Demo Section
Each variation will be presented in the following section.
Readme
teaser-double (component)
Description
This module serves as the template for a double-teaser. It contains an image, a headline, a descriptive text, a link and an optional video icon. The image ca be positioned to the left or right side.
JIRA
Requirements
- @veams/component-figure - Figure component in Veams.
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/teaser-double
Fields
teaser-double.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.teaserDoubleClasses | String | '' |
Modifier classes for component |
| settings.teaserDoubleContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.figure | Object | Data for embedded figure component |
| content.headline | String | Headline |
| content.text | String | Text |
| content.linkExternal | Boolean | If set to true the clickarea link will get a target blank attribute |
SASS
Modifier Classes
You can add the following modifiers to teaser-double:
| Modifier | Description |
|---|---|
| is-right | Will set the image to the right side |
| is-external | Will set an external icon before the link text |
| is-full-width | Remove max-width from nested grid-row |
Templates
teaser-double.hbs
<div class="c-teaser-double{{#if
settings.teaserDoubleContextClass}}--{{settings.teaserDoubleContextClass}}{{else}}--default{{/if}}{{#if
settings.teaserDoubleClasses}} {{settings.teaserDoubleClasses}}{{/if}}"
data-css="c-teaser-double"
data-js-module="teaser-double"{{#if settings.teaserDoubleJsOptions}}
data-js-options='{{stringify settings.teaserDoubleJsOptions}}'{{/if}}>
<div class="teaser-double__wrapper">
{{#if content.figure}}
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
{{#with content.figure}}
{{> figure}}
{{/with}}
</div>
</div>
{{/if}}
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
{{content.headline}}
</h3>
<p class="teaser-double__text">{{{content.text}}}</p>
<a class="teaser-double__link{{#if content.linkExternal}} is-external{{/if}}{{#if
content.linkClasses}} {{content.linkClasses}}{{/if}}"{{#if content.linkExternal}}
target="_blank"{{/if}} href="{{content.linkHref}}">{{content.linkText}}</a>
</div>
</div>
<a href="{{content.linkHref}}" class="teaser-double__a11y-clickarea"{{#if content.linkExternal}}
target="_blank"{{/if}} aria-hidden="true" tabindex="-1"></a>
</div>
</div>
Data File
teaser-double.hjson
{
"title": "Teaser",
"variations": {
"default": {
"docs": {
"variationName": "Default: Text Right Image left"
},
"settings": {
"teaserDoubleContextClass": "default",
"teaserDoubleClasses": false
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/300x300",
"imageWidth": "300w"
},
{
"src": "https://placehold.co/600x600",
"imageWidth": "600w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
}
],
"media": "(min-width:767px)",
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
]
},
{
"srcset": [
{
"src": "https://placehold.co/600x300",
"imageWidth": "600w"
},
{
"src": "https://placehold.co/1200x600",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/2400x1200",
"imageWidth": "2400w"
}
],
"media": "(max-width: 768px)",
"sizes": [
{
"screenWidth": "",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
}
}
},
"video": {
"docs": {
"variationName": "Default: Text Right Image left"
},
"settings": {
"teaserDoubleContextClass": "default",
"teaserDoubleClasses": false
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePlay": true,
"figurePlayText": "Video abspielen",
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
},
"imageRight": {
"docs": {
"variationName": "Text left Image right"
},
"settings": {
"teaserDoubleContextClass": "default",
"teaserDoubleClasses": "is-right"
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x23",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
},
"rtedefault": {
"docs": {
"variationName": "RTE Detailseite: Text Right Image left"
},
"settings": {
"teaserDoubleContextClass": "rte",
"teaserDoubleClasses": false
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/300x300",
"imageWidth": "300w"
},
{
"src": "https://placehold.co/600x600",
"imageWidth": "600w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
}
],
"media": "(min-width:767px)",
"sizes": [
{
"screenWidth": "(min-width: 1440px)",
"imageWidth": "617px"
},
{
"screenWidth": "",
"imageWidth": "50vw"
}
]
},
{
"srcset": [
{
"src": "https://placehold.co/600x300",
"imageWidth": "600w"
},
{
"src": "https://placehold.co/1200x600",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/2400x1200",
"imageWidth": "2400w"
}
],
"media": "(max-width: 768px)",
"sizes": [
{
"screenWidth": "",
"imageWidth": "calc(100vw - ((100vw / 14) * 2))"
}
]
}
]
}
}
}
}
}
},
"rtevideo": {
"docs": {
"variationName": "RTE Detailseite VIDEO: Text Right Image left"
},
"settings": {
"teaserDoubleContextClass": "rte",
"teaserDoubleClasses": false
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePlay": true,
"figurePlayText": "Video abspielen",
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x40",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
},
"rteimageRight": {
"docs": {
"variationName": "RTE Detailseite: Text left Image right"
},
"settings": {
"teaserDoubleContextClass": "rte",
"teaserDoubleClasses": "is-right"
},
"content": {
"headline": "Welcome to our internationals",
"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-double",
"figureJsModule": true
},
"content": {
"figurePicture": {
"settings": {
"pictureContextClass": "animated-objects",
"pictureClasses": false,
"lazyload": true,
"autoSizes": true
},
"content": {
"fallbackSrc": "https://placehold.co/40x23",
"alt": "Alternative text that describes the image",
"items": [
{
"srcset": [
{
"src": "https://placehold.co/400x400",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x800",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x1200",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x1600",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x2000",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x2400",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x2800",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x3200",
"imageWidth": "3200w"
}
],
"media": "(min-width:767px)"
},
{
"srcset": [
{
"src": "https://placehold.co/400x225",
"imageWidth": "400w"
},
{
"src": "https://placehold.co/800x450",
"imageWidth": "800w"
},
{
"src": "https://placehold.co/1200x675",
"imageWidth": "1200w"
},
{
"src": "https://placehold.co/1600x900",
"imageWidth": "1600w"
},
{
"src": "https://placehold.co/2000x1125",
"imageWidth": "2000w"
},
{
"src": "https://placehold.co/2400x1350",
"imageWidth": "2400w"
},
{
"src": "https://placehold.co/2800x1575",
"imageWidth": "2800w"
},
{
"src": "https://placehold.co/3200x1800",
"imageWidth": "3200w"
}
],
"media": "(max-width: 768px)"
}
]
}
}
}
}
}
}
}
}
Styles
teaser-double.scss
/* ===================================================
component: teaser-double
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-double"] {
/*
MODIFIERS
----------------------- */
&.is-right {
.teaser-double__image-section-wrapper {
order: 2;
}
.teaser-double__text-section-wrapper {
order: 1;
}
}
&.is-full-width {
margin-bottom: 50px;
.grid__row {
max-width: none;
}
}
.teaser-double__wrapper {
position: relative;
margin-bottom: 60px;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
display: flex;
justify-content: flex-start;
margin-bottom: 100px;
}
@include bp(1920px) {
margin-bottom: 120px;
}
&:hover,
&.a11y-focus-key {
.teaser-double__link {
color: $color-dark;
&::before {
@include pseudo();
@include sprites-icon-arrow-black();
transform: translateX(5px);
}
&.is-external {
&::before {
@include sprites-icon-externalarrow-black();
}
}
&.is-download {
&::before {
@include sprites-icon-download-black();
}
}
}
.figure__play-icon {
&::before {
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
opacity: 1;
transition: opacity $animation-duration-std $animation-easing-std;
}
}
}
}
.teaser-double__link {
position: relative;
font-family: $font-bold;
text-decoration: none;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .28px;
color: $color-green;
padding-left: 30px;
transition: color $animation-duration-std $animation-easing-std;
overflow: hidden;
text-overflow: ellipsis;
@include print() {
text-decoration: underline !important;
padding-left: 0px !important;
}
&::before {
@include pseudo();
@include sprites-icon-arrow-green100();
position: absolute;
top: 2px;
left: 0;
transition: transform $animation-duration-std $animation-easing-std;
@include print() {
display: none !important;
}
}
&.is-external {
&::before {
@include sprites-icon-externalarrow-green100();
}
}
&.is-download {
&::before {
@include sprites-icon-download-green100();
}
}
@include bp($bp-desktop-m) {
font-size: 1.6rem;
line-height: (15/16);
letter-spacing: 0;
}
}
.teaser-double__image-section-wrapper {
@include grid-column-width(12);
display: block;
@include bp($bp-tablet-p) {
@include grid-column-width(6);
display: flex;
order: 1;
}
@include print() {
width: 25%;
}
}
.teaser-double__image-section {
width: 100%;
}
.teaser-double__text-section-wrapper {
@include grid-column-width(12);
display: block;
padding: 20px 0;
position: relative;
@include bp($bp-tablet-p) {
@include grid-column-width(6);
padding: 0 20px;
display: flex;
order: 2;
}
}
.teaser-double__text-section {
@include bp($bp-tablet-p) {
@include centering(v);
position: absolute;
left: 0;
padding: 40px;
}
}
.teaser-double__headline {
@include headline-h1-styles();
}
.teaser-double__text {
font-family: $font-light;
font-size: 1.8rem;
line-height: (24/18);
letter-spacing: 0;
color: $color-dark;
margin-bottom: 20px;
@include bp($bp-desktop-m) {
font-size: 2.2rem;
line-height: (32/22);
letter-spacing: .2px;
color: $color-dark;
margin-bottom: 35px;
}
}
.teaser-double__a11y-clickarea {
@include clickarea();
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-teaser-double--default {
}
.c-teaser-double--rte {
.teaser-double__wrapper {
margin-bottom: 60px;
h3 {
width: calc(100%);
margin-left: 0;
flex: 0 0 100%;
}
}
.c-figure--teaser-double {
width: 100%;
flex: 0 0 100%;
margin-left: 0;
}
}
HTML Output
Default: Text Right Image left
<div class="c-teaser-double--default" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/300x300 300w ,
https://placehold.co/600x600 600w ,
https://placehold.co/1200x1200 1200w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/600x300 600w ,
https://placehold.co/1200x600 1200w ,
https://placehold.co/2400x1200 2400w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>Default: Text Right Image left
<div class="c-teaser-double--default" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
<span class="figure__play-icon"><span class="figure__play-text">Video abspielen</span></span>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>Text left Image right
<div class="c-teaser-double--default is-right" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x23" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>RTE Detailseite: Text Right Image left
<div class="c-teaser-double--rte" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/300x300 300w ,
https://placehold.co/600x600 600w ,
https://placehold.co/1200x1200 1200w " sizes="
(min-width: 1440px) 617px
, 50vw " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/600x300 600w ,
https://placehold.co/1200x600 1200w ,
https://placehold.co/2400x1200 2400w " sizes="
calc(100vw - ((100vw / 14) * 2)) " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>RTE Detailseite VIDEO: Text Right Image left
<div class="c-teaser-double--rte" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
<span class="figure__play-icon"><span class="figure__play-text">Video abspielen</span></span>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>RTE Detailseite: Text left Image right
<div class="c-teaser-double--rte is-right" data-css="c-teaser-double" data-js-module="teaser-double">
<div class="teaser-double__wrapper">
<div class="teaser-double__image-section-wrapper">
<div class="teaser-double__image-section">
<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
<div class="figure__wrapper">
<picture class="c-picture--animated-objects
lazyload" data-css="c-picture">
<!--[if IE 9]><audio><![endif]-->
<source data-srcset="
https://placehold.co/400x400 400w ,
https://placehold.co/800x800 800w ,
https://placehold.co/1200x1200 1200w ,
https://placehold.co/1600x1600 1600w ,
https://placehold.co/2000x2000 2000w ,
https://placehold.co/2400x2400 2400w ,
https://placehold.co/2800x2800 2800w ,
https://placehold.co/3200x3200 3200w " media=" (min-width:767px)" />
<source data-srcset="
https://placehold.co/400x225 400w ,
https://placehold.co/800x450 800w ,
https://placehold.co/1200x675 1200w ,
https://placehold.co/1600x900 1600w ,
https://placehold.co/2000x1125 2000w ,
https://placehold.co/2400x1350 2400w ,
https://placehold.co/2800x1575 2800w ,
https://placehold.co/3200x1800 3200w " media=" (max-width: 768px)" />
<!--[if IE 9]></audio><![endif]-->
<img class="
picture__image lazyload" src="https://placehold.co/40x23" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
</picture>
</div>
</figure>
</div>
</div>
<div class="teaser-double__text-section-wrapper">
<div class="teaser-double__text-section">
<h3 class="teaser-double__headline">
Welcome to our internationals
</h3>
<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
<a class="teaser-double__link" href="#">Weiterlesen</a>
</div>
</div>
<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
</div>
</div>