02.20 Pro neslyšící

Výchozí molekula s obsahem pro neslyšící. Pro tuto molekulu slouží div.box-deaf

Jednotlivé části, které mají audio alternativu, se obalí do .box-deaf a hned na začátek se vloží odkaz pro přehrátí .box-deaf__link. Na tento element je potřeba přidat třídu .js-lightbox a dát mu atribut [data-lightbox-drag]=true, aby bylo možné s dialogem posouvat. Pro každý odkaz na přehrátí je také potřeba připravit příslušný lightbox s videem a na jeho id odkázat z [href] atributu. Video v lightboxu by mělo mít atribut [preload]=none, aby se načetlo až po otevření lightboxu.

V poslední řadě se někde umístí ikonka a.box-deaf__toggle, na kterou je navázán JavaScript, který zobrazuje ikonky s alternativním obsahem. Tato ikonka se zobrazuje fixně v pravém dolním rohu.

Volitelně je také možné přidat odkaz pro aktivaci do záhlaví. Viz html kód záhlaví této stránky.

Varianta, která v lightboxu u videa obsahuje odkazy, které se postupně objevují v průběhu přehrávání videa.

Do lightboxu se v tomto případě vedle videa (v gridu) vloží element ul.box-deaf-links__list.crossroad-links__list a do něho jednotlivé odkazy li.box-deaf-links__link.crossroad-links__item, které mají v atributu [data-time] obsažený údaj o čase, kdy se mají objevit, ve formátu hh:mm:ss.