TEASER-COLLECTION-STANDARD (Teaser Module )
src/app/shared/components/teaser-collection-standard/templates
Demo Section
Each variation will be presented in the following section.
Readme
teaserCollectionStandard (component
)
Description
This collection consists of a teaser-premium, the
, the and the<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
</h3>
</div>
<a class="teaser-single__link" href=""
>
</a>
<a href="" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
The collection in two Variants: one with the teaser premium on the left side and one with the teaser-premium on the right side. Both variants can contain 1 or 2 “teaser single standard” (article, events, news etc).
JIRA
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/teaser-collection-standard
Fields
teaser-collection-standard.hbs
Settings
Parameter | Type | Default | Description |
---|---|---|---|
settings.teaserCollectionStandardClasses | String | '' |
Modifier classes for component |
settings.teaserCollectionStandardContextClass | String | 'default' |
Context class of component |
Content
Parameter | Type | Description |
---|---|---|
content.headline | String | Headline from the teaser collection |
content.text | String | The intro text from the teaser collection |
SASS
Variables
Variable | Default | Description |
---|---|---|
$bp-addition | 1100px |
Please add a description |
Modifier Classes
You can add the following modifiers to c-teaser-collection-standard
:
Modifier | Description |
---|---|
is-premium-right | This will set the Premium-Teaser to the right |
You can add the following modifiers to teaser-collection-standard__teaser-third
:
Modifier | Description |
---|---|
is-bg-blue | This will change the background-color from the teaser |
is-bg-dark | This will change the background-color from the teaser |
is-bg-light | This will change the background-color from the teaser |
You can add the following modifiers to teaser-collection-standard__teaser-fourth
:
Modifier | Description |
---|---|
is-bg-blue | This will change the background-color from the teaser |
is-bg-dark | This will change the background-color from the teaser |
is-bg-light | This will change the background-color from the teaser |
Templates
teaser-collection-standard.hbs
<div class="c-teaser-collection-standard{{#if
settings.teaserCollectionStandardContextClass}}--{{settings.teaserCollectionStandardContextClass}}{{else}}--default{{/if}}{{#if
settings.teaserCollectionStandardClasses}} {{settings.teaserCollectionStandardClasses}}{{/if}}"
data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="{{content.id}}">{{content.headline}}</h2>
<p class="teaser-collection-standard__text">{{content.text}}</p>
<div class="teaser-collection-standard__wrapper">
{{#if content.teaserText}}
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
{{#with content.teaserText}}
{{> teaser-text }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserPremium }}
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
{{#with content.teaserPremium}}
{{> teaser-premium }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserThird }}
<div class="teaser-collection-standard__teaser-third{{#if
content.teaserThird.bgBlue}} is-bg-blue{{/if}}{{#if
content.teaserThird.bgDark}} is-bg-dark{{/if}}{{#if
content.teaserThird.bgLight}} is-bg-light{{/if}}">
<div class="teaser-collection-standard__teaser-third-content">
{{#with content.teaserThird}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserFourth }}
<div class="teaser-collection-standard__teaser-fourth{{#if
content.teaserFourth.bgBlue}} is-bg-blue{{/if}}{{#if
content.teaserFourth.bgDark}} is-bg-dark{{/if}}{{#if
content.teaserThird.bgFourth}} is-bg-light{{/if}}">
<div class="teaser-collection-standard__teaser-fourth-content">
{{#with content.teaserFourth}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
</div>
</div>
Data File
teaser-collection-standard.hjson
{
"variations": {
"premiumLeft": {
"docs": {
"variationName": "Premium Teaser left / two additional Teaser"
},
"settings": {
"teaserCollectionStandardContextClass": "default",
"teaserCollectionStandardClasses": false
},
"content": {
"headline": "H2 Werden Sie Teil der LMU München",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
},
{
"content": {
"paragraph": "Far far away, behind the word mountain, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgBlue": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"dates": [
{
"dateDay": "24",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
},
{
"dateDay": "27",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
}
]
}
}
}
},
"premiumLeftVar1": {
"docs": {
"variationName": "Premium Teaser left / one additional Teaser"
},
"settings": {
"teaserCollectionStandardContextClass": "default",
"teaserCollectionStandardClasses": false
},
"content": {
"headline": "H2 Werden Sie Teil der LMU München",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserThird": {
"docs": {
"variationName": "Social Instagram",
"onBG": "blue"
},
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": "is-image"
},
"content": {
"headline": "@lmu.muenchen",
"headlineClasses": "is-instagram",
"headlineAddInfo": "Instagram",
"linkHref": "#",
"linkText": "Weiterlesen",
"figure": {
"settings": {
"figureId": false,
"figureContextClass": "teaser-single",
"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/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:768px)"
},
{
"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: 767px)"
}
]
}
}
}
}
}
}
}
},
"premiumRight": {
"docs": {
"variationName": "Premium Teaser right"
},
"settings": {
"teaserCollectionStandardContextClass": "default",
"teaserCollectionStandardClasses": "is-premium-right"
},
"content": {
"headline": "H2 Werden Sie Teil der LMU München",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "360 Grad Campus Tour",
"linkHref": "#",
"linkClasses": "is-video",
"linkText": "Video ansehen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"premiumRightVar1": {
"docs": {
"variationName": "Premium Teaser right"
},
"settings": {
"teaserCollectionStandardContextClass": "default",
"teaserCollectionStandardClasses": "is-premium-right"
},
"content": {
"headline": "H2 Werden Sie Teil der LMU München",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"premiumLeftRTE": {
"docs": {
"variationName": "Detailseite (RTE): Premium Teaser left / Studiengangsdetailseite 4 Teaser"
},
"settings": {
"teaserCollectionStandardContextClass": "rte",
"teaserCollectionStandardClasses": false
},
"content": {
"headline": "H2 Detailseite (RTE): Premium Teaser left (premiumLeftRTE) / Studiengangsdetailseite 4 Teaser",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
},
{
"content": {
"paragraph": "Far far away, behind the word mountain, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"premiumLeftshortRTE": {
"docs": {
"variationName": "Detailseite (RTE): Premium Teaser left / Studiengangsdetailseite 3 Teaser"
},
"settings": {
"teaserCollectionStandardContextClass": "rte",
"teaserCollectionStandardClasses": false
},
"content": {
"headline": "H2 Detailseite (RTE): Premium Teaser left (premiumLeftRTE) / Studiengangsdetailseite 3 Teaser",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
},
{
"content": {
"paragraph": "Far far away, behind the word mountain, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"premiumLeftVar1RTE": {
"docs": {
"variationName": "Detailseite (RTE): Premium Teaser left / one additional Teaser"
},
"settings": {
"teaserCollectionStandardContextClass": "rte",
"teaserCollectionStandardClasses": false
},
"content": {
"headline": "H2 Detailseite (RTE): Premium Teaser left / one additional Teaser",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses":"is-external",
"linkText": "Weiterlesen"
}
}
}
},
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses":"is-external",
"linkText": "Weiterlesen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses":"is-external",
"linkText": "Weiterlesen"
}
}
}
},
"premiumRightVar1RTE": {
"docs": {
"variationName": "Detailseite (RTE): Premium Teaser right"
},
"settings": {
"teaserCollectionStandardContextClass": "rte",
"teaserCollectionStandardClasses": "is-premium-right"
},
"content": {
"headline": "H2 Detailseite (RTE): Premium Teaser right (premiumRightVar1RTE)",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"premiumRightRTE": {
"docs": {
"variationName": "Detailseite (RTE): Premium Teaser right"
},
"settings": {
"teaserCollectionStandardContextClass": "rte",
"teaserCollectionStandardClasses": "is-premium-right"
},
"content": {
"headline": "H2 Detailseite (RTE): Premium Teaser right",
"text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.",
"teaserText": {
"settings": {
"teaserTextContextClass": "default",
"teaserTextClasses": false
},
"content": {
"headline": "H3 An der LMU studieren",
"text": [
{
"content": {
"paragraph": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
}
}
],
"items": [
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Stellenangebote",
"linkClasses": "is-external",
"linkHref": "#",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "info@lmu.de",
"linkClasses": "is-mail",
"linkHref": "mailto:test@test.de",
"linkTarget": ""
}
},
{
"settings": {},
"content": {
"linkText": "Unsere Studiengänge",
"linkClasses": "",
"linkHref": "#",
"linkTarget": ""
}
}
]
}
},
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgGreen": true
},
"content": {
"picture": {
"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"
}
]
}
]
}
},
"singleTeaser": {
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
},
"teaserThird": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
},
"teaserFourth": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": true
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkClasses": "is-external",
"linkText": "Weiterlesen"
}
}
}
}
}
}
Styles
teaser-collection-standard.scss
/* ===================================================
component: teaser-collection-standard
=================================================== */
$bp-addition: 1100px;
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-teaser-collection-standard"] {
position: relative;
clear: both;
overflow: hidden;
margin-bottom: 60px;
@include bp($bp-mobile-p) {
margin-bottom: 80px;
}
@include bp($bp-tablet-p) {
margin-bottom: 100px;
margin-top: 0;
}
@include bp($bp-desktop-l) {
display: block;
}
@include bp(1920px) {
margin-bottom: 120px;
}
/*
MODIFIER
----------------------- */
&.is-premium-right {
.teaser-collection-standard__text-teaser {
@include bp($bp-tablet-p) {
@include grid-box(8);
@include grid-magnet(0, left, true);
}
@include bp($bp-tablet-l) {
@include grid-box(8);
@include grid-magnet(0, left, true);
}
@include bp($bp-addition) {
@include grid-box(6);
@include grid-magnet(0, left, true);
}
}
.teaser-collection-standard__premium {
@include bp($bp-tablet-p) {
@include grid-box(8);
@include grid-magnet(4, left, false);
}
@include bp($bp-tablet-l) {
@include grid-box(8);
@include grid-magnet(4, left, false);
}
@include bp($bp-addition) {
@include grid-box(6);
@include grid-magnet(6, left, false);
}
}
.teaser-collection-standard__teaser-third {
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, left, false);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, left, false);
}
@include bp($bp-addition) {
@include grid-box(3);
@include grid-magnet(3, left, false);
}
}
.teaser-collection-standard__teaser-fourth {
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(8, left, false, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(8, left, false, true);
}
@include bp($bp-addition) {
@include grid-box(3);
@include grid-magnet(6, left, false, true);
}
}
}
.teaser-collection-standard__headline {
@include headline-h2-styles();
font-family: $font-bold;
color: $color-dark;
font-weight: 700;
}
.teaser-collection-standard__text {
font-family: $font-regular;
font-size: 1.5rem;
line-height: (22/15);
letter-spacing: .25px;
color: $color-dark;
margin-bottom: 25px;
@include bp($bp-addition) {
font-size: 1.6rem;
line-height: (24/16);
margin-bottom: 30px;
}
}
.teaser-collection-standard__right {
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
@include bp($bp-tablet-p) {
display: block;
}
}
.teaser-collection-standard__wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@include bp($bp-tablet-p) {
display: block;
flex-direction: column;
}
}
/*
TEXT TEASER
----------------------- */
.teaser-collection-standard__text-teaser {
@include grid-column(12);
position: relative;
display: flex;
order: 2;
@include bp($bp-tablet-p) {
@include grid-box(8);
@include grid-magnet(4, left, false);
@include grid-magnet(8, top, false);
}
@include bp($bp-tablet-l) {
@include grid-box(8);
@include grid-magnet(4, left, false);
@include grid-magnet(8, top, false);
}
@include bp($bp-addition) {
@include grid-box(6);
@include grid-magnet(6, left, false);
@include grid-magnet(3, top, false);
}
}
.teaser-collection-standard__text-teaser-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
@include print() {
border: 1px solid $color-gray-border;
}
}
/*
PREMIUM TEASER
----------------------- */
.teaser-collection-standard__premium {
@include grid-column(12);
position: relative;
display: flex;
order: 1;
@include bp($bp-tablet-p) {
@include grid-box(8);
@include grid-magnet(16, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(8);
@include grid-magnet(16, top, true);
}
@include bp($bp-addition) {
@include grid-box(6);
@include grid-magnet(9, top, true);
}
}
.teaser-collection-standard__premium-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
/*
TEASER THIRD
----------------------- */
.teaser-collection-standard__teaser-third {
@include grid-column(12);
position: relative;
order: 3;
border-top: 1px solid $color-white;
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(12, top, true);
@include grid-magnet(8, left, false);
border-top: none;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(12, top, true);
@include grid-magnet(8, left, false);
border-top: none;
}
@include bp($bp-addition) {
@include grid-box(3);
@include grid-magnet(9, top, true);
@include grid-magnet(6, left, false);
border-top: none;
}
}
.teaser-collection-standard__teaser-third-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
/*
TEASER FOURTH
----------------------- */
.teaser-collection-standard__teaser-fourth {
@include grid-column(12);
position: relative;
order: 4;
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, left, false, true);
@include grid-magnet(8, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, left, false, true);
@include grid-magnet(8, top, true);
}
@include bp($bp-addition) {
@include grid-box(3);
@include grid-magnet(3, left, false, true);
@include grid-magnet(3, top, true);
}
}
.teaser-collection-standard__teaser-fourth-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
}
.c-teaser-collection-standard--rte > p {
@include rte-dimensions();
@include content-p-styles();
}
.c-teaser-collection-standard--rte {
margin-top: 50px;
margin-bottom: 60px;
.teaser-collection-standard__wrapper {
h3, .teaser-text__list, .teaser-text__text > ul, .teaser-text__text > ol {
width: calc(100%);
margin-left: 0;
flex: 0 0 100%;
}
.teaser-text__list-item {
padding-left: 0;
&::before {
display: none;
}
}
}
}
HTML Output
Premium Teaser left / two additional Teaser
<div class="c-teaser-collection-standard--default" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Werden Sie Teil der LMU München</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>Far far away, behind the word mountain, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-blue">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__dates">
<div class="teaser-single__date">
<span aria-label="24" class="teaser-single__date-day">24</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
<div class="teaser-single__date is-connector">
<abbr aria-label="bis" title="bis" class="teaser-single__date-connect">—</abbr>
</div>
<div class="teaser-single__date">
<span aria-label="27" class="teaser-single__date-day">27</span>
<abbr aria-label="Januar" title="Januar" class="teaser-single__date-month">Jan</abbr>
</div>
</div>
<h3 class="teaser-single__headline">
Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Premium Teaser left / one additional Teaser
<div class="c-teaser-collection-standard--default" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Werden Sie Teil der LMU München</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p></p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default is-image" data-css="c-teaser-single">
<div class="teaser-single__instagram-area">
<div class="teaser-single__image-section">
<figure class="c-figure--teaser-single" 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:768px)" />
<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: 767px)" />
<!--[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 class="teaser-single__text-section">
<h3 class="teaser-single__headline is-instagram">
<span class="is-aural">Instagram</span>@lmu.muenchen
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</div>
</article>
</div>
</div>
</div>
</div>
Premium Teaser right
<div class="c-teaser-collection-standard--default is-premium-right" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Werden Sie Teil der LMU München</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
360 Grad Campus Tour
</h3>
</div>
<a class="teaser-single__link is-video" href="#">
Video ansehen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Premium Teaser right
<div class="c-teaser-collection-standard--default is-premium-right" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Werden Sie Teil der LMU München</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Detailseite (RTE): Premium Teaser left / Studiengangsdetailseite 4 Teaser
<div class="c-teaser-collection-standard--rte" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Detailseite (RTE): Premium Teaser left (premiumLeftRTE) / Studiengangsdetailseite 4 Teaser</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>Far far away, behind the word mountain, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Detailseite (RTE): Premium Teaser left / Studiengangsdetailseite 3 Teaser
<div class="c-teaser-collection-standard--rte" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Detailseite (RTE): Premium Teaser left (premiumLeftRTE) / Studiengangsdetailseite 3 Teaser</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>Far far away, behind the word mountain, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Detailseite (RTE): Premium Teaser left / one additional Teaser
<div class="c-teaser-collection-standard--rte" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Detailseite (RTE): Premium Teaser left / one additional Teaser</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p></p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Detailseite (RTE): Premium Teaser right
<div class="c-teaser-collection-standard--rte is-premium-right" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Detailseite (RTE): Premium Teaser right (premiumRightVar1RTE)</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
Detailseite (RTE): Premium Teaser right
<div class="c-teaser-collection-standard--rte is-premium-right" data-css="c-teaser-collection-standard">
<h2 class="teaser-collection-standard__headline" id="">H2 Detailseite (RTE): Premium Teaser right</h2>
<p class="teaser-collection-standard__text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.</p>
<div class="teaser-collection-standard__wrapper">
<div class="teaser-collection-standard__text-teaser is-bg-light">
<div class="teaser-collection-standard__text-teaser-content">
<div class="c-teaser-text--default" data-css="c-teaser-text">
<h3 class="teaser-text__headline">H3 An der LMU studieren</h3>
<div class="teaser-text__text">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<ul class="teaser-text__list">
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link is-external">Unsere Stellenangebote</a>
</li>
<li class="teaser-text__list-item">
<a href="mailto:test@test.de" class="teaser-text__list-link is-mail">info@lmu.de</a>
</li>
<li class="teaser-text__list-item">
<a href="#" class="teaser-text__list-link">Unsere Studiengänge</a>
</li>
</ul>
</div>
</div>
</div>
<div class="teaser-collection-standard__premium">
<div class="teaser-collection-standard__premium-content">
<div class="c-teaser-premium--default" data-css="c-teaser-premium">
<div class="teaser-premium__image-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 " />
<!--[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>
<div class="teaser-premium__box is-bg-green">
<div class="teaser-premium__box-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="teaser-collection-standard__teaser-third is-bg-dark">
<div class="teaser-collection-standard__teaser-third-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
<div class="teaser-collection-standard__teaser-fourth is-bg-dark">
<div class="teaser-collection-standard__teaser-fourth-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<h3 class="teaser-single__headline">
Der LMU Studien-Informations-Service
</h3>
</div>
<a class="teaser-single__link is-external" href="#" target="_blank" title="Link öffnet im neuen Fenster">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" target="_blank" title="Link öffnet im neuen Fenster" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>