Demo Section

Each variation will be presented in the following section.

Default

Radio Buttons

Zeige

News
Events
Alle

Hidden offset field

Hidden limit field

Alternative text that describes the image

Welcome to our internationals

Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores

Readme

filterableList (`component`)

Description

This component renders a list of diferent category types (events, news,…) from data (JSON) requested from a server. It has a filter form and a “load more” button.

JIRA

Requirements

@veams/core - Veams Core Framework.
@veams/query or jquery - Veams Query or jQuery.
@veams/component - Veams Component.
@veams/component-form - Form component in Veams.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/filterable-list

Fields

`filterable-list.hbs`

Settings

Parameter	Type	Default	Description
settings.filterableListClasses	String	`''`	Modifier classes for component
settings.filterableListContextClass	String	`'default'`	Context class of component
settings.filterableListJsOptions	Object	`null`	JavaScript options object which gets stringified

Content

Parameter	Type	Description
content.filterForm	Object	Data for form filter
content.initialContentInverted	Object	Data for related contents teaser-collection inverted
content.initialContentNormal	Object	Data for related contents teaser-collection
content.initialContentTeaserDouble	Object	Data for teaser-double teaser-collection

`filterable-list__list-item.hbs`

Content

Parameter	Type	Description
category	String	Type of list item (for modifier classes)
categoryHeadline	String	Type-headline of list item (visible)
image	Object	Data for the picture
date	String	Written out date in format dd.mm.yyyy
dateDetails	Array	Array of dates containing maximum two items (from date to date)
dateDetails.dateDay	String	Day in dd format
dateDetails.dateMonth	String	Month in mm format
dateDetails.dateMonthAbbr	String	Abbriviation of the month e.g. Apr for April
dateDetails.dateMonthFull	String	Written out month name e.g. April
dateDetails.dateYear	String	Year in yyyy format
link	Object	Data for the link
link.href	String	Location the link points to
link.text	String	Visible link text
link.info	String	Additional info about the link for accessibility (size, format etc.)
description	String	Description of the list item
time	String	Time of the event (e.g. 10:00 - 20:15)
timeUnit	String	Unit added to the time
address	String	Address line of event (location)
categoryAddition	String	Additional info for this category
videoInfo	String	Info about the video
deadlineLabel	String	Deadline label for job offer
deadline	String	Deadline for job offer
infoline	String	Infoline for person/expert
topicLabel	String	Label for topics list of expert
topics	Array	Array of n-items
topics.text	String	Topic title

`filterable-list__load-more-btn.hbs`

Parameter	Type	Description
loadMoreLabel	String	Type of list item (for modifier classes)

`filterable-list__results-info.hbs`

Parameter	Type	Description
totalItemCount	String	Total number of items
resultsText	String	Text to show along with item count

JavaScript Options

The module gives you the possibility to override default JS options:

Option	Type	Default	Description
classes.loading	String	`'is-loading'`	Loading class
classes.showAll	String	`'is-show-all'`	Show more button class set after first click
classes.visible	String	`'is-visible'`	Visibility class
i18n.loadMore	String	`'Load more'`	Fallback label for “load more” button
i18n.noResultsText	String	`'No results'`	Fallback text for no results
i18n.resultsText	String	`'results'`	Fallback text for results
i18n.showAll	String	`'Show all'`	Fallback text for “show all” button
limit	Number	`10`	Number of items fetched by “load more” button
selectors.filterForm	String	`'[data-js-item="filterable-list-filter-form"]'`	Element selector for filter form
selectors.header	String	`'[data-js-item="header"]'`	Element selector for header
selectors.initialWrapperHidden	String	`'[data-js-item="filterable-list-init-wrapper-hidden"]'`	Element selector hidden initial wrappers
selectors.limit	String	`'[data-js-item="filterable-list-limit"]'`	Element selector for hidden input containing value for limit
selectors.list	String	`'[data-js-item="filterable-list-list"]'`	Element selector for list
selectors.loadMoreBtn	String	`'[data-js-item="filterable-list-load-more-btn"]'`	Element selector for load more button
selectors.offset	String	`'[data-js-item="filterable-list-offset"]'`	Element selector for hidden input containing offset value
selectors.radioAll	String	`'[data-js-item="filterable-list-radio-all"]'`	Element selector for radio “all”
selectors.renderTarget	String	`'[data-js-item="filterable-list-render-target"]'`	Element selector for render target
selectors.resultsInfo	String	`'[data-js-item="filterable-list-results-info"]'`	Element selector for results info
selectors.showMoreBtn	String	`'[data-js-item="filterable-list-show-more-btn"]'`	Element selector for show more button
selectors.showMoreBtnLabel	String	`'[data-js-item="filterable-list-show-more-btn-label"]'`	Element selector for show more button label
templates.list	String	`'FILTERABLELIST__LIST'`	Name of list template
templates.listItem	String	`'FILTERABLELIST__LISTITEM'`	Name of list item template
templates.loadMoreBtn	String	`'FILTERABLELIST__LOADMOREBTN'`	Name of “load more” button template
templates.resultsInfo	String	`'FILTERABLELIST__RESULTSINFO'`	Name of results info template

SASS

Modifier Classes

There are modifier classes you can add to filterable-list__initial-wrapper:

Modifier	Description
is-visible	Show initial wrapper

There are modifier classes you can add to filterable-list__list-item:

Modifier	Description
is-expert	Expert style for list item (e.g. icons)
is-video	Video style for list item (e.g. icons)
is-publication	Publication style for list item (e.g. icons)
is-download	Download style for list item (e.g. icons)
is-person	Person style for list item (e.g. icons)
is-news	News style for list item (e.g. icons)
is-events	Event style for list item (e.g. icons)
is-subject	Study subject style for list item (e.g. icons)
is-job	Job style for list item (e.g. icons)
is-gallery	Gallery style for list item (e.g. icons)
is-loading	Effect when adding new list items

There are modifier classes you can add to filterable-list__list-item-link:

There are modifier classes you can add to filterable-list__list-init-show-more:

Modifier	Description
is-show-all	Remove plus-icon from button

Templates

filterable-list.hbs

