02.13 Boxy – Články

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.

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.

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.

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.

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.

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.

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

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

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.

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.