LINK-LIST (Standard Module )

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

Demo Section

Each variation will be presented in the following section.

Anzeigevariante 1= 3 Column Layout

Linkliste (H2, Introtext, 1-9 Links, dreispaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Alle Stellenangebote

Anzeigevariante 2= 2 Column Layout

Linkliste (H2, Introtext, 1-6 Links, zweispaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Alle Stellenangebote

Anzeigevariante 3= nur mit H2, 1-9 Links

Linkliste (H2, 1-9 Links, dreispaltig)

Anzeigevariante 4 / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links

Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, dreispaltig)

Professuren

Verwaltungspersonal

Auszubildende

Alle Stellenangebote

Anzeigevariante 5= 1 Column Layout

Linkliste (H2, Introtext, 1-9 Links, einspaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Alle Stellenangebote

Anzeigevariante 6 1-spaltig / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links

Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, einspaltig)

Professuren

Verwaltungspersonal

Auszubildende

Alle Stellenangebote

RTE-Anzeigevariante 1= 3 Column Layout

Linkliste (H2, Introtext, 1-9 Links, dreispaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Auszubildende

Alle Stellenangebote

Anzeigevariante 2= 2 Column Layout

Linkliste (H2, Introtext, 1-6 Links, zweispaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

RTE-Anzeigevariante 1= 1 Column Layout

Linkliste (H2, Introtext, 1-9 Links, einspaltig)

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Auszubildende

Alle Stellenangebote

Readme

linkList (component)

Description

This blueprint is based on the blueprint of Veams. The Link List component is a list of links organized in 4 possible variations with optional description, category title and cta button.

JIRA

Installation

Installation with Veams from local machine

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

Fields

Settings

Parameter Type Default Description
settings.linkListClasses Boolean false Modifier classes for component
settings.linkListContextClass String 'default' Context class of component
settings.columnClass String '' Possible modifier class

Content

Parameter Type Description
content.mainHeadline String Main headline of the Link List
content.description String Optional description of the Link List
content.cols Array Array containing possible several link lists in the same component
content.ctaLinkContent String String of cta link anchor
content.ctaHref String String of cta link href

Content

Parameter Type Description
content.categoryTitle String String of each optional category title
content.links Array Array containing the list of links

Content

Parameter Type Description
content.linkText String Link text
content.linkHref String String of each link href

Templates

link-list.hbs

<div class="c-link-list{{#if settings.linkListContextClass}}--{{settings.linkListContextClass}}{{else}}--default{{/if}}{{#if settings.linkListClasses}} {{settings.linkListClasses}}{{/if}}"
 data-css="c-link-list">
	<h2 class="link-list__main-headline">{{content.mainHeadline}}</h2>
		{{#if content.description}}
		<p class="link-list__paragraph-content">{{content.description}}</p>
		{{/if}}

	<div class="link-list__container {{#if content.linkButton}}link-list__show-linkbutton{{/if}}">
		<div class="link-list__cols-wrapper{{#if settings.columnClass}} {{settings.columnClass}}{{/if}}">
			{{#each content.cols}}
			{{> link-list__col}}
			{{/each}}
		</div>
		{{#if content.linkButton}}
		{{#with content.linkButton}}
		{{> link-button }}
		{{/with}}
		{{/if}}
	</div>

</div>

link-list__col.hbs

{{#if content.categoryTitle}}
	<h3 class="link-list__category-headline">{{content.categoryTitle}}</h3>
{{/if}}
<ul class="link-list__list">
	{{#each content.links}}
		{{> link-list__link}}
	{{/each}}
</ul>

link-list__link.hbs

<li class="link-list__list-item">
	<a class="link-list__link {{settings.linkClass}}" href="{{content.linkHref}}">{{content.linkText}}</a>
</li>

Data File

link-list.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Anzeigevariante 1= 3 Column Layout"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-three-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-9 Links, dreispaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "7 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "8 Lorem ipsum dolor",
										"linkHref": "#"
									}
								}
							]
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"Anzeigevariante2": {
			"docs": {
				"variationName": "Anzeigevariante 2= 2 Column Layout"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-two-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-6 Links, zweispaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								}
							]
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"Anzeigevariante3": {
			"docs": {
				"variationName": "Anzeigevariante 3= nur mit H2, 1-9 Links"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-three-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, 1-9 Links, dreispaltig)",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "7 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "8 Lorem ipsum dolor",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "9 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								}
							]
						}
					}
				]
			}
		},
		"Anzeigevariante4": {
			"docs": {
				"variationName": "Anzeigevariante 4 / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-with-categories is-three-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, dreispaltig)",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exerco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis noo",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-download"
									},
									"content": {
										"linkText": "6 Ut enim ad minim veniam",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Professuren"
						}
					},
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, quis n",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Ut enim ad minim",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Verwaltungspersonal"
						}
					},
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Ut enim ad minim veniam",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Auszubildende"
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"Anzeigevariante5": {
			"docs": {
				"variationName": "Anzeigevariante 5= 1 Column Layout"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-one-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-9 Links, einspaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "7 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "8 Lorem ipsum dolor",
										"linkHref": "#"
									}
								}
							]
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"Anzeigevariante6": {
			"docs": {
				"variationName": "Anzeigevariante 6 1-spaltig / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links"
			},
			"settings": {
				"linkListContextClass": "default",
				"linkListClasses": false,
				"columnClass": "is-with-categories is-one-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, einspaltig)",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exerco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis noo",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-download"
									},
									"content": {
										"linkText": "6 Ut enim ad minim veniam",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Professuren"
						}
					},
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, quis n",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Ut enim ad minim",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Verwaltungspersonal"
						}
					},
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Ut enim ad minim veniam, ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Ut enim ad minim veniam, quis nostrud exercitation",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Ut enim ad minim veniam",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Auszubildende"
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"rte": {
			"docs": {
				"variationName": "RTE-Anzeigevariante 1= 3 Column Layout"
			},
			"settings": {
				"linkListContextClass": "rte",
				"linkListClasses": false,
				"columnClass": "is-three-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-9 Links, dreispaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Loremfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdff ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "7 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "8 Lorem ipsum dolor",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Auszubildende"
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		},
		"rte2": {
			"docs": {
				"variationName": "Anzeigevariante 2= 2 Column Layout"
			},
			"settings": {
				"linkListContextClass": "rte",
				"linkListClasses": false,
				"columnClass": "is-two-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-6 Links, zweispaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": "is-external"
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								}
							]
						}
					}
				]
			}
		},
		"rte3": {
			"docs": {
				"variationName": "RTE-Anzeigevariante 1= 1 Column Layout"
			},
			"settings": {
				"linkListContextClass": "rte",
				"linkListClasses": false,
				"columnClass": "is-one-column"
			},
			"content": {
				"mainHeadline": "Linkliste (H2, Introtext, 1-9 Links, einspaltig)",
				"description":
					"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.",
				"cols": [
					{
						"content": {
							"links": [
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "1 Loremfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdff ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "2 Ut enim ad minim veniam, quis nostrud exercitation ullamco",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "3 Duis aute irure dolor in reprehenderit in",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "4 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "5 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "6 Lorem ipsum ",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "7 Lorem ipsum dolor sit amet, consectetur adipiscing elit",
										"linkHref": "#"
									}
								},
								{
									"settings": {
										"linkClass": ""
									},
									"content": {
										"linkText": "8 Lorem ipsum dolor",
										"linkHref": "#"
									}
								}
							],
							"categoryTitle": "Auszubildende"
						}
					}
				],
				"linkButton": {
					"settings": {
						"linkButtonContextClass": "default",
						"linkButtonClasses": "link-list__cta"
					},
					"content": {
						"linkHref": "#",
						"linkContent": "Alle Stellenangebote"
					}
				}
			}
		}
	}
}

