04.02 Rozcestníky – Jednoduché

Zdrojové CSS: /src/css/molecules/crossroad/_links.scss

Defaultní

Popis komponenty

Výchozí molekula pro vypsání jednoduchých odkazů. Slouží pro něj molekula .crossroad-links.

Ukázka HTML kódu
<div class="crossroad-links">
	<h2 class="crossroad-links__title">Studium a akademické záležitosti </h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link link-icon link-icon--after">
				Obecné informace o postupu při uznávání zahraničního vysokoškolského vzdělání a kvalifikace<span class="icon icon-external-link"></span>
			</a>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link link-icon link-icon--after">
						Obecné informace o postupu při uznávání<span class="icon icon-external-link"></span>
					</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
		</li>
	</ul>
</div>

Výchozí molekula pro vypsání jednoduchých odkazů. Slouží pro něj molekula .crossroad-links.

Na tmavém pozadí

Popis komponenty

Výchozí molekula s třídou .white.

Ukázka HTML kódu
<div class="box-bg box-bg--muni box-bg--medium">
	<div class="crossroad-links white">
		<h2 class="crossroad-links__title">Studium a akademické záležitosti </h2>
		<ul class="crossroad-links__list">
			<li class="crossroad-links__item">
				<a href="#" class="crossroad-links__link link-icon link-icon--after">
					Obecné informace o postupu při uznávání zahraničního vysokoškolského vzdělání a kvalifikace<span class="icon icon-external-link"></span>
				</a>
				<ul class="crossroad-links__list">
					<li class="crossroad-links__item">
						<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
					</li>
				</ul>
			</li>
			<li class="crossroad-links__item">
				<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
			</li>
		</ul>
	</div>
</div>

Výchozí molekula s třídou .white.

Zmenšený

Popis komponenty

Výchozí molekula s třídou .small aplikovanou na ul.

Ukázka HTML kódu
<div class="crossroad-links">
	<h2 class="crossroad-links__title">Celý zmenšený</h2>
	<ul class="crossroad-links__list small">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link link-icon link-icon--after">
				Obecné informace o postupu při uznávání zahraničního vysokoškolského vzdělání a kvalifikace<span class="icon icon-external-link"></span>
			</a>
			<ul class="crossroad-links__list small">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link link-icon link-icon--after">
						Obecné informace o postupu při uznávání<span class="icon icon-external-link"></span>
					</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
		</li>
	</ul>
</div>

<div class="crossroad-links">
	<h2 class="crossroad-links__title">Zmenšený jen vnořený</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link link-icon link-icon--after">
				Obecné informace o postupu při uznávání zahraničního vysokoškolského vzdělání a kvalifikace<span class="icon icon-external-link"></span>
			</a>
			<ul class="crossroad-links__list small">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link link-icon link-icon--after">
						Obecné informace o postupu při uznávání<span class="icon icon-external-link"></span>
					</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
		</li>
	</ul>
</div>

Výchozí molekula s třídou .small aplikovanou na ul.

Použití v gridu

Popis komponenty

Toto je ukázka defaultní molekuly v klasickém atomu gridu.

Ukázka HTML kódu
<div class="crossroad-links">
	<h2 class="crossroad-links__title">Studium a akademické záležitosti</h2>
	<div class="grid">
		<div class="grid__cell size--m--2-4 size--l--4-12">
			<h3 class="crossroad-links__subtitle">Studium na MU</h3>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Obecné informace o postupu při uznávání</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</div>
		<div class="grid__cell size--m--2-4 size--l--4-12">
			<h3 class="crossroad-links__subtitle">Uznávání vzdělání</h3>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Obecné informace o postupu při uznávání</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</div>
		<div class="grid__cell size--l--4-12">
			<h3 class="crossroad-links__subtitle">Řízení ke jmenování profesorem a habilitační řízení</h3>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Obecné informace o postupu při uznávání</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze států s uzavřenou ekvivalenční dohodou (Maďarsko, Německo, Polsko, Slovinsko)</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Uznávání vzdělání ze Slovenské republiky</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Přiznávání akademických titulů</a>
				</li>
			</ul>
		</div>
	</div>
</div>

Toto je ukázka defaultní molekuly v klasickém atomu gridu.

Použití ve sloupcích

Popis komponenty

Molekula vycházející z defaultní molekuly, která navíc obsahuje modifikátory na .crossroad-links dle potřeby zarovnání na sloupce:

Desktop
.crossroad-links--size--l--2-12 – Šestiny
.crossroad-links--size--l--3-12 – Čtvrtiny
.crossroad-links--size--l--4-12 – Třetiny
.crossroad-links--size--l--6-12 – Poloviny

Tablet
.crossroad-links--size--m--1-4 – Čtvrtiny
.crossroad-links--size--m--2-4 – Poloviny

