RELATED-CONTENT (Standard Module )
src/app/shared/components/related-content/templates
Demo Section
Each variation will be presented in the following section.
Readme
related-content (component)
Description
This Module consists in two variants:
- Premium variant:
teaser-premiumand two or three of theteaser-single - Simple variant: three or four of the
teaser-single
JIRA
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/related-content
Fields
related-content.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.relatedContentClasses | String | '' |
Modifier classes for component |
| settings.relatedContentContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.headline | String | Headline for the related content |
| content.text | String | Intro text for the related content |
SASS
Modifier Classes
There are modifier classes you can add to c-related-content:
| Modifier | Description |
|---|---|
| is-simple-panel | For the simple panel |
| is-full-width | Remove max-width from nested grid-row |
There are modifier classes you can add to related-content__teaser-first, related-content__teaser-second, related-content__teaser-third, related-content__teaser-fourth:
| Modifier | Description |
|---|---|
| is-bg-blue | This will change the background-color of the teaser |
| is-bg-dark | This will change the background-color of the teaser |
| is-bg-light | This will change the background-color of the teaser |
Templates
related-content.hbs
<div class="c-related-content{{#if settings.relatedContentContextClass}}--{{settings.relatedContentContextClass}}{{else}}--default{{/if}}{{#if settings.relatedContentClasses}} {{settings.relatedContentClasses}}{{/if}}"
data-css="c-related-content">
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<h3 class="related-content__headline">{{content.headline}}</h3>
<div class="related-content__wrapper">
{{#if content.teaserPremium }}
<div class="related-content__premium">
<div class="related-content__premium-content">
{{#with content.teaserPremium}}
{{> teaser-premium }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserFirst }}
<div class="related-content__teaser-first{{#if content.teaserFirst.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserFirst.bgGreen}} is-bg-green{{/if}}{{#if content.teaserFirst.bgDark}} is-bg-dark{{/if}}{{#if content.teaserFirst.bgLight}} is-bg-light{{/if}}">
<div class="related-content__teaser-first-content">
{{#with content.teaserFirst}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserSecond }}
<div class="related-content__teaser-second{{#if content.teaserSecond.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserSecond.bgGreen}} is-bg-green{{/if}}{{#if content.teaserSecond.bgDark}} is-bg-dark{{/if}}{{#if content.teaserSecond.bgLight}} is-bg-light{{/if}}">
<div class="related-content__teaser-second-content">
{{#with content.teaserSecond}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserThird }}
<div class="related-content__teaser-third{{#if content.teaserThird.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserThird.bgGreen}} is-bg-green{{/if}}{{#if content.teaserThird.bgDark}} is-bg-dark{{/if}}{{#if content.teaserThird.bgLight}} is-bg-light{{/if}}">
<div class="related-content__teaser-third-content">
{{#with content.teaserThird}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
{{#if content.teaserFourth }}
<div class="related-content__teaser-fourth{{#if content.teaserFourth.bgBlue}} is-bg-blue{{/if}}{{#if content.teaserFourth.bgGreen}} is-bg-green{{/if}}{{#if content.teaserFourth.bgDark}} is-bg-dark{{/if}}{{#if content.teaserFourth.bgLight}} is-bg-light{{/if}}">
<div class="related-content__teaser-fourth-content">
{{#with content.teaserFourth}}
{{> teaser-single }}
{{/with}}
</div>
</div>
{{/if}}
{{/wrapWith}}
{{/wrapWith}}
</div>
</div>
Data File
related-content.hjson
{
"variations": {
"simplePanel": {
"docs": {
"variationName": "Simple Panel with 4 Teaser"
},
"settings": {
"relatedContentContextClass": "default",
"relatedContentClasses": "is-simple-panel"
},
"content": {
"headline": "Verwandte Inhalte (Einfach, mit 4 Teasern)",
"teaserFirst": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
},
"teaserSecond": {
"bgLight": true,
"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": "Lorem ipsum dolor sit amet dolor sit amt consecteteur",
"linkHref": "#",
"linkText": "Weiterlesen",
"linkClasses": "is-external"
}
},
"teaserFourth": {
"bgLight": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false
},
"content": {
"headline": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"simplePanelVar1": {
"docs": {
"variationName": "Simple Panel with 3 Teaser"
},
"settings": {
"relatedContentContextClass": "default",
"relatedContentClasses": "is-simple-panel"
},
"content": {
"headline": "Verwandte Inhalte (Einfach, mit drei Teasern)",
"teaserFirst": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Wissenschaft Macht Politik: Die Münchener Räterepublik",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"newstitle": "News"
}
},
"teaserSecond": {
"bgLight": true,
"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": "Der LMU Studien-Informations-Service",
"linkHref": "#",
"linkText": "Weiterlesen"
}
}
}
},
"premiumPanel": {
"docs": {
"variationName": "Premium Panel"
},
"settings": {
"relatedContentContextClass": "default",
"relatedContentClasses": false
},
"content": {
"headline": "Verwandte Inhalte (Premium)",
"teaserPremium": {
"settings": {
"teaserPremiumContextClass": "default",
"teaserPremiumClasses": false,
"bgDark": 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"
}
}
}
},
"teaserFirst": {
"bgDark": true,
"settings": {
"teaserSingleContextClass": "default",
"teaserSingleClasses": false,
"linkExternal": false
},
"content": {
"headline": "Wissenschaft Macht Politik: Die Münchener Räterepublik",
"headlineClasses": "is-news",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"newstitle": "News"
}
},
"teaserThird": {
"bgLight": 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",
"headlineClasses": "is-event",
"type": "Event",
"linkHref": "#",
"linkText": "Weiterlesen",
"dates": [
{
"dateDay": "24",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
},
{
"dateDay": "27",
"dateMonth": "Januar",
"dateMonthAbbr": "Jan"
}
]
}
}
}
}
}
}
Styles
related-content.scss
/* ===================================================
component: teaser-collection-standard
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-related-content"] {
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;
}
@include print() {
display: none;
}
.is-visible & {
@include print() {
display: block;
}
}
/*
MODIFIER
----------------------- */
&.is-full-width {
.grid__row {
max-width: none;
}
}
&.is-simple-panel {
.related-content__teaser-first {
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, top, false);
margin-bottom: 0;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
}
}
.related-content__teaser-second {
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
}
.related-content__teaser-third {
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, left, false);
@include grid-magnet(0, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, left, false);
@include grid-magnet(0, top, true);
}
}
.related-content__teaser-fourth {
@include grid-column(12);
position: relative;
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
}
}
.related-content__teaser-fourth-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
}
.related-content__headline {
@include headline-h2-styles();
font-family: $font-bold;
color: $color-dark;
font-weight: 700;
}
.related-content__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-tablet-p) {
font-size: 1.5rem;
line-height: (22/15);
margin-bottom: 25px;
}
@include bp($bp-desktop-m) {
font-size: 1.6rem;
line-height: (24/16);
margin-bottom: 30px;
}
@include bp($bp-desktop-l) {
font-size: 1.6rem;
line-height: (24/16);
}
}
.related-content__right {
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
@include bp($bp-tablet-p) {
display: block;
}
}
.related-content__wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@include bp($bp-tablet-p) {
display: block;
}
}
.related-content__premium-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
.related-content__teaser-first-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
.related-content__teaser-second-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
.related-content__teaser-third-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
.related-content__teaser-fourth-content {
position: relative;
width: 100%;
@include bp($bp-tablet-p) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-related-content--default {
/*
PREMIUM TEASER
----------------------- */
.related-content__premium {
@include grid-column(12);
position: relative;
display: flex;
order: 1;
@include bp($bp-tablet-p) {
@include grid-box(8);
}
@include bp($bp-tablet-l) {
@include grid-box(8);
}
@include bp(1100px) {
@include grid-box(6);
}
}
/*
TEASER FIRST
----------------------- */
.related-content__teaser-first {
@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(4, top, false);
border-top: none;
margin-bottom: .05px;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(4, top, false);
border-top: none;
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
border-top: none;
}
}
/*
TEASER SECOND
----------------------- */
.related-content__teaser-second {
@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(0, top, false);
@include grid-magnet(0, left, true);
border-top: none;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, false);
border-top: none;
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, true);
border-top: none;
}
}
/*
TEASER THIRD
----------------------- */
.related-content__teaser-third {
@include grid-column(12);
position: relative;
order: 4;
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(4, left, false);
@include grid-magnet(0, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(4, left, false);
@include grid-magnet(0, top, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(6, left, false);
@include grid-magnet(3, top, true);
}
}
/*
TEASER FOURTH
----------------------- */
.related-content__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);
@include grid-magnet(0, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, left, false);
@include grid-magnet(0, top, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(9, left, false);
@include grid-magnet(3, top, true);
}
}
}
/* ---------------------------------------------------
Context: Newsroom
--------------------------------------------------- */
.c-related-content--inverted {
/*
PREMIUM TEASER
----------------------- */
.related-content__premium {
@include grid-column(12);
position: relative;
display: flex;
order: 1;
@include bp($bp-tablet-p) {
@include grid-box(8);
float: right;
}
@include bp($bp-tablet-l) {
@include grid-box(8);
float: right;
}
@include bp(1100px) {
@include grid-box(6);
float: right;
}
}
/*
TEASER FIRST
----------------------- */
.related-content__teaser-first {
@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(4, top, false);
border-top: none;
margin-bottom: .05px;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(4, top, false);
border-top: none;
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, top, false);
@include grid-magnet(3, left, false);
border-top: none;
}
}
/*
TEASER SECOND
----------------------- */
.related-content__teaser-second {
@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(0, top, false);
@include grid-magnet(0, left, true);
border-top: none;
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, top, false);
@include grid-magnet(0, left, false);
border-top: none;
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(3, top, false);
@include grid-magnet(0, left, false);
border-top: none;
}
}
/*
TEASER THIRD
----------------------- */
.related-content__teaser-third {
@include grid-column(12);
position: relative;
order: 4;
@include bp($bp-tablet-p) {
@include grid-box(4);
@include grid-magnet(4, left, true);
@include grid-magnet(8, top, false);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(4, left, true);
@include grid-magnet(8, top, false);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, left, false);
@include grid-magnet(0, top, true);
}
}
/*
TEASER FOURTH
----------------------- */
.related-content__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);
@include grid-magnet(0, top, true);
}
@include bp($bp-tablet-l) {
@include grid-box(4);
@include grid-magnet(0, left, false);
@include grid-magnet(0, top, true);
}
@include bp(1100px) {
@include grid-box(3);
@include grid-magnet(0, left, true);
@include grid-magnet(0, top, false);
}
}
}
HTML Output
Simple Panel with 4 Teaser
<div class="c-related-content--default is-simple-panel" data-css="c-related-content">
<div class="grid__container">
<div class="grid__row">
<h3 class="related-content__headline">Verwandte Inhalte (Einfach, mit 4 Teasern)</h3>
<div class="related-content__wrapper">
<div class="related-content__teaser-first is-bg-dark">
<div class="related-content__teaser-first-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="related-content__teaser-second is-bg-light">
<div class="related-content__teaser-second-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="related-content__teaser-third is-bg-dark">
<div class="related-content__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">
Lorem ipsum dolor sit amet dolor sit amt consecteteur
</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="related-content__teaser-fourth is-bg-light">
<div class="related-content__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="#">
Weiterlesen
</a>
<a href="#" class="teaser-single__a11y-clickarea" aria-hidden="true" tabindex="-1">
</a>
</article>
</div>
</div>
</div>
</div>
</div>
</div>Simple Panel with 3 Teaser
<div class="c-related-content--default is-simple-panel" data-css="c-related-content">
<div class="grid__container">
<div class="grid__row">
<h3 class="related-content__headline">Verwandte Inhalte (Einfach, mit drei Teasern)</h3>
<div class="related-content__wrapper">
<div class="related-content__teaser-first is-bg-dark">
<div class="related-content__teaser-first-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__news">
<div class="teaser-single__news-text">News</div>
</div>
<h3 class="teaser-single__headline">
Wissenschaft Macht Politik: Die Münchener Räterepublik
</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="related-content__teaser-second is-bg-light">
<div class="related-content__teaser-second-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="related-content__teaser-third is-bg-dark">
<div class="related-content__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>
</div>
</div>Premium Panel
<div class="c-related-content--default" data-css="c-related-content">
<div class="grid__container">
<div class="grid__row">
<h3 class="related-content__headline">Verwandte Inhalte (Premium)</h3>
<div class="related-content__wrapper">
<div class="related-content__premium">
<div class="related-content__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-dark">
<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="related-content__teaser-first is-bg-dark">
<div class="related-content__teaser-first-content">
<article class="c-teaser-single--default" data-css="c-teaser-single">
<div class="teaser-single__text-section">
<div class="teaser-single__news">
<div class="teaser-single__news-text">News</div>
</div>
<h3 class="teaser-single__headline is-news">
Wissenschaft Macht Politik: Die Münchener Räterepublik
</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="related-content__teaser-third is-bg-light">
<div class="related-content__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="related-content__teaser-fourth is-bg-dark">
<div class="related-content__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 is-event">
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>
</div>
</div>