Styles

link-list.scss

/* ===================================================
component: link-list
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-link-list"] {

	.link-list__cols-wrapper {
		// modifier
		&.is-one-column {
			.link-list__list-item {
				@include bp($bp-tablet-p) {
					flex: 0 0 100%;
					margin-right: 0;

					&:nth-child(even) {
						margin-right: 0;
					}
				}

				@include print() {
					flex: 0 0 100%;
					margin-right: 0;

					&:nth-child(even) {
						margin-right: 0;
					}
				}
			}
		}
		&.is-two-column {

			.link-list__list-item {
				@include bp($bp-tablet-p) {
					flex: 0 0 45%;
					margin-right: 10%;

					&:nth-child(-n + 2) {
						border-top: none;
					}

					&:nth-child(even) {
						margin-right: 0;
					}
				}

				@include print() {
					flex: 0 0 45%;
					margin-right: 10%;

					&:nth-child(-n + 2) {
						border-top: none;
					}

					&:nth-child(even) {
						margin-right: 0;
					}
				}
			}
		}

		// modifier
		&.is-three-column {

			.link-list__list-item {
				@include bp($bp-tablet-p) {
					flex: 0 0 30%;
					margin-right: 5%;

					&:nth-child(3n + 3) {
						margin-right: 0;
					}

					&:nth-child(-n + 3) {
						border-top: none;
					}
				}

				@include print() {
					flex: 0 0 30%;
					margin-right: 5%;

					&:nth-child(3n + 3) {
						margin-right: 0;
					}

					&:nth-child(-n + 3) {
						border-top: none;
					}
				}
			}
		}

		&.is-with-categories {
			flex-direction: column;

			.link-list__list {
				margin-bottom: 20px;

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

	.link-list__category-and-list {
		@include bp($bp-tablet-p) {
			padding: 40px 0 0;
		}
	}

	.link-list__category-headline {
		@include headline-h3-styles();

		color: $color-dark;
		font-family: $font-bold;
		font-weight: 700;

		margin-bottom: 0;

		@include bp($bp-tablet-p) {
			margin-bottom: 0;
		}

		@include bp($bp-desktop-m) {
			margin-bottom: 0;
		}
	}

	.link-list__list {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;

		@include bp($bp-tablet-p) {
			flex-direction: row;
		}

		@include print() {
			flex-direction: row;
		}
	}

	.link-list__list-item {
		border-top: 1px solid $color-gray-border;

		&:nth-child(1) {
			border-top: none;
		}

		&:hover {

			.link-list__link {
				color: $color-dark;

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

					transform: translateX(5px);
				}

				&.is-external {

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

				&.is-download {

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

	.link-list__link {
		text-decoration: none;
		color: $color-green;
		font-family: $font-bold;
		display: block;
		position: relative;
		transition: color $animation-duration-std $animation-easing-std;
		overflow: hidden;
		text-overflow: ellipsis;

		@include print() {
			text-decoration: underline !important;
			padding-left: 0px !important;
		}

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

			left: 0;
			transition: transform $animation-duration-std $animation-easing-std;

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

		&.is-external {

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

		&.is-download {

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

	.link-list__cta {
		position: absolute;
		right: 0;
		bottom: -47px;

		@include bp($bp-tablet-p) {
			bottom: -67px;
		}
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-link-list--default {

	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;
	}

	.link-list__main-headline {
		@include headline-h2-styles();

		margin-bottom: 30px;

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

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

	.link-list__container {
		padding-bottom: 30px;
		position: relative;

		@include bp($bp-tablet-p) {
			padding-bottom: 40px;
		}
	}

	.link-list__paragraph-content {
		font-size: 1.5rem;
		line-height: (22/15);
		letter-spacing: .025rem;
		padding-bottom: 40px;
		color: $color-dark;

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (24/16);
			letter-spacing: .025rem;
		}
	}

	.link-list__show-linkbutton {
		margin-bottom: 80px;
		border-bottom: 1px solid $color-gray-border;
	}

	.link-list__link {
		padding: 10px 0 10px 30px;
		font-size: 1.5rem;
		line-height: (22/15);

		@include bp($bp-tablet-p) {
			font-size: 1.6rem;
			line-height: (24/16);
			padding: 20px 0 20px 30px;
		}

		&::before {
			top: 13px;

			@include bp($bp-tablet-p) {
				top: 23px;
			}
		}
	}

}

.c-link-list--rte {

	margin-bottom: 15px;

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

	.link-list__paragraph-content {
		@include content-p-styles();
	}

	.link-list__main-headline,
	.link-list__category-headline,
	ul.link-list__list {
		width: 100%;
		margin-left: 0;
		flex: 0 0 100%;
	}

	ul.link-list__list {
		margin-bottom: 0;
		margin-top: 0;
	}

	li.link-list__list-item {
		padding-left: 0;
		margin-bottom: 0;
		margin-top: 0;
		text-overflow: ellipsis;
		overflow: hidden;

		&::before {
			display: none;
		}

	}

	.link-list__show-linkbutton {
		position: relative;
		margin-bottom: 90px;
		padding-bottom: 10px;
		border-bottom: 1px solid $color-gray-border;

		@include bp($bp-tablet-p) {
			margin-bottom: 120px;
			padding-bottom: 20px;
		}
	}

	.link-list__link {
		padding: 10px 0 10px 25px;
		font-size: 1.5rem;
		line-height: (22/15);

		@include bp($bp-desktop-m) {
			padding: 20px 0 20px 25px;
			font-size: 1.6rem;
			line-height: (24/16);
		}

		&::before {
			top: 13px;

			@include bp($bp-desktop-m) {
				top: 23px;
			}
		}

		&.is-external,
		&.is-download {

			&::before {
				top: 13px;
				position: absolute;
				margin: 0px;

				@include bp($bp-desktop-m) {
					top: 23px;
				}
			}
		}
	}

}

HTML Output

Anzeigevariante 1= 3 Column Layout

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-9 Links, dreispaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-three-column">
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">7 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">8 Lorem ipsum dolor</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Anzeigevariante 2= 2 Column Layout

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-6 Links, zweispaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-two-column">
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Anzeigevariante 3= nur mit H2, 1-9 Links

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, 1-9 Links, dreispaltig)</h2>
	<div class="link-list__container ">
		<div class="link-list__cols-wrapper is-three-column">
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">7 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">8 Lorem ipsum dolor</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">9 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Anzeigevariante 4 / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, dreispaltig)</h2>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-with-categories is-three-column">
			<h3 class="link-list__category-headline">Professuren</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">2 Ut enim ad minim veniam, quis nostrud exerco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis noo</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-download" href="#">6 Ut enim ad minim veniam</a>
				</li>
			</ul>
			<h3 class="link-list__category-headline">Verwaltungspersonal</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, quis n</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Ut enim ad minim</a>
				</li>
			</ul>
			<h3 class="link-list__category-headline">Auszubildende</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Ut enim ad minim veniam</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Anzeigevariante 5= 1 Column Layout

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-9 Links, einspaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-one-column">
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">7 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">8 Lorem ipsum dolor</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Anzeigevariante 6 1-spaltig / Eine H2, 1-n mögliche Linklisten mit einer H3 und 1-6 Links

<div class="c-link-list--default" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, 1-n Linklisten mit H3, 1-6 Links, einspaltig)</h2>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-with-categories is-one-column">
			<h3 class="link-list__category-headline">Professuren</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">2 Ut enim ad minim veniam, quis nostrud exerco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis noo</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-download" href="#">6 Ut enim ad minim veniam</a>
				</li>
			</ul>
			<h3 class="link-list__category-headline">Verwaltungspersonal</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, quis n</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Ut enim ad minim</a>
				</li>
			</ul>
			<h3 class="link-list__category-headline">Auszubildende</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Ut enim ad minim veniam, </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Ut enim ad minim veniam, quis nostrud exercitation</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Ut enim ad minim veniam</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

RTE-Anzeigevariante 1= 3 Column Layout

<div class="c-link-list--rte" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-9 Links, dreispaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-three-column">
			<h3 class="link-list__category-headline">Auszubildende</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Loremfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdff ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">7 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">8 Lorem ipsum dolor</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Anzeigevariante 2= 2 Column Layout

<div class="c-link-list--rte" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-6 Links, zweispaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container ">
		<div class="link-list__cols-wrapper is-two-column">
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link is-external" href="#">6 Lorem ipsum </a>
				</li>
			</ul>
		</div>
	</div>
</div>

RTE-Anzeigevariante 1= 1 Column Layout

<div class="c-link-list--rte" data-css="c-link-list">
	<h2 class="link-list__main-headline">Linkliste (H2, Introtext, 1-9 Links, einspaltig)</h2>
	<p class="link-list__paragraph-content">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
	<div class="link-list__container link-list__show-linkbutton">
		<div class="link-list__cols-wrapper is-one-column">
			<h3 class="link-list__category-headline">Auszubildende</h3>
			<ul class="link-list__list">
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">1 Loremfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdff ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">2 Ut enim ad minim veniam, quis nostrud exercitation ullamco</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">3 Duis aute irure dolor in reprehenderit in</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">4 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">5 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">6 Lorem ipsum </a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">7 Lorem ipsum dolor sit amet, consectetur adipiscing elit</a>
				</li>
				<li class="link-list__list-item">
					<a class="link-list__link " href="#">8 Lorem ipsum dolor</a>
				</li>
			</ul>
		</div>
		<div class="c-link-button--default link-list__cta" data-css="c-link-button">
			<a class="link-button__link" href="#">Alle Stellenangebote</a>
		</div>
	</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link