02.13 Boxy – Články

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

Řádkový - boxový

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

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.

Sloupcová

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á - velká

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.