Přejít k obsahu | Přejít k hlavnímu menu | Přejít k vyhledávání

02.13 Boxy – Články

Zdrojové CSS: /src/css/molecules/box/_article.scss

Řádkový

Popis komponenty

Komponenta článku je pouze .box-article. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--l--12-12">
			<article class="box-article">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/article.jpg" alt="" width="270" height="151">
					</p>
					<p class="box-article__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
					</p>
					<h2 class="box-article__title">Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"</h2>
					<p class="box-article__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/article.jpg" alt="" width="270" height="151">
					</p>
					<p class="box-article__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
						<span class="meta__item">Jméno autora</span>
					</p>
					<h2 class="box-article__title">Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"</h2>
					<p class="box-article__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/article.jpg" alt="" width="270" height="151">
					</p>
					<p class="box-article__meta meta">
						<span class="meta__item font-muni">
							<strong>19.11.2015</strong>
						</span>
					</p>
					<h2 class="box-article__title">Soutěž Pro vodu - úvodní worshop "Od nápadu k realizaci"</h2>
					<p class="box-article__desc">
						Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
					</p>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta článku je pouze .box-article. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px.

Řádkový – mini varianta

Popis komponenty

Komponenta článku je pouze .box-article. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--l--4-12 size--m--1-2">
			<article class="box-article box-article--mini">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/alternative.jpg" alt="" width="135" height="142">
					</p>
					<h2 class="box-article__title">Jak si vybrat studijní program</h2>
					<p class="box-article__desc">
						Praesent nonummy mi in odio. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
					</p>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--4-12 size--m--1-2">
			<article class="box-article box-article--mini">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/alternative.jpg" alt="" width="135" height="142">
					</p>
					<h2 class="box-article__title">Jak si vybrat studijní program</h2>
					<p class="box-article__desc">
						Praesent nonummy mi in odio. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
					</p>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--4-12 size--m--1-2">
			<article class="box-article box-article--mini">
				<a href="#" class="box-article__inner">
					<p class="box-article__img">
						<img src="../img/illust/alternative.jpg" alt="" width="135" height="142">
					</p>
					<h2 class="box-article__title">Jak si vybrat studijní program</h2>
					<p class="box-article__desc">
						Praesent nonummy mi in odio. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
					</p>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta článku je pouze .box-article. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px.

Řádkový - boxový

Popis komponenty

Komponenta článku je pouze .box-article-list. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 600x300 px. Pokud nechceme používat obrázek, pak přidáme modifikátor box-article-list--noimg na box-article-list a odstraníme obrázek s jeho obalem.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list">
				<a href="#" class="box-article-list__inner">
					<p class="box-article-list__img">
						<img src="../img/illust/article-list.jpg" alt="" width="600" height="300">
					</p>
					<div class="box-article-list__content">
						<p class="box-article-list__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-list__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list">
				<a href="#" class="box-article-list__inner">
					<p class="box-article-list__img">
						<img src="../img/illust/article-list.jpg" alt="" width="600" height="300">
					</p>
					<div class="box-article-list__content">
						<p class="box-article-list__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-list__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list box-article-list--noimg">
				<a href="#" class="box-article-list__inner">
					<div class="box-article-list__content">
						<p class="box-article-list__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-list__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list box-article-list--noimg">
				<a href="#" class="box-article-list__inner">
					<div class="box-article-list__content">
						<p class="box-article-list__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-list__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta článku je pouze .box-article-list. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 600x300 px. Pokud nechceme používat obrázek, pak přidáme modifikátor box-article-list--noimg na box-article-list a odstraníme obrázek s jeho obalem.

Řádkový - boxový - special border

Popis komponenty

Komponenta článku je pouze .box-article-list. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 600x300 px. Pokud nechceme používat obrázek, pak přidáme modifikátor box-article-list--noimg na box-article-list a odstraníme obrázek s jeho obalem.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list box-article-list--border">
				<a href="#" class="box-article-list__inner">
					<p class="box-article-list__img">
						<img src="../img/illust/article-list.jpg" alt="" width="600" height="300">
					</p>
					<div class="box-article-list__content">
						<p class="box-article-list__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-list__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta článku je pouze .box-article-list. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 600x300 px. Pokud nechceme používat obrázek, pak přidáme modifikátor box-article-list--noimg na box-article-list a odstraníme obrázek s jeho obalem.

Řádkový - boxový - velký

Popis komponenty

Tato molekula vychází z předchozí molekuly (Řádkový - boxový). Navíc je přidán modifikátor box-article-list--big na elemet .box-article-list, který zvýrazní celý box.