Mobile Landscape
.crossroad-links--size--s--1-2 – Poloviny

Mobile Portrait
.crossroad-links--size--xs--1-2 – Poloviny

Funguje na stajném principu jako atom gridu, lze určovat breakpoint (l, m, s, xs), pro který se má použít určitý počet sloupců a počet sloupců dle předchozí definice.

Ukázka HTML kódu
<div class="crossroad-links crossroad-links--size--s--1-2 crossroad-links--size--m--1-4 crossroad-links--size--l--2-12">
	<h2 class="crossroad-links__title">ML: Poloviny, T: Čtvrtiny, D: Šestiny</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prvákoviny</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Příručka pro studenty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Semestr Start</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Doporučený plán studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Interaktivní mapa</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prohlédněte si vedení fakulty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k převzetí hesla u zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prvákoviny</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Příručka pro studenty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Semestr Start</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Doporučený plán studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Interaktivní mapa</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prohlédněte si vedení fakulty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k převzetí hesla u zápisu do studia</a>
		</li>
	</ul>
</div>
<div class="crossroad-links crossroad-links--size--s--1-2 crossroad-links--size--m--2-4 crossroad-links--size--l--3-12">
	<h2 class="crossroad-links__title">ML: Poloviny, T: Poloviny, D: Čtvrtiny</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prvákoviny</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Příručka pro studenty</a>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link link-icon link-icon--after">Obecné informace o postupu při uznávání<span class="icon icon-external-link"></span></a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
			</ul>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Semestr Start</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Doporučený plán studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Interaktivní mapa</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prohlédněte si vedení fakulty</a>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Obecné informace o postupu při uznávání</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
			</ul>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k převzetí hesla u zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">PO a BOZP</a>
			<ul class="crossroad-links__list">
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">Obecné informace o postupu při uznávání</a>
				</li>
				<li class="crossroad-links__item">
					<a href="#" class="crossroad-links__link">zahraničního vysokoškolského vzdělání a kvalifikace</a>
				</li>
			</ul>
		</li>
	</ul>
</div>
<div class="crossroad-links crossroad-links--size--m--2-4 crossroad-links--size--l--4-12">
	<h2 class="crossroad-links__title">T: Poloviny, D: Třetiny</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prvákoviny</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Příručka pro studenty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Semestr Start</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Doporučený plán studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Interaktivní mapa</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prohlédněte si vedení fakulty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k převzetí hesla u zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">PO a BOZP</a>
		</li>
	</ul>
</div>
<div class="crossroad-links crossroad-links--size--m--2-4 crossroad-links--size--l--6-12">
	<h2 class="crossroad-links__title">T: Poloviny, D: Poloviny</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prvákoviny</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Příručka pro studenty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Semestr Start</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Doporučený plán studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Interaktivní mapa</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Prohlédněte si vedení fakulty</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k převzetí hesla u zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Plná moc k zápisu do studia</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">PO a BOZP</a>
		</li>
	</ul>
</div>

Molekula vycházející z defaultní molekuly, která navíc obsahuje modifikátory na .crossroad-links dle potřeby zarovnání na sloupce:

Desktop
.crossroad-links--size--l--2-12 – Šestiny
.crossroad-links--size--l--3-12 – Čtvrtiny
.crossroad-links--size--l--4-12 – Třetiny
.crossroad-links--size--l--6-12 – Poloviny

Tablet
.crossroad-links--size--m--1-4 – Čtvrtiny
.crossroad-links--size--m--2-4 – Poloviny

Mobile Landscape
.crossroad-links--size--s--1-2 – Poloviny

Mobile Portrait
.crossroad-links--size--xs--1-2 – Poloviny

Funguje na stajném principu jako atom gridu, lze určovat breakpoint (l, m, s, xs), pro který se má použít určitý počet sloupců a počet sloupců dle předchozí definice.

Typ 2

Popis komponenty

Molekula vycházející z defaultní molekuly. Odkazy jsou navíc zvýrazněné a mají krátký popisek. O zobrazení se stará modifikátor crossroad-links--type-2 na .crossroad-links. Také lze používat v gridu a ve sloupcích.

Ukázka HTML kódu
<div class="crossroad-links crossroad-links--type-2">
	<h2 class="crossroad-links__title">Bakalářské studia</h2>
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Historie</a>
			<span class="crossroad-links__desc">Světové dějiny v souvislostech</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Dějiny starověku</a>
			<span class="crossroad-links__desc">Antika jako kolébka západní civilizace</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Etnologie</a>
			<span class="crossroad-links__desc">Kultura, folklór, etnika</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Muzeologie</a>
			<span class="crossroad-links__desc">Pečuj o památky a kulturní dědictví</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Pomocné vědy historické</a>
			<span class="crossroad-links__desc">Nikdo netuší, co to je</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Archivnictví</a>
			<span class="crossroad-links__desc">Moderní archívnictví není práce ve skladu</span>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Historie</a>
			<span class="crossroad-links__desc">Světové dějiny v souvislostech</span>
		</li>
	</ul>
