02.11 Boxy – Vizitky

Výchozí molekula pro zobrazení konktaktu. Obrázek by neměl být větší než 210x260 px

Tato molekula využívá atomy ikonek a odkazů.

Vychází z defaultní molekuly, nicméně přidáváme třídu .box-vcard--noborder.

Tato molekula využívá atomy ikonek a odkazů.

Vychází z defaultní molekuly – pouze je přidán modifikátor box-vcard--noimg na box-vcard a odstranit obrázek s jeho obalem z html. Tím se box roztáhne na celou šířku a nebude držet místo pro obrázek.

Vychází z defaultní molekuly – pouze je vložen menší obrázek. Vizitka se přizpůsobí automaticky.

Ukázka formátování obsahu pomocí atomu gridu

Zmenšené vizitky. Lze je vytvořit modifikátorem box-vcard--simple nebo box-vcard--compact na .box-vcard a úpravou vnitřního HTML. Rozdíl mezi těmito dvěma modifikátory je pouze ve velikosti obsahu, kdy compact je menší (v našem případě jsou to ty příklady napravo).

Obrázek by neměl být větší než 105x135 px. Pokud nechceme, aby byla vizitka odkazem, pak .box-vcard__inner vytvoříme pomocí elementu div, v opačném případně jej uděláme pomocí elementu a.

Pro vizitku bez obrázku je třeba přidat modifikátor box-vcard--noimg na box-vcard a odstranit obrázek s jeho obalem z html. Tím se box roztáhne na celou šířku a nebude držet místo pro obrázek.

Na této komponentě také můžeme využít srovnávání výšek pomocí JavaScriptu. Stačí na potřebné elementy přidat obecnou třídu .match-height, jako je tomu níže na ukázce.

Molekulu jsme pro lepší výpis zkombinovali s molekulou rozcestníku. Slouží k výpisu více vizitek za sebou.

Defaultně má fotka šířku 105px, ale je možné vložit i větší. Na div.box-vcard__img je pak potřeba ještě přidat třídu .box-vcard__img--autosize.

Pro případ, kdy viziky vypadají lépe bez ohraničení, např. pro kulatou fotku.

Do vizitky je v tomto případě potřeba vložit čtvercovou fotku. Pokud je fotka obdélníková, místo kruhu bude ovál, což není žádoucí.

Vypis menších ikonek. Pokud chceme použít řádek bez obrázku pak vložíme modifikátor box-vcards-list__item--noimg na .box-vcards-list__item. Obrázek by neměl být větší než 70x90 px.

Molekuly jsme umístili do gridu pro ušetření místa.

Výpis může být také statický (nebude odkazovat na detail osoby). Stačí z a.box-vcards-list__inner udělat element div.

Vychází z různých typů vizitek v kombinaci s molekulou rozcestníku. Slouží k výpisu více vizitek za sebou.