V této molekule by neměl být obrázek větší než 600x500 px.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list box-article-list--big">
				<a href="#" class="box-article-list__inner">
					<p class="box-article-list__img">
						<img src="../img/illust/article-list-big.jpg" alt="" width="600" height="500">
					</p>
					<div class="box-article-list__content">
						<h2 class="box-article-list__title">Studujte na Muni</h2>
						<ul class="icon-ul">
							<li>
								<span class="icon-li icon icon-check-circle"></span>
								Máme nejširší nabídku oborů a kombinací
							</li>
							<li>
								<span class="icon-li icon icon-check-circle"></span>
								Čekají na vás moderní prostory a špičkové vybavení
							</li>
							<li>
								<span class="icon-li icon icon-check-circle"></span>
								Brno je největší studentské město v Česku
							</li>
						</ul>
						<p>
							<span class="btn btn-primary">
								<span>Mám zájem</span>
							</span>
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--l--12-12">
			<article class="box-article-list box-article-list--big">
				<a href="#" class="box-article-list__inner">
					<p class="box-article-list__img">
						<img src="../img/illust/article-list-big.jpg" alt="" width="600" height="500">
					</p>
					<div class="box-article-list__content">
						<h2 class="box-article-list__title">Studujte na Muni</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi enim officiis harum quis nostrum molestias fuga ea illum maiores? Consequuntur soluta quas similique. Dolor facilis, eaque ea omnis sunt rerum.</p>
						<p>
							<span class="btn btn-primary">
								<span>Mám zájem</span>
							</span>
						</p>
					</div>
				</a>
			</article>
		</div>
	</div>
</div>

Tato molekula vychází z předchozí molekuly (Řádkový - boxový). Navíc je přidán modifikátor box-article-list--big na elemet .box-article-list, který zvýrazní celý box.

V této molekule by neměl být obrázek větší než 600x500 px.

Sloupcová

Popis komponenty

Komponenta článku je pouze .box-article-grid. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px. Obrázky v tomto výpise by všechny měly být ve stejném poměru. Pokud nechceme používat obrázek pak přidáme modifikátor box-article-grid--noimg na box-article-grid a odstraníme obrázek s jeho obalem.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid box-article-grid--noimg">
				<a href="#" class="box-article-grid__inner">
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
						<p>
							<span class="btn btn-primary btn-border btn-s">
								<span>Čtěte dál</span>
							</span>
						</p>
					</div>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta článku je pouze .box-article-grid. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 270x270 px. Obrázky v tomto výpise by všechny měly být ve stejném poměru. Pokud nechceme používat obrázek pak přidáme modifikátor box-article-grid--noimg na box-article-grid a odstraníme obrázek s jeho obalem.

Sloupcová – s pozadím

Popis komponenty

Obal s barevným pozadím je potřeba označit ještě také třídou .white.

Ukázka HTML kódu 
<div class="box-bg box-bg--primary white">
	<div class="crossroad-std">
		<div class="grid">
			<div class="grid__cell size--s--1-2 size--l--3-12">
				<article class="box-article-grid">
					<a href="#" class="box-article-grid__inner">
						<p class="box-article-grid__img">
							<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
						</p>
						<div class="box-article-grid__content">
							<p class="box-article-grid__meta meta">
								<span class="meta__item font-muni">
									<strong>19.11.2015</strong>
								</span>
							</p>
							<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						</div>
					</a>
				</article>
			</div>
			<div class="grid__cell size--s--1-2 size--l--3-12">
				<article class="box-article-grid">
					<a href="#" class="box-article-grid__inner">
						<p class="box-article-grid__img">
							<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
						</p>
						<div class="box-article-grid__content">
							<p class="box-article-grid__meta meta">
								<span class="meta__item font-muni">
									<strong>19.11.2015</strong>
								</span>
							</p>
							<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
							<p class="box-article-list__desc">
								Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
							</p>
						</div>
					</a>
				</article>
			</div>
			<div class="grid__cell size--s--1-2 size--l--3-12">
				<article class="box-article-grid box-article-grid--noimg">
					<a href="#" class="box-article-grid__inner">
						<div class="box-article-grid__content">
							<p class="box-article-grid__meta meta">
								<span class="meta__item font-muni">
									<strong>19.11.2015</strong>
								</span>
							</p>
							<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						</div>
					</a>
				</article>
			</div>
			<div class="grid__cell size--s--1-2 size--l--3-12">
				<article class="box-article-grid box-article-grid--noimg">
					<a href="#" class="box-article-grid__inner">
						<div class="box-article-grid__content">
							<p class="box-article-grid__meta meta">
								<span class="meta__item font-muni">
									<strong>19.11.2015</strong>
								</span>
								<span class="meta__item">Jméno autora</span>
							</p>
							<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
							<p class="box-article-list__desc">
								Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
							</p>
						</div>
					</a>
				</article>
			</div>
		</div>
	</div>
</div>

Obal s barevným pozadím je potřeba označit ještě také třídou .white.

Sloupcová - s číslováním

Popis komponenty