</div>

Molekula vycházející z defaultní molekuly. Odkazy jsou navíc zvýrazněné a mají krátký popisek. O zobrazení se stará modifikátor crossroad-links--type-2 na .crossroad-links. Také lze používat v gridu a ve sloupcích.

Typ 3

Popis komponenty

Molekula vycházející z defaultní molekuly. Odkazy jsou za sebe skládané inlinově s odsazením. O zobrazení se stará modifikátor crossroad-links--type-3 na .crossroad-links.

Ukázka HTML kódu
<div class="sk-annot">
	<h2 class="sk-annot__title">Typ 3</h2>
	<p class="sk-annot__desc"><strong>.crossroad-links--type-3</strong> modifikátor. S automatickou šířkou.</p>
<p class="sk-annot__icons"></p></div>
<div class="crossroad-links crossroad-links--type-3 crossroad-links--size--auto">
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">IS MU</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Studijní oddělení</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Harmonogram</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">E-learning</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Knihovna</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Menu item 6</a>
		</li>
	</ul>
</div>

Molekula vycházející z defaultní molekuly. Odkazy jsou za sebe skládané inlinově s odsazením. O zobrazení se stará modifikátor crossroad-links--type-3 na .crossroad-links.

Typ 3

.crossroad-links--type-3 modifikátor. S automatickou šířkou.

Popis komponenty

Molekula vycházející z defaultní molekuly. Odkazy jsou za sebe skládané inlinově s odsazením. O zobrazení se stará modifikátor crossroad-links--type-3 na .crossroad-links.

Ukázka HTML kódu
<div class="sk-annot">
	<h2 class="sk-annot__title">Typ 3</h2>
	<p class="sk-annot__desc"><strong>.crossroad-links--type-3</strong> modifikátor. S automatickou šířkou.</p>
<p class="sk-annot__icons"></p></div>
<div class="crossroad-links crossroad-links--type-3 crossroad-links--size--auto">
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">IS MU</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Studijní oddělení</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Harmonogram</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">E-learning</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Knihovna</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Menu item 6</a>
		</li>
	</ul>
</div>

Typ 4

Popis komponenty

Molekula vycházející z defaultní molekuly. Trošku sofistikovanější molekula s nadpisem, odkazy a popiskem. O zobrazení se stará modifikátor crossroad-links--type-4 na .crossroad-links a jiná struktura HTML.