<div class="c-filterable-list{{#if
		settings.filterableListContextClass}}--{{settings.filterableListContextClass}}{{else}}--default{{/if}}{{#if
		settings.filterableListClasses}} {{settings.filterableListClasses}}{{/if}}" data-css="c-filterable-list"
	data-js-module="filterable-list" {{#if settings.filterableListJsOptions}}
	data-js-options='{{stringify settings.filterableListJsOptions}}' {{/if}}>

	{{#wrapWith "grid__container"}}
	{{#wrapWith "grid__row"}}
	{{#with content.filterForm}}
	{{#wrapWith "form" settings=settings}}
	{{#each content.fieldsets}}
	{{> form__fieldset}}
	{{/each}}

	<span class="filterable-list__load-init-loader">
		<span class="filterable-list__load-init-loader-box is-one"></span>
		<span class="filterable-list__load-init-loader-box is-two"></span>
		<span class="filterable-list__load-init-loader-box is-three"></span>
	</span>

	<div class="filterable-list__list-wrapper" data-js-item="filterable-list-render-target">
		<div class="filterable-list__initial-wrapper is-visible">
			{{#with @root.filterable-list.variations.default.content.initialContentNormal }}
			{{> related-content }}
			{{/with}}

			{{#with @root.filterable-list.variations.default.content.initialContentInverted  }}
			{{> related-content }}
			{{/with}}

			{{#wrapWith "grid__container"}}
				{{#wrapWith "grid__row"}}
					{{#with @root.filterable-list.variations.default.content.initialContentTeaserDouble }}
					{{> teaser-double }}
					{{/with}}
				{{/wrapWith}}
			{{/wrapWith}}

			{{#with @root.filterable-list.variations.default.content.initialContentNormal  }}
			{{> related-content }}
			{{/with}}
		</div>
		<div id="unique-id-56442" class="filterable-list__initial-wrapper"
			data-js-item="filterable-list-init-wrapper-hidden" aria-hidden="true" tabindex="-1">
			{{#with @root.filterable-list.variations.default.content.initialContentInverted  }}
			{{> related-content }}
			{{/with}}

			{{#with @root.filterable-list.variations.default.content.initialContentNormal  }}
			{{> related-content }}
			{{/with}}

			{{#with @root.filterable-list.variations.default.content.initialContentInverted }}
			{{> related-content }}
			{{/with}}

			{{#with @root.filterable-list.variations.default.content.initialContentNormal }}
			{{> related-content }}
			{{/with}}
		</div>
		<div class="filterable-list__list-init-show-more-wrapper">
			<button type="button" class="filterable-list__list-init-show-more"
				data-js-item="filterable-list-show-more-btn" aria-expanded="false" aria-controls="unique-id-56442">
				<span class="filterable-list__list-init-show-more-text"
					data-js-item="filterable-list-show-more-btn-label"> weitere Ergebnisse anzeigen</span>
			</button>
		</div>
	</div>
	{{/wrapWith}}
	{{/with}}
	{{/wrapWith}}
	{{/wrapWith}}

</div>

Data File

filterable-list.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"filterableListContextClass": "default",
				"filterableListClasses": "",
				"filterableListJsOptions": {
					"i18n": {
						"loadMore": "Mehr laden",
						"noResultsText": "<strong>Es wurden keine Ergebnisse gefunden</strong>",
						"resultsText": "<strong>Ergebnisse</strong> zum Thema <strong>Forschen</strong>",
						"showAll": "Alle anzeigen"
					}
				}
			},
			"content": {
				"filterForm": {
					"settings": {
						"formClasses": "",
						"formContextClass": "filterable-list",
						"formJsOptions": {
							"classes": {
								"loading": "is-loading"
							},
							"submitOnChange": true
						},
						"formJsItem": "filterable-list-filter-form",
						"formAction": "//localhost:3000/api/connector/get",
						"formActionQA": "mocks/connector/getAll10.json",
						"formMethod": "GET",
						"formAjax": true
					},
					"content": {
						"fieldsets": [
							{
								"settings": {
									"fieldsetClasses": "is-small",
									"legendClasses": "is-col-mobile-p-12 is-hidden"
								},
								"content": {
									"legend": "Radio Buttons",
									"rows": [
										{
											"settings": {
												"rowClasses": ""
											},
											"content": {
												"cols": [
													{
														"settings": {
															"radioClasses": "is-inline-block is-filternav",
															"colClasses": "is-text-align-right",
															"inputClasses": "is-radios",
															"labelWrapperClasses": "",
															"radioWrapperClasses": "",
															"legendClasses": "",
															"id": "category",
															"required": false,
															"typeOf": "radio"
														},
														"content": {
															"label": "Zeige",
															"radios": [
																{
																	"settings": {
																		"wrapperClass": "is-radio-wrapper",
																		"inputClass": false,
																		"required": false,
																		"dataAttr": false,
																		"id": "news",
																		"labelClass": "",
																		"name": "category"
																	},
																	"content": {
																		"label": "News"
																	}
																},
																{
																	"settings": {
																		"wrapperClass": "is-radio-wrapper",
																		"inputClass": false,
																		"required": false,
																		"dataAttr": false,
																		"id": "events",
																		"labelClass": "",
																		"name": "category"
																	},
																	"content": {
																		"label": "Events"
																	}
																},
																{
																	"settings": {
																		"wrapperClass": "is-radio-wrapper",
																		"inputClass": false,
																		"required": false,
																		"dataAttr": false,
																		"id": "all",
																		"labelClass": "is-last",
																		"name": "category",
																		"attributes": [
																			{
																				"attrKey": "data-js-item",
																				"attrValue": "filterable-list-radio-all"
																			}
																		]
																	},
																	"content": {
																		"label": "Alle"
																	}
																}
															]
														}
													},
													{
														"settings": {
															"colClasses": "is-hidden",
															"id": "offset",
															"required": false,
															"type": "hidden",
															"typeOf": "input",
															"attributes": [
																{
																	"attrKey": "value",
																	"attrValue": 0
																},
																{
																	"attrKey": "data-js-item",
																	"attrValue": "filterable-list-offset"
																}
															]
														},
														"content": {
															"label": "Hidden offset field"
														}
													},
													{
														"settings": {
															"colClasses": "is-hidden",
															"id": "limit",
															"required": false,
															"type": "hidden",
															"typeOf": "input",
															"attributes": [
																{
																	"attrKey": "value",
																	"attrValue": 10
																},
																{
																	"attrKey": "data-js-item",
																	"attrValue": "filterable-list-limit"
																}
															]
														},
														"content": {
															"label": "Hidden limit field"
														}
													}
												]
											}
										}
									]
								}
							}
						]
					}
				},
				"initialContentInverted": {
					"settings": {
						"relatedContentContextClass": "inverted",
						"relatedContentClasses": "is-full-width"
					},
					"content": {
						"headline": "",
						"teaserPremium": {
							"settings": {
								"teaserPremiumContextClass": "default",
								"teaserPremiumClasses": false,
								"bgGreen": true,
								"singleTeaserPositioning": {
									"modifierHorizontal": "is-left"
								}
							},
							"content": {
								"picture": {
									"settings": {
										"pictureContextClass": "animated-objects",
										"pictureClasses": false,
										"lazyload": true,
										"autoSizes": true
									},
									"content": {
										"fallbackSrc": "https://via.placeholder.com/40x40",
										"alt": "Alternative text that describes the image",
										"items": [
											{
												"srcset": [
													{
														"src": "https://via.placeholder.com/400x400",
														"imageWidth": "400w"
													},
													{
														"src": "https://via.placeholder.com/800x800",
														"imageWidth": "800w"
													},
													{
														"src": "https://via.placeholder.com/1200x1200",
														"imageWidth": "1200w"
													},
													{
														"src": "https://via.placeholder.com/1600x1600",
														"imageWidth": "1600w"
													},
													{
														"src": "https://via.placeholder.com/2000x2000",
														"imageWidth": "2000w"
													},
													{
														"src": "https://via.placeholder.com/2400x2400",
														"imageWidth": "2400w"
													},
													{
														"src": "https://via.placeholder.com/2800x2800",
														"imageWidth": "2800w"
													},
													{
														"src": "https://via.placeholder.com/3200x3200",
														"imageWidth": "3200w"
													}
												]
											}
										]
									}
								},
								"singleTeaser": {
									"bgLight": true,
									"settings": {
										"teaserSingleContextClass": "default"
									},
									"content": {
										"headline": "Der LMU Studien-Informations-Service",
										"linkHref": "#",
										"linkText": "Weiterlesen"
									}
								}
							}
						},
						"teaserFirst": {
							"bgBlue": true,
							"settings": {
								"teaserSingleContextClass": "default"
							},
							"content": {
								"headline": "Der LMU Studien-Informations-Service",
								"headlineClasses": "is-facebook",
								"text": "Lorem ipsum dolor sit amet",
								"linkHref": "#",
								"linkText": "Weiterlesen"
							}
						},
						"teaserThird": {
							"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"
							}
						},
						"teaserFourth": {
							"bgLight": 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"
									}
								]
							}
						}
					}
				},
				"initialContentNormal": {
					"settings": {
						"relatedContentContextClass": "default",
						"relatedContentClasses": "is-full-width"
					},
					"content": {
						"headline": "",
						"teaserPremium": {
							"settings": {
								"teaserPremiumContextClass": "default",
								"teaserPremiumClasses": false,
								"bgGreen": true
							},
							"content": {
								"picture": {
									"settings": {
										"pictureContextClass": "animated-objects",
										"pictureClasses": false,
										"lazyload": true,
										"autoSizes": true
									},
									"content": {
										"fallbackSrc": "https://via.placeholder.com/40x40",
										"alt": "Alternative text that describes the image",
										"items": [
											{
												"srcset": [
													{
														"src": "https://via.placeholder.com/400x400",
														"imageWidth": "400w"
													},
													{
														"src": "https://via.placeholder.com/800x800",
														"imageWidth": "800w"
													},
													{
														"src": "https://via.placeholder.com/1200x1200",
														"imageWidth": "1200w"
													},
													{
														"src": "https://via.placeholder.com/1600x1600",
														"imageWidth": "1600w"
													},
													{
														"src": "https://via.placeholder.com/2000x2000",
														"imageWidth": "2000w"
													},
													{
														"src": "https://via.placeholder.com/2400x2400",
														"imageWidth": "2400w"
													},
													{
														"src": "https://via.placeholder.com/2800x2800",
														"imageWidth": "2800w"
													},
													{
														"src": "https://via.placeholder.com/3200x3200",
														"imageWidth": "3200w"
													}
												]
											}
										]
									}
								},
								"singleTeaser": {
									"bgLight": true,
									"settings": {
										"teaserSingleContextClass": "default"
									},
									"content": {
										"headline": "Der LMU Studien-Informations-Service",
										"linkHref": "#",
										"linkText": "Weiterlesen"
									}
								}
							}
						},
						"teaserFirst": {
							"bgBlue": true,
							"settings": {
								"teaserSingleContextClass": "default"
							},
							"content": {
								"headline": "Der LMU Studien-Informations-Service",
								"headlineClasses": "is-facebook",
								"text": "Lorem ipsum dolor sit amet",
								"linkHref": "#",
								"linkText": "Weiterlesen"
							}
						},
						"teaserThird": {
							"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"
							}
						},
						"teaserFourth": {
							"bgLight": 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"
									}
								]
							}
						}
					}
				},
				"initialContentTeaserDouble": {
					"settings": {
						"teaserDoubleContextClass": "default",
						"teaserDoubleClasses": "is-full-width"
					},
					"content": {
						"headline": "Welcome to our internationals",
						"text": "Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores",
						"linkHref": "#",
						"linkText": "Weiterlesen",
						"figure": {
							"settings": {
								"figureId": false,
								"figureContextClass": "teaser-double",
								"figureJsModule": true
							},
							"content": {
								"figurePicture": {
									"settings": {
										"pictureContextClass": "animated-objects",
										"pictureClasses": false,
										"lazyload": true,
										"autoSizes": true
									},
									"content": {
										"fallbackSrc": "https://via.placeholder.com/40x40",
										"alt": "Alternative text that describes the image",
										"items": [
											{
												"srcset": [
													{
														"src": "https://via.placeholder.com/400x400",
														"imageWidth": "400w"
													},
													{
														"src": "https://via.placeholder.com/800x800",
														"imageWidth": "800w"
													},
													{
														"src": "https://via.placeholder.com/1200x1200",
														"imageWidth": "1200w"
													},
													{
														"src": "https://via.placeholder.com/1600x1600",
														"imageWidth": "1600w"
													},
													{
														"src": "https://via.placeholder.com/2000x2000",
														"imageWidth": "2000w"
													},
													{
														"src": "https://via.placeholder.com/2400x2400",
														"imageWidth": "2400w"
													},
													{
														"src": "https://via.placeholder.com/2800x2800",
														"imageWidth": "2800w"
													},
													{
														"src": "https://via.placeholder.com/3200x3200",
														"imageWidth": "3200w"
													}
												],
												"media": "(min-width:767px)"
											},
											{
												"srcset": [
													{
														"src": "https://via.placeholder.com/400x225",
														"imageWidth": "400w"
													},
													{
														"src": "https://via.placeholder.com/800x450",
														"imageWidth": "800w"
													},
													{
														"src": "https://via.placeholder.com/1200x675",
														"imageWidth": "1200w"
													},
													{
														"src": "https://via.placeholder.com/1600x900",
														"imageWidth": "1600w"
													},
													{
														"src": "https://via.placeholder.com/2000x1125",
														"imageWidth": "2000w"
													},
													{
														"src": "https://via.placeholder.com/2400x1350",
														"imageWidth": "2400w"
													},
													{
														"src": "https://via.placeholder.com/2800x1575",
														"imageWidth": "2800w"
													},
													{
														"src": "https://via.placeholder.com/3200x1800",
														"imageWidth": "3200w"
													}
												],
												"media": "(max-width: 768px)"
											}
										]
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

Styles

filterable-list.scss

/* ===================================================
component: filterable-list
=================================================== */

/*
Animation
----------------------- */

@include keyframes(loadMore) {

	0% {
		opacity: 0;
		transform: translateY(10%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@include keyframes(boxAppear) {

	0% {
		opacity: 0;
	}

	16% {
		opacity: 1;
	}

	48% {
		opacity: 1;
	}

	64% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-filterable-list"] {
	margin-bottom: 20px;

	.filterable-list__list-wrapper {
		margin-bottom: 60px;
		position: relative;
	}

	.filterable-list__initial-wrapper {
		display: none;

		&:focus {
			outline: none;
		}

		/*
		MODIFIERS
		----------------------- */

		&.is-visible {
			display: block;
			animation: loadMore 2 * $animation-duration-std
				$animation-easing-std;
		}
	}

	.filterable-list__list {
		@include grid-column(12);

		@include bp($bp-tablet-l) {
			@include grid-column(10);
			@include grid-push-h(1);
		}

		@include bp($bp-desktop-l) {
			@include grid-column(8);
			@include grid-push-h(2);
		}
	}

	.filterable-list__list-item {
		@include clearfix();

		display: flex;
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 30px;
		padding-bottom: 30px;
		border-bottom: 1px solid $color-gray-border;
		position: relative;
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity 2 * $animation-duration-std $animation-easing-std,
			transform 2 * $animation-duration-std $animation-easing-std;

		&:hover {

			.filterable-list__list-item-link {
				color: $color-dark;

				&::before {
					@include sprites-icon-arrow-black();

					transform: translateX(5px);
				}

				/*
				MODIFIERS
				----------------------- */
				&.is-publication,
				&.is-download {

					&::before {
						@include sprites-icon-download-black();
					}
				}
			}

			.filterable-list__list-item-dates {
				background-color: $color-white;
				border: 1px solid $color-green;
			}

			.filterable-list__list-item-date-month,
			.filterable-list__list-item-date-day,
			.filterable-list__list-item-date-connect {
				color: $color-green;
			}

			.filterable-list__list-item-image {
				/*
				MODIFIERS
				----------------------- */
				&.is-publication,
				&.is-gallery,
				&.is-video {

					&::before {
						opacity: 0;
					}

					&::after {
						opacity: 1;
					}
				}
			}
		}

		&:focus {
			outline: none;
		}

		/*
		MODIFIERS
		----------------------- */
		&:last-of-type {
			border-bottom: none;
		}

		&.is-loading {
			opacity: 0;
			transform: translate3d(0, 50%, 0);
		}
	}

	.filterable-list__list-item-image {
		display: none;
		position: relative;

		@include bp($bp-tablet-p) {
			display: block;
			width: 110px;
			height: 110px;
			flex: 0 0 110px;
			margin-right: 30px;
		}

		@include bp($bp-tablet-l) {
			width: 148px;
			height: 148px;
			flex: 0 0 148px;
		}

		@include bp($bp-desktop-l) {
			width: 206px;
			height: 206px;
			flex: 0 0 206px;
			margin-right: 40px;
		}

		&::before,
		&::after {
			@include pseudo();

			position: absolute;
			right: 0;
			bottom: 0;
			display: block;
			z-index: 2;
			transition: opacity $animation-duration-std $animation-easing-std;
		}

		&::before {
			opacity: 1;
		}

		&::after {
			opacity: 0;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-publication {

			&::before {
				@include sprites-icon-publikation-black();
			}

			&::after {
				@include sprites-icon-publikation-green();
			}
		}

		&.is-gallery {

			&::before {
				@include sprites-icon-galerie-black();
			}

			&::after {
				@include sprites-icon-galerie-green();
			}
		}

		&.is-video {

			&::before {
				@include sprites-icon-video-liste-black();
			}

			&::after {
				@include sprites-icon-video-liste-green();
			}
		}
	}

	.filterable-list__list-item-text-wrapper {
		display: block;
		position: relative;
		flex: 1 1;
	}

	/* META */
	.filterable-list__list-item-meta {
		display: block;
		color: $color-gray;
		font-size: 1.5rem;
		line-height: (20/15);
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 15px;
		font-family: $font-regular;
	}

	.filterable-list__list-item-meta-date {

		&::before {
			@include pseudo();

			position: relative;
			display: inline-block;
			vertical-align: middle;
			width: 3px;
			height: 3px;
			background-color: $color-gray;
			border-radius: 50%;
			margin: -3px 7px 0 4px;
		}

		&.is-nobullet {

			&::before {
				width: 0;
				height: 0;
				margin: 0;
				background-color: $color-white;
			}

		}
	}

	.filterable-list__list-item-meta-addition {

		&::before {
			@include pseudo();

			position: relative;
			display: inline-block;
			vertical-align: middle;
			width: 3px;
			height: 3px;
			background-color: $color-gray;
			border-radius: 50%;
			margin: -3px 7px 0 4px;
		}
	}

	/* TYPO */
	.filterable-list__list-item-link {
		color: $color-green;
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		margin-bottom: 12px;
		text-decoration: none;
		display: block;
		transition: color $animation-duration-std/2 $animation-easing-std;
		position: relative;
		padding-left: 25px;

		@include print() {
			padding-left: 0;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&:focus {
			color: $color-dark;

			&::before {
				@include sprites-icon-arrow-black();

				transform: translateX(5px);
			}
		}

		&::before {
			@include pseudo();
			@include sprites-icon-arrow-green100();

			position: absolute;
			display: inline-block;
			top: 5px;
			left: 0;
			margin-right: 10px;
			vertical-align: unset;
			transition: transform $animation-duration-std $animation-easing-std;

			@include print() {
				display: none;
			}
		}

		/*
		MODIFIERS
		----------------------- */
		&.a11y-focus-key {
			@include a11y-focus-key();
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-publication,
		&.is-download {

			&::before {
				@include sprites-icon-download-green100();
			}

			&:hover,
			&:focus {

				&::before {
					@include sprites-icon-download-black();
				}
			}
		}
	}

	.filterable-list__list-item-link-info {
		text-transform: uppercase;
		font-size: 1.2rem;
		line-height: (17/12);
		letter-spacing: .5px;
		color: $color-gray;
		font-family: $font-regular;
		display: block;
		margin-top: 1px;
	}

	.filterable-list__list-item-description {
		display: block;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 20px;

		strong {
			font-family: $font-bold;
		}
	}

	.filterable-list__list-item-info-video {
		display: block;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 20px;

		strong {
			font-family: $font-bold;
		}
	}

	/* DEADLINE */
	.filterable-list__list-item-deadline {
		display: block;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 20px;
		font-family: $font-bold;
	}

	/* TOPICS */
	.filterable-list__list-item-topic-headline {
		font-family: $font-bold;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .25px;
		color: $color-dark;
		display: inline-block;
		margin-right: 5px;
	}

	.filterable-list__list-item-topics {
		display: inline-block;
		margin-bottom: 20px;
	}

	.filterable-list__list-item-topic-item {
		display: inline-block;
		background-color: $color-light;
		color: $color-dark;
		text-transform: uppercase;
		font-size: .9rem;
		line-height: (12/9);
		letter-spacing: .9px;
		padding: 2px 5px;
		font-family: $font-bold;
		vertical-align: middle;
		margin-top: -2px;
		margin-right: 4px;
	}

	/* EVENT DATE */
	.filterable-list__list-item-event {
		display: block;
		margin-bottom: 20px;
	}

	.filterable-list__list-item-time {
		display: inline-block;
		margin-right: 35px;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		color: $color-dark;
		font-family: $font-bold;

		&::before {
			@include pseudo();
			@include sprites-icon-clock-black();

			position: relative;
			display: inline-block;
			margin-right: 6px;
			vertical-align: middle;
			margin-top: -3px;
		}
	}

	.filterable-list__list-item-address {
		display: inline-block;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		color: $color-dark;
		font-family: $font-bold;

		&::before {
			@include pseudo();
			@include sprites-icon-map-black();

			position: relative;
			display: inline-block;
			margin-right: 6px;
			vertical-align: middle;
		}
	}

	/* LOAD MORE */
	.filterable-list__load-more-wrapper {
		width: 100%;
		display: block;
		text-align: center;
		position: relative;
		clear: both;

		@include print() {
			display: none;
		}

		&::before {
			@include pseudo();
			@include centering(v);

			position: absolute;
			width: 100%;
			height: 1px;
			border-top: 1px solid $color-gray-light;
			margin-top: 1px;
		}
	}

	.filterable-list__load-more {
		@include reset-btn();

		padding: 10px 30px;
		min-width: 275px;
		display: inline-block;
		text-align: center;
		background-color: $color-green;
		cursor: pointer;
		position: relative;
		transition: background-color $animation-duration-std
			$animation-easing-std;

		@include bp($bp-desktop-l) {
			padding: 18px 30px;
		}

		&:focus {
			outline: none;
		}

		&:hover,
		&.a11y-focus-key {
			background-color: $color-white;

			.filterable-list__load-more-text {
				color: $color-green;

				&::before,
				&::after {
					background-color: $color-green;
				}
			}

			&::before {
				opacity: 1;
			}
		}

		&::before {
			@include pseudo();

			position: absolute;
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			border: 1px solid $color-green;
			display: block;
			z-index: 2;
			top: 0;
			left: 0;
			opacity: 0;
			transition: opacity $animation-duration-std $animation-easing-std;
		}
	}

	.filterable-list__load-more-text {
		color: $color-white;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		font-family: $font-bold;
		display: inline-block;
		transition: color $animation-duration-std $animation-easing-std;
		position: relative;
		padding-left: 25px;

		&::before {
			@include pseudo();

			width: 15px;
			height: 3px;
			display: block;
			background-color: $color-white;
			position: absolute;
			left: 0;
			top: 10px;
			transition: background-color $animation-duration-std
				$animation-easing-std;
		}

		&::after {
			@include pseudo();
			@include centering(v);

			width: 3px;
			height: 15px;
			display: block;
			background-color: $color-white;
			position: absolute;
			top: 11px;
			left: 6px;
			transition: background-color $animation-duration-std
				$animation-easing-std;
		}
	}

	// LOAD INIT LOADER
	.filterable-list__load-init-loader {
		@include centering(h);

		position: absolute;
		top: 80px;
		display: flex;
		width: 200px;
		flex-direction: row;
		background-color: $color-white;
		height: 60px;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		opacity: 0;
		transition: opacity $animation-duration-std $animation-easing-std;
		z-index: 100;
		border: 1px solid $color-green;
	}

	.filterable-list__load-init-loader-box {
		display: block;
		margin: 10px;
		border: 1em solid $color-green;
		opacity: 0;

		/*
		MODIFIERS
		----------------------- */
		&.is-one {
			animation: boxAppear 2s linear infinite;
		}

		&.is-two {
			animation: boxAppear 2s linear .3s infinite;
		}

		&.is-three {
			animation: boxAppear 2s linear .62s infinite;
		}
	}

	// LOAD MORE LOADER
	.filterable-list__load-more-loader {
		@include centering(hv);

		position: absolute;
		display: flex;
		flex-direction: row;
		background-color: $color-green;
		z-index: 2;
		width: calc(100% - 2px);
		height: 100%;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		opacity: 0;
		transition: opacity $animation-duration-std $animation-easing-std;
	}

	.filterable-list__load-more-loader-box {
		display: block;
		margin: 10px;
		border: 1em solid $color-white;
		opacity: 0;

		/*
		MODIFIERS
		----------------------- */
		&.is-one {
			animation: boxAppear 2s linear infinite;
		}

		&.is-two {
			animation: boxAppear 2s linear .3s infinite;
		}

		&.is-three {
			animation: boxAppear 2s linear .62s infinite;
		}
	}

	.filterable-list__title {
		@include headline-h2-styles();
		padding-bottom: 20px;
	}

	.filterable-list__results-info {
		@include headline-h3-styles();

		font-family: $font-regular;
		font-weight: 400;
		padding-bottom: 20px;
	}

	.filterable-list__total-item-count {
		display: inline-block;
	}

	.filterable-list__results-text {
		font-family: $font-regular;
		font-weight: 400;
		display: inline-block;

		strong {
			font-family: $font-bold;
		}

	}

	/*
	SHOW MORE
	----------------------- */
	.filterable-list__list-init-show-more-wrapper {
		width: 100%;
		display: block;
		text-align: center;
		position: relative;
		clear: both;

		&::before {
			@include pseudo();
			@include centering(v);

			position: absolute;
			width: 100%;
			height: 1px;
			border-top: 1px solid $color-gray-light;
			margin-top: 1px;
		}

		@include print() {
			display: none;
		}
	}

	.filterable-list__list-init-show-more {
		@include reset-btn();

		padding: 10px 30px;
		min-width: 275px;
		display: inline-block;
		text-align: center;
		background-color: $color-green;
		cursor: pointer;
		position: relative;
		transition: background-color $animation-duration-std
			$animation-easing-std;
		color: $color-white;

		@include bp($bp-desktop-l) {
			padding: 18px 30px;
		}

		.no-touch &:hover,
		&.a11y-focus-key {
			background-color: $color-white;

			.filterable-list__list-init-show-more-text {
				color: $color-green;

				&::before,
				&::after {
					background-color: $color-green;
				}
			}

			&::before {
				opacity: 1;
			}
		}

		&:focus {
			background-color: $color-green;

			.filterable-list__list-init-show-more-text {
				color: $color-white;

				&::before,
				&::after {
					background-color: $color-white;
				}
			}

			&::before {
				opacity: 0;
			}
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-show-all {

			.filterable-list__list-init-show-more-text {
				padding-left: 0;

				&::before,
				&::after {
					display: none;
				}
			}
		}

		&::before {
			@include pseudo();

			position: absolute;
			width: calc(100% - 2px);
			height: calc(100% - 2px);
			border: 1px solid $color-green;
			display: block;
			z-index: 2;
			top: 0;
			left: 0;
			opacity: 0;
			transition: opacity $animation-duration-std $animation-easing-std;
		}

		&::after {
		}
	}

	.filterable-list__list-init-show-more-text {
		color: $color-white;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .3px;
		font-family: $font-bold;
		display: inline-block;
		transition: color $animation-duration-std $animation-easing-std;
		position: relative;
		padding-left: 25px;

		&::before {
			@include pseudo();

			width: 15px;
			height: 3px;
			display: block;
			background-color: $color-white;
			position: absolute;
			left: 0;
			top: 11px;
			transition: background-color $animation-duration-std
				$animation-easing-std;
		}

		&::after {
			@include pseudo();
			@include centering(v);

			width: 3px;
			height: 15px;
			display: block;
			background-color: $color-white;
			position: absolute;
			top: 12px;
			left: 6px;
			transition: background-color $animation-duration-std
				$animation-easing-std;
		}
	}

	/*
	DATE
	----------------------- */
	.filterable-list__list-item-dates {
		border: 1px solid $color-white;
		display: inline-block;
		padding: 0 13px;
		margin-bottom: 10px;
		transition: border-color $animation-duration-std $animation-easing-std,
			background-color $animation-duration-std $animation-easing-std;
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		background-color: $color-dark;

		@include bp($bp-tablet-l) {
			top: 20px;
			left: 20px;
			padding: 0 16px;
		}

		@include print() {
			border: 1px solid $color-black;
		}
	}

	.filterable-list__list-item-date {
		height: 40px;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		vertical-align: top;

		@include bp($bp-tablet-p) {
			height: 46px;
		}

		@include bp($bp-tablet-l) {
			height: 60px;
		}

		@include bp($bp-desktop-m) {
			height: 60px;
			margin-bottom: -2px;
		}

		@include bp($bp-desktop-l) {
			height: 72px;
			margin-bottom: 0;
		}

		/*
		MODIFIERS
		----------------------- */
		&.is-connector {
			height: 42px;

			@include bp($bp-tablet-l) {
				height: 60px;
			}

			@include bp($bp-desktop-m) {
				height: 60px;
			}

			@include bp($bp-desktop-l) {
				height: 72px;
				margin-bottom: 0;
			}
		}
	}

	.filterable-list__list-item-date-connect {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 2rem;
		line-height: (26/20);
		letter-spacing: .2px;
		color: $color-white;
		display: block;
		transition: color $animation-duration-std $animation-easing-std;
		text-decoration: none;

		@include bp($bp-tablet-l) {
			font-size: 2rem;
		}

		@include bp($bp-desktop-m) {
			font-size: 2rem;
		}

		@include bp($bp-desktop-l) {
			font-size: 2.6rem;
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.filterable-list__list-item-date-day {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1.7rem;
		line-height: (16/17);
		letter-spacing: .38px;
		color: $color-white;
		display: block;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (14/22);
			letter-spacing: .27px;
		}

		@include bp($bp-tablet-l) {
			font-size: 2rem;
			line-height: (20/25);
			letter-spacing: .3px;
		}

		@include bp($bp-desktop-l) {
			font-size: 3.2rem;
			line-height: (24/32);
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.filterable-list__list-item-date-month {
		font-family: $font-bold;
		font-weight: 700;
		font-size: 1rem;
		line-height: (14/10);
		letter-spacing: .28px;
		color: $color-white;
		text-transform: uppercase;
		text-decoration: none;
		transition: color $animation-duration-std $animation-easing-std;

		@include bp($bp-tablet-p) {
			font-size: .9rem;
			line-height: (18/13);
			letter-spacing: .5px;
		}

		@include bp($bp-tablet-l) {
			font-size: 1.2rem;
			line-height: (20/15);
			letter-spacing: .3px;
		}

		@include bp($bp-desktop-l) {
			font-size: 2rem;
			line-height: (24/20);
			letter-spacing: 0;
		}

		&::after {
			@include print() {
				display: none;
			}
		}
	}

	.filterable-list__a11y-clickarea {
		@include clickarea();

		z-index: 3;
	}

	.form__checkbox-item {
		padding-bottom: 15px;
		/* border: 1px solid #c00; */
	}

	.form__checkbox-label {
		font-family: $font-regular;
		font-size: 1.6rem;
		line-height: (34/16);
		letter-spacing: .25px;
		padding-left: 28px;
		width: 100%;

		&::before {
			width: 16px !important;
			height: 16px !important;
			border: 1px solid $color-green;
		}
	}

	.form__checkbox-input:checked {

		&::before {
			width: 16px !important;
			height: 16px !important;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-filterable-list--default {
}

.c-filterable-list--press {
	margin-bottom: 60px;

	@include bp($bp-mobile-p) {
		margin-bottom: 80px;
	}

	@include bp($bp-tablet-p) {
		margin-bottom: 100px;

	}

	@include bp(1920px) {
		margin-bottom: 120px;
	}
}

.c-filterable-list--rte {

	.filterable-list__list {
		margin-bottom: 0;
		margin-top: 0;

		.filterable-list__list-item {
			padding-left: 0;
			margin-top: 0;

			&::before {
				content: none;
				width: 0;
				height: 0;
				top:0;
			}

			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}


}

.c-filterable-list--jobs {

	.filterable-list__list-wrapper {
		margin-bottom: 60px;
		position: relative;
	}

	.filterable-list__results-info {
		@include headline-h3-styles();

		font-family: $font-regular;
		font-weight: 400;
		padding-bottom: 20px;
	}

	.filterable-list__results-text {
		font-family: $font-regular;
		font-weight: 400;
		display: inline-block;

		strong {
			font-family: $font-bold;
		}

	}

	.filterable-list__list {
		@include grid-column(12);

		@include bp($bp-tablet-l) {
			@include grid-column(10);
			@include grid-push-h(1);
		}

		@include bp($bp-desktop-l) {
			@include grid-column(8);
			@include grid-push-h(2);
		}
	}

	.filterable-list__list-item-text-wrapper {
		display: block;
		position: relative;
		flex: 1 1;
	}

	.filterable-list__list-item-meta {
		display: block;
		color: $color-gray;
		font-size: 1.5rem;
		line-height: (20/15);
		letter-spacing: 1px;
		text-transform: uppercase;
		margin-bottom: 15px;
		font-family: $font-regular;
	}

	.filterable-list__list-item-description {
		display: block;
		font-size: 1.6rem;
		line-height: (24/16);
		letter-spacing: .25px;
		color: $color-dark;
		margin-bottom: 20px;

		strong {
			font-family: $font-bold;
		}
	}

}

HTML Output

Default

<div class="c-filterable-list--default" data-css="c-filterable-list" data-js-module="filterable-list" data-js-options='{&quot;i18n&quot;:{&quot;loadMore&quot;:&quot;Mehr laden&quot;,&quot;noResultsText&quot;:&quot;&lt;strong&gt;Es wurden keine Ergebnisse gefunden&lt;/strong&gt;&quot;,&quot;resultsText&quot;:&quot;&lt;strong&gt;Ergebnisse&lt;/strong&gt; zum Thema &lt;strong&gt;Forschen&lt;/strong&gt;&quot;,&quot;showAll&quot;:&quot;Alle anzeigen&quot;}}'>
	<div class="grid__container">
		<div class="grid__row">
			<form class="c-form--filterable-list
	" action="mocks/connector/getAll10.json" method="GET" data-css="c-form" data-js-module="form-ajax" data-js-options='{&quot;classes&quot;:{&quot;loading&quot;:&quot;is-loading&quot;},&quot;submitOnChange&quot;:true}' data-js-item="filterable-list-filter-form">
				<fieldset class="form__fieldset is-small">
					<legend class="form__legend is-col-mobile-p-12 is-hidden">
						Radio Buttons </legend>
					<div class="form__row">
						<div class="form__col is-text-align-right">
							<div class="form__radio is-inline-block is-filternav">
								<div class="form__label-wrapper">
									<strong class="form__radio-legend">Zeige</strong>
								</div>
								<div class="form__radio-wrapper">
									<ul class="form__radio-list">
										<li class="form__radio-item">
											<input id="news" name="category" type="radio" value="news" class="form__radio-input" />
											<label role="button" for="news" class="form__radio-label">
												News
											</label>
										</li>
										<li class="form__radio-item">
											<input id="events" name="category" type="radio" value="events" class="form__radio-input" />
											<label role="button" for="events" class="form__radio-label">
												Events
											</label>
										</li>
										<li class="form__radio-item">
											<input id="all" name="category" type="radio" value="all" data-js-item="filterable-list-radio-all" class="form__radio-input" />
											<label role="button" for="all" class="form__radio-label is-last">
												Alle
											</label>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="form__col is-hidden">
							<div class="form__input">
								<div class="form__label-wrapper">
									<label for="offset" class="form__input-label">
										Hidden offset field
									</label>
								</div>
								<div class="form__input-wrapper">
									<input id="offset" name="offset" type="hidden" value="0" data-js-item="filterable-list-offset" class="form__input-text" />
								</div>
							</div>
						</div>
						<div class="form__col is-hidden">
							<div class="form__input">
								<div class="form__label-wrapper">
									<label for="limit" class="form__input-label">
										Hidden limit field
									</label>
								</div>
								<div class="form__input-wrapper">
									<input id="limit" name="limit" type="hidden" value="10" data-js-item="filterable-list-limit" class="form__input-text" />
								</div>
							</div>
						</div>
					</div>
				</fieldset>
				<span class="filterable-list__load-init-loader">
					<span class="filterable-list__load-init-loader-box is-one"></span>
					<span class="filterable-list__load-init-loader-box is-two"></span>
					<span class="filterable-list__load-init-loader-box is-three"></span>
				</span>
				<div class="filterable-list__list-wrapper" data-js-item="filterable-list-render-target">
					<div class="filterable-list__initial-wrapper is-visible">
						<div class="c-related-content--default is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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="related-content__teaser-first is-bg-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
						<div class="c-related-content--inverted is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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 is-left">
														<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-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
						<div class="grid__container">
							<div class="grid__row">
								<div class="c-teaser-double--default is-full-width" data-css="c-teaser-double" data-js-module="teaser-double">
									<div class="teaser-double__wrapper">
										<div class="teaser-double__image-section-wrapper">
											<div class="teaser-double__image-section">
												<figure class="c-figure--teaser-double" data-css="c-figure" data-js-module="true">
													<div class="figure__wrapper">
														<picture class="c-picture--animated-objects
															 lazyload" data-css="c-picture">
															<!--[if IE 9]><audio><![endif]-->
															<source data-srcset="
															 https://via.placeholder.com/400x400  400w  , 
															 https://via.placeholder.com/800x800  800w  , 
															 https://via.placeholder.com/1200x1200  1200w  , 
															 https://via.placeholder.com/1600x1600  1600w  , 
															 https://via.placeholder.com/2000x2000  2000w  , 
															 https://via.placeholder.com/2400x2400  2400w  , 
															 https://via.placeholder.com/2800x2800  2800w  , 
															 https://via.placeholder.com/3200x3200  3200w  " media=" (min-width:767px)" />
															<source data-srcset="
															 https://via.placeholder.com/400x225  400w  , 
															 https://via.placeholder.com/800x450  800w  , 
															 https://via.placeholder.com/1200x675  1200w  , 
															 https://via.placeholder.com/1600x900  1600w  , 
															 https://via.placeholder.com/2000x1125  2000w  , 
															 https://via.placeholder.com/2400x1350  2400w  , 
															 https://via.placeholder.com/2800x1575  2800w  , 
															 https://via.placeholder.com/3200x1800  3200w  " media=" (max-width: 768px)" />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
															 picture__image lazyload" src="https://via.placeholder.com/40x40" alt="Alternative text that describes the image" title="Alternative text that describes the image" data-sizes="auto" />
														</picture>
													</div>
												</figure>
											</div>
										</div>
										<div class="teaser-double__text-section-wrapper">
											<div class="teaser-double__text-section">
												<h3 class="teaser-double__headline">
													Welcome to our internationals
												</h3>
												<p class="teaser-double__text">Lorem Ipsum dolor sit amt dolor lirum sit amet dolores lorem Ipsum dolor sit amt dolor lirum sit amet dolores</p>
												<a class="teaser-double__link" href="#">Weiterlesen</a>
											</div>
										</div>
										<a href="#" class="teaser-double__a11y-clickarea" aria-hidden="true" tabindex="-1"></a>
									</div>
								</div>
							</div>
						</div>
						<div class="c-related-content--default is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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="related-content__teaser-first is-bg-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
					</div>
					<div id="unique-id-56442" class="filterable-list__initial-wrapper" data-js-item="filterable-list-init-wrapper-hidden" aria-hidden="true" tabindex="-1">
						<div class="c-related-content--inverted is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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 is-left">
														<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-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
						<div class="c-related-content--default is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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="related-content__teaser-first is-bg-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
						<div class="c-related-content--inverted is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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 is-left">
														<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-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
						<div class="c-related-content--default is-full-width" data-css="c-related-content">
							<div class="grid__container">
								<div class="grid__row">
									<h3 class="related-content__headline"></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://via.placeholder.com/400x400  400w  , 
												 https://via.placeholder.com/800x800  800w  , 
												 https://via.placeholder.com/1200x1200  1200w  , 
												 https://via.placeholder.com/1600x1600  1600w  , 
												 https://via.placeholder.com/2000x2000  2000w  , 
												 https://via.placeholder.com/2400x2400  2400w  , 
												 https://via.placeholder.com/2800x2800  2800w  , 
												 https://via.placeholder.com/3200x3200  3200w  " />
															<!--[if IE 9]></audio><![endif]-->
															<img class="
												 picture__image lazyload" src="https://via.placeholder.com/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="related-content__teaser-first is-bg-blue">
											<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 is-facebook">
															Der LMU Studien-Informations-Service
														</h3>
														<p class="teaser-single__text">Lorem ipsum dolor sit amet</p>
													</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">
														<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-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">
														<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">&mdash;</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>
							</div>
						</div>
					</div>
					<div class="filterable-list__list-init-show-more-wrapper">
						<button type="button" class="filterable-list__list-init-show-more" data-js-item="filterable-list-show-more-btn" aria-expanded="false" aria-controls="unique-id-56442">
							<span class="filterable-list__list-init-show-more-text" data-js-item="filterable-list-show-more-btn-label"> weitere Ergebnisse anzeigen</span>
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

FILTERABLE-LIST (Sonstige Elemente )

src/app/shared/components/filterable-list/templates

Demo Section

Default

Welcome to our internationals

Readme

filterableList (`component`)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

`filterable-list.hbs`

Settings

Content

`filterable-list__list-item.hbs`

Content

`filterable-list__load-more-btn.hbs`

`filterable-list__results-info.hbs`

JavaScript Options

SASS

Modifier Classes

Templates

filterable-list.hbs

Data File

filterable-list.hjson

Styles

filterable-list.scss

HTML Output

Default

Wonach suchst du?

FILTERABLE-LIST (Sonstige Elemente )

src/app/shared/components/filterable-list/templates

Demo Section

Default

Der LMU Studien-Informations-Service

Der LMU Studien-Informations-Service

Wissenschaft Macht Politik: Die Münchener Räterepublik

Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich

Der LMU Studien-Informations-Service

Der LMU Studien-Informations-Service

Wissenschaft Macht Politik: Die Münchener Räterepublik

Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich

Welcome to our internationals

Der LMU Studien-Informations-Service

Der LMU Studien-Informations-Service

Wissenschaft Macht Politik: Die Münchener Räterepublik

Tag der offenen Tür. Hier auch ein dreizeiliger Titel möglich

Readme

filterableList (component)

Description

JIRA

Requirements

Installation

Installation with Veams from local machine

Fields

filterable-list.hbs

Settings

Content

filterable-list__list-item.hbs

Content

filterable-list__load-more-btn.hbs

filterable-list__results-info.hbs

JavaScript Options

SASS

Modifier Classes

Templates

filterable-list.hbs

Data File

filterable-list.hjson

Styles

filterable-list.scss

HTML Output

Default

Wonach suchst du?

filterableList (`component`)

`filterable-list.hbs`

`filterable-list__list-item.hbs`

`filterable-list__load-more-btn.hbs`

`filterable-list__results-info.hbs`