Vychází z předchozí komponenty (Sloupcová). Pouze se přidává meta informace s číslovkou.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">1.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">2.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">3.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">4.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">1.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--3-12">
			<article class="box-article-grid">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid-small.jpg" alt="" width="270" height="136">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item bold primary">2.</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--s--1-2 size--l--6-12">
			<article class="box-category box-category--white">
				<a href="#" class="box-category__inner">
					<h2 class="box-category__title">Magisterské studium</h2>
					<p>
						<span class="btn btn-s btn-primary btn-border">
							<span>Čtěte dál</span>
						</span>
					</p>
				</a>
			</article>
		</div>
	</div>
</div>

Vychází z předchozí komponenty (Sloupcová). Pouze se přidává meta informace s číslovkou.

Sloupcová - velká

Popis komponenty

Komponenta vycházející z defaultní sloupcové komponenty. Pouze je na .box-article-grid přidán modifikátor .box-article-grid--big, který zvětší obsah. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 570x570 px. Obrázky v tomto výpise by všechny měly být ve stejném poměru. Pokud nechceme používat obrázek pak přidáme modifikátor box-article-grid--noimg na box-article-grid a odstraníme obrázek s jeho obalem.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--m--2-4 size--l--6-12">
			<article class="box-article-grid box-article-grid--big">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--m--2-4 size--l--6-12">
			<article class="box-article-grid box-article-grid--big">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--m--2-4 size--l--6-12">
			<article class="box-article-grid box-article-grid--big">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
					</p>
					<div class="box-article-grid__content">
						<p class="box-article-grid__meta meta">
							<span class="meta__item font-muni">
								<strong>19.11.2015</strong>
							</span>
							<span class="meta__item">Jméno autora</span>
						</p>
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
					</div>
				</a>
			</article>
		</div>
		<div class="grid__cell size--m--2-4 size--l--6-12">
			<article class="box-article-grid box-article-grid--big">
				<a href="#" class="box-article-grid__inner">
					<p class="box-article-grid__img">
						<img src="../img/illust/article-grid.jpg" alt="" width="570" height="285">
					</p>
					<div class="box-article-grid__content">
						<h2 class="box-article-grid__title">Cena rektora Masarykovy univerzity pro vynikající pedagogy</h2>
						<p class="box-article-list__desc">
							Cílem vyhlašované soutěže o Cenu rektora Masarykovy univerzity pro vynikající pedagogy je ocenit kvalitní pedagogickou činnost zaměstnanců Masarykovy univerzity. Záměrně jsou proto posuzovány pouze pedagogické aktivity nominovaných.
						</p>
						<p>
							<span class="btn btn-primary btn-border btn-s">
								<span>Čtěte dál</span>
							</span>
						</p>
					</div>
				</a>
			</article>
		</div>
	</div>
</div>

Komponenta vycházející z defaultní sloupcové komponenty. Pouze je na .box-article-grid přidán modifikátor .box-article-grid--big, který zvětší obsah. V našem případě ji zanořujeme do molekuly rozcestníku, který slouží k výpisu více vizitek za sebou.

V této molekule by neměl být obrázek větší než 570x570 px. Obrázky v tomto výpise by všechny měly být ve stejném poměru. Pokud nechceme používat obrázek pak přidáme modifikátor box-article-grid--noimg na box-article-grid a odstraníme obrázek s jeho obalem.

Sloupcová - s pozadím obrázků

Popis komponenty

Pokud je v obrázku článku použita průhlednost, případně je vložená ikonka či text, je možné nastavit pozadí obrázku přidáním modifikátoru .box-bg--xyz na .box-article-grid__img.

Ukázka HTML kódu 
<div class="crossroad-std">
	<div class="grid">
		<div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--primary box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--primary box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--muni box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--muni box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--law box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--law box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--med box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--med box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--sci box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--sci box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--fi">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--fi</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--fss box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--fss box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--fsps box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--fsps box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--phil box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--phil box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--ped">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--ped</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--econ box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--econ box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--pharm box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--pharm box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--dark box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--dark box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--color box-bg--color-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--color box-bg--color-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--grey-dark">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--grey-dark</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--grey-light">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--grey-light</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--white">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--white</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--white-border">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--white-border</h2>
			</div>
		</a>
	</article>
</div><div class="grid__cell size--s--1-2 size--l--3-12">
	<article class="box-article-grid">
		<a href="#" class="box-article-grid__inner">
			<div class="box-article-grid__img box-bg--muni-border">
				<div class="font-muni u-mt-30 u-mb-30" style="font-size: 500%">M</div>
			</div>
			<div class="box-article-grid__content">
				<h2 class="box-article-grid__title">box-bg--muni-border</h2>
			</div>
		</a>
	</article>
</div>							</div>
</div>

Pokud je v obrázku článku použita průhlednost, případně je vložená ikonka či text, je možné nastavit pozadí obrázku přidáním modifikátoru .box-bg--xyz na .box-article-grid__img.