Ukázka HTML kódu
<div class="crossroad-links crossroad-links--type-4">
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<h2 class="crossroad-links__subtitle"><a href="#">Masarykova univerzita - Wikipedie</a></h2>
			<p class="crossroad-links__links">
				<a href="#">https://cs.wikipedia.org/wiki/Masarykova_univerzita</a>
				<a href="#">Preložiť túto stránku</a>
			</p>
			<p class="crossroad-links__desc">
				<strong>Masarykova univerzita</strong> (latinsky Universitas Masarykiana, v letech 1960–1990 Univerzita Jana Evangelisty Purkyně v Brně) je česká univerzita se sídlem v Brně.
			</p>
		</li>
		<li class="crossroad-links__item">
			<h2 class="crossroad-links__subtitle"><a href="#">Masarykova univerzita - Wikipedie</a></h2>
			<p class="crossroad-links__links">
				<a href="#">https://cs.wikipedia.org/wiki/Masarykova_univerzita</a>
				<a href="#">Preložiť túto stránku</a>
			</p>
			<p class="crossroad-links__desc">
				<strong>Masarykova univerzita</strong> (latinsky Universitas Masarykiana, v letech 1960–1990 Univerzita Jana Evangelisty Purkyně v Brně) je česká univerzita se sídlem v Brně.
			</p>
		</li>
		<li class="crossroad-links__item">
			<h2 class="crossroad-links__subtitle"><a href="#">Masarykova univerzita - Wikipedie</a></h2>
			<p class="crossroad-links__links">
				<a href="#">https://cs.wikipedia.org/wiki/Masarykova_univerzita</a>
				<a href="#">Preložiť túto stránku</a>
			</p>
			<p class="crossroad-links__desc">
				<strong>Masarykova univerzita</strong> (latinsky Universitas Masarykiana, v letech 1960–1990 Univerzita Jana Evangelisty Purkyně v Brně) je česká univerzita se sídlem v Brně.
			</p>
		</li>
		<li class="crossroad-links__item">
			<h2 class="crossroad-links__subtitle"><a href="#">Masarykova univerzita - Wikipedie</a></h2>
			<p class="crossroad-links__links">
				<a href="#">https://cs.wikipedia.org/wiki/Masarykova_univerzita</a>
				<a href="#">Preložiť túto stránku</a>
			</p>
			<p class="crossroad-links__desc">
				<strong>Masarykova univerzita</strong> (latinsky Universitas Masarykiana, v letech 1960–1990 Univerzita Jana Evangelisty Purkyně v Brně) je česká univerzita se sídlem v Brně.
			</p>
		</li>
	</ul>

	<ul class="crossroad-links__list">
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/28983">
	                A European Guidance  Counselling Concept for International Youth Mobility (ERASMUS+ 2014-1-DE02-KA202-001)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/6906-lenka-hlouskova" class="thin">
	                                Mgr. Lenka Hloušková, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            10/2014 — 10/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Evropská unie
	                                /
	Erasmus+ Klíčová akce 2:  Spolupráce na inovacích a výměny osvědčených postupů                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/34665">
	                Adaptace psychologických testů pro online počítačem administrovanou diagnostiku v psychologické praxi a personalistice (MUNI/21/TG53432/2016)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/44276-cenek-sasinka" class="thin">
	                                Mgr. Čeněk Šašinka, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            6/2016 — 12/2017
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Interní projekty CTT                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/30423">
	                Afektivní odpověď na vizuální umění: propojení uměnovědného a neurovědního pohledu (GA15-08577S)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/82366-ladislav-kesner" class="thin">
	                                doc. PhDr. Ladislav Kesner, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2015 — 12/2017
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Grantová agentura ČR
	                                /
	Standardní projekty                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/34547">
	                Aktuální metodologické trendy teatrologického výzkumu (MUNI/A/1130/2015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/16452-david-drozd" class="thin">
	                                doc. MgA. David Drozd, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2016 — 12/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Grantová agentura MU                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/30385">
	                Altajská hypotéza - argumenty, protiargumenty a jejich precizace (GA15-12215S)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/905-vaclav-blazek" class="thin">
	                                prof. RNDr. Václav Blažek, CSc.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2015 — 12/2017
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Grantová agentura ČR
	                                /
	Standardní projekty                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/33482">
	                Antické drama a jeho recepce (MUNI/FR/1174/2015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/2541-daniela-urbanova" class="thin">
	                                doc. PhDr. Daniela Urbanová, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2016 — 12/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Fond rozvoje MU                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/34434">
	                Archeologické terénní prospekce, exkavace, dokumentace a muzejní prezentace V (MUNI/A/0859/2015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/160571-irena-loskotova" class="thin">
	                                PhDr. Irena Loskotová, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2016 — 12/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Grantová agentura MU                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/31684">
	                Better Learning in Schools (NF-CZ07-ICP-3-3292015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/2201-bohumira-lazarova" class="thin">
	                                doc. PhDr. Bohumíra Lazarová, Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            9/2015 — 9/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Ministerstvo školství, mládeže a tělovýchovy ČR
	                                /
	Fondy Norska/Fondy EHP: Program Spolupráce škol a stipendia                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/33479">
	                Biblioterapie v pedagogické praxi (MUNI/FR/1196/2015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/371638-marie-mokra" class="thin">
	                                Mgr. Marie Mokrá
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2016 — 12/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Fond rozvoje MU                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	    <li class="crossroad-links__item">
	        <h2 class="crossroad-links__subtitle">
	            <a href="/vyzkum/projekty/33745">
	                Buddhism: teaching, practice, and rituals (MUNI/FR/1472/2015)
	            </a>
	        </h2>
	        <div class="crossroad-links__desc">
	        <table class="table-vcard">
	            <tbody>
	                <tr>
	                    <th>
	                        Řešitel na MU:
	                    </th>
	                    <td>
	                            <a href="/lide/237920-zuzana-kubovcakova" class="thin">
	                                Mgr. Zuzana Kubovčáková, M.A., Ph.D.
	                            </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Fakulta/Pracoviště MU:
	                    </th>
	                    <td>
	                        <a href="/o-univerzite/o-univerzite/fakulty-a-pracoviste/filozoficka-fakulta" class="thin">
	                            Filozofická fakulta
	                        </a>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Období řešení:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            1/2016 — 12/2016
	                        </div>
	                    </td>
	                </tr>
	                <tr>
	                    <th>
	                        Investor/Program:
	                    </th>
	                    <td>
	                        <div class="thin">
	                            Masarykova univerzita
	                                /
	Fond rozvoje MU                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
	        </div>
	    </li>
	</ul>
</div>

Molekula vycházející z defaultní molekuly. Trošku sofistikovanější molekula s nadpisem, odkazy a popiskem. O zobrazení se stará modifikátor crossroad-links--type-4 na .crossroad-links a jiná struktura HTML.