Heading Bold 1

Heading Bold 2

Heading Bold 3

Heading Bold 4

Heading Bold 5
Heading Bold 6

Heading Regular 1

Heading Regular 2

Heading Regular 3

Heading Regular 4

Heading Regular 5
Heading Regular 6

Červené nadpisy 

přidat třídu has-red-headings

Heading Bold 1

Heading Bold 2

Heading Bold 3

Heading Bold 4

Heading Bold 5
Heading Bold 6

Heading Regular 1

Heading Regular 2

Heading Regular 3

Heading Regular 4

Heading Regular 5
Heading Regular 6

Odstavec

Tento text je automaticky omezený na 660 px šířky. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas. Pulvinar mattis nunc sed blandit libero volutpat sed. Mi bibendum neque egestas congue quisque egestas diam. Et netus et malesuada fames ac turpis egestas maecenas. Ultrices sagittis orci a scelerisque purus semper. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Faucibus turpis in eu mi bibendum neque egestas. Nec tincidunt praesent semper feugiat nibh. Sollicitudin nibh sit amet commodo nulla facilisi nullam. Egestas erat imperdiet sed euismod nisi porta lorem. Odio eu feugiat pretium nibh. Mauris in aliquam sem fringilla ut. Fames ac turpis egestas integer eget aliquet nibh. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Massa eget egestas purus viverra accumsan in. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam.

Lorem ipsum dolor sit amet

consectetur adipiscing elit:

  1. sed do eiusmod tempor incididunt
  2. ut labore et dolore magna aliqua.
  3. Pellentesque diam volutpat commodo sed egestas.
  4. Pulvinar mattis nunc sed blandit libero volutpat sed.
  5. Mi bibendum neque egestas congue quisque egestas diam.

Et netus et malesuada fames ac turpis egestas maecenas. Ultrices sagittis orci a scelerisque purus semper. Eget sit amet tellus cras adipiscing enim eu turpis egestas. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Faucibus turpis in eu mi bibendum neque egestas. Nec tincidunt praesent semper feugiat nibh. Sollicitudin nibh sit amet commodo nulla facilisi nullam. Egestas erat imperdiet sed euismod nisi porta lorem. Odio eu feugiat pretium nibh. Mauris in aliquam sem fringilla ut. Fames ac turpis egestas integer eget aliquet nibh. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Massa eget egestas purus viverra accumsan in. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas. Pulvinar mattis nunc sed blandit libero volutpat sed.

Mi bibendum

Neque egestas congue quisque egestas diam. Et netus et malesuada fames ac turpis egestas maecenas. Ultrices sagittis orci a scelerisque purus semper.

  • Eget sit amet tellus cras adipiscing
  • enim eu turpis egestas. Aenean sed adipiscing diam
  • donec adipiscing tristique risus nec. Faucibus turpis in eu mi
  • bibendum neque egestas. Nec tincidunt praesent
  • semper feugiat nibh. Sollicitudin nibh
  • sit amet commodo nulla facilisi nullam.

Egestas erat imperdiet sed euismod nisi porta lorem. Odio eu feugiat pretium nibh. Mauris in aliquam sem fringilla ut. Fames ac turpis egestas integer eget aliquet nibh. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Massa eget egestas purus viverra accumsan in. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam.

Tlačítka

60 px na výšku
50 px na výšku
Solidpixels má ještě 3. typ tlačítka. Přišla mi škoda ho skrývat. Používat se nemusí.

Průhledné tlačítko

Na tlačítko přidejte třídu is-transparent

Pokud mají být tlačítka zarovnaná vedle sebe v hero image a jsou v hero image (úvodní sekce stránek) přidejte jim třídu hero-btn.

Formulář

Speciální pole formuláře

  • možnost 1
  • možnost 2
  • možnost 3
  • možnost 4
  • možnost 5

Citace:

Co o nás říkají
naši hosté?

The DOX Centre for Contemporary Art is 
a multi-functional space created thanks to 
a private initiative through the reconstruction of a former factory in Prague’s Holešovice district.
Client One
The DOX Centre for Contemporary Art is 
a multi-functional space created thanks to 
a private initiative through the reconstruction of a former factory in Prague’s Holešovice district.
Client One
The DOX Centre for Contemporary Art is 
a multi-functional space created thanks to 
a private initiative through the reconstruction of a former factory in Prague’s Holešovice district.
Client One

lišta s akutním upozorněním 

Vložím na konec stránky a přidám mu třídu block-alert. 

Doplněním třídy is-inverse se přebaví lišta do bílé varianty. (box-alert is-inverse).

Kontakty, prvky s okrajem nahoře a dole

3 typy: Text, obrázek s textem, ikona s textem.
Základní modifikátor je třída has-borders

Typ 1: Text

Pavel Antoš
pavel@dox.cz
+420 295 568 119, +420 776 302 003
Pavel Antoš
pavel@dox.cz
+420 295 568 119, +420 776 302 003
Pavel Antoš
pavel@dox.cz
+420 295 568 119, +420 776 302 003

Typ 2: Obrázek s textem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Typ 3: Ikona s textem

Zde jsou určitá omezení. Navíc musí být třída has-image-square. Obrázek by měl být nahráván ideálně s poměrem stran 1:1. 

Lorem ipsum dolor sit amet
consectetur adipiscing elit

Lorem ipsum dolor sit amet
consectetur adipiscing elit

Lorem ipsum dolor sit amet
consectetur adipiscing elit

Has borders test

Do míst, kde tyto čáry nevyhovují lze použít dělící čáry se třídou is-black


V případě, kdy chceme mít všechny boxy s čárami stejně vysoké (po řádkách), musíme na sekci přidat třídy flex-cols a has-borders-fix. To pak předělá technický způsob sloupcování – uživatel/editor nic nepozná, pokud chce mít na desktopu 3 sloupce těchto bloků. 

V dané řádce pak budou všechny bloky stejně vysoké, bude-li v ní alespoň 1 block .has-borders:

Příklad:

Has borders test

Has borders test

row

Has borders test

row
row
row

Has borders test

row

Has borders test

Has borders test

row

Pozor: I tady kde v prostředním sloupci není blok s čárami bude vše stejně vysoké. Jde o technickou limitaci. Takto nepoužívat.

Has borders test

Sekce s poloprůhledným obrázkem na pozadí

Modifikační třída na sekci: section-low-opacity

Sekce s černobílým obrázkem na pozadí

Modifikační třída na sekci: section-desaturate

Sekce s bílým přechodem na pozadí

Modifikační třída na sekci: section-gradient

Kombinace všech 3 tříd na jedné sekci

section-low-opacity, section-desaturate, section-gradient

Sekce s tmavým přechodem na pozadí

Modifikační třída na sekci: section-gradient-black

Oddělovač

Dělící čára může být i přes celou šířku. Modifikašní třída je is-full-width

Posuň mě níže

Do sekce lze přidat tlačítko posuň mě níže. Musí mít třídy action-btn scroll-down.

Tlačítko může stát i samostatně.

This way to get lost

Speciální tlačítko, které je na kraji stránky a má za úkol přimět uživatele skrolovat dále. Třídy dox-arrow-2 rotate-90deg-cw has-border nebo jen get-lost-btn.

Playbutton

Položky výpisu mohou mít playbutton. Na výpis stačí přidat třídu has-play-btn

Young Film Fest

Program 5. ročníku Young Film Festu proběhne online a nabídne již tradičně celoevropskou soutěž Young Audience Award pro mladé diváky ve věku 12–14 let, kteří se na jeden den stanou porotci, zhlédnou tři filmy nominované od European Film Academy a rozhodnou o nejlepším filmu Evropy uplynulého roku.


(S)tisk doby

Pozvání do březnového (S)tisku doby přijali Aneta Zachová (EURACTIV.cz), Jaroslav Spurný (respekt.cz) a Daniel Anýž (Aktuálně.cz). Diskutovat budou o pandemickém vývoji a souvisejících opatřeních i o dalších aktuálních událostech.


SLEDUJEME! dění v Evropském parlamentu

Centrum DOX navázalo spolupráci s Kanceláří Evropského parlamentu v Česku a v rámci úterníku Sledujeme! přibližujeme dění ve Štrasburku a Bruselu. Tentokrát představíme Ivana Davida z frakce Identita a demokracie. Vysíláme živě na našem FB.


Červený box/Box s červeným okrajem

Na widget text přidejte třídu is-red. V případě červeného okraje pak třídu has-border-red

Duis aute irure dolor in reprehenderit in voluptate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline zarovnání textů

Všechny <p> v bloku s třídou is-in-line budou vedle sebe.

Text

Další text

A další text

Akční prvky

První text je kulatý
Druhý hranatý
Když jsou oba
Tak se animují

Výpisy

Základní styl výpisu má třídu dox-entries.

Young Film Fest

Program 5. ročníku Young Film Festu proběhne online a nabídne již tradičně celoevropskou soutěž Young Audience Award pro mladé diváky ve věku 12–14 let, kteří se na jeden den stanou porotci, zhlédnou tři filmy nominované od European Film Academy a rozhodnou o nejlepším filmu Evropy uplynulého roku.


(S)tisk doby

Pozvání do březnového (S)tisku doby přijali Aneta Zachová (EURACTIV.cz), Jaroslav Spurný (respekt.cz) a Daniel Anýž (Aktuálně.cz). Diskutovat budou o pandemickém vývoji a souvisejících opatřeních i o dalších aktuálních událostech.


SLEDUJEME! dění v Evropském parlamentu

Centrum DOX navázalo spolupráci s Kanceláří Evropského parlamentu v Česku a v rámci úterníku Sledujeme! přibližujeme dění ve Štrasburku a Bruselu. Tentokrát představíme Ivana Davida z frakce Identita a demokracie. Vysíláme živě na našem FB.


Výpisy bez anotace

Základní styl výpisu má třídu dox-entries, bez anotace a s menším nadpisem má výpis navíc třídu article-entries.

Young Film Fest

Program 5. ročníku Young Film Festu proběhne online a nabídne již tradičně celoevropskou soutěž Young Audience Award pro mladé diváky ve věku 12–14 let, kteří se na jeden den stanou porotci, zhlédnou tři filmy nominované od European Film Academy a rozhodnou o nejlepším filmu Evropy uplynulého roku.


(S)tisk doby

Pozvání do březnového (S)tisku doby přijali Aneta Zachová (EURACTIV.cz), Jaroslav Spurný (respekt.cz) a Daniel Anýž (Aktuálně.cz). Diskutovat budou o pandemickém vývoji a souvisejících opatřeních i o dalších aktuálních událostech.


SLEDUJEME! dění v Evropském parlamentu

Centrum DOX navázalo spolupráci s Kanceláří Evropského parlamentu v Česku a v rámci úterníku Sledujeme! přibližujeme dění ve Štrasburku a Bruselu. Tentokrát představíme Ivana Davida z frakce Identita a demokracie. Vysíláme živě na našem FB.


Výpisy jako slider

Základní styl výpisu má třídu dox-entries, slider z nich udělá třída is-slider

Young Film Fest

Program 5. ročníku Young Film Festu proběhne online a nabídne již tradičně celoevropskou soutěž Young Audience Award pro mladé diváky ve věku 12–14 let, kteří se na jeden den stanou porotci, zhlédnou tři filmy nominované od European Film Academy a rozhodnou o nejlepším filmu Evropy uplynulého roku.


(S)tisk doby

Pozvání do březnového (S)tisku doby přijali Aneta Zachová (EURACTIV.cz), Jaroslav Spurný (respekt.cz) a Daniel Anýž (Aktuálně.cz). Diskutovat budou o pandemickém vývoji a souvisejících opatřeních i o dalších aktuálních událostech.


SLEDUJEME! dění v Evropském parlamentu

Centrum DOX navázalo spolupráci s Kanceláří Evropského parlamentu v Česku a v rámci úterníku Sledujeme! přibližujeme dění ve Štrasburku a Bruselu. Tentokrát představíme Ivana Davida z frakce Identita a demokracie. Vysíláme živě na našem FB.


Tomáš Jamník, Josef Špaček

V rámci 16. ročníku mezinárodního hudebního festivalu Americké jaro vystoupí v multifunkčním sále DOX+ na společném koncertu houslista Josef Špaček a violoncellista Tomáš Jamník. Spojení dvou výrazných talentů mladé generace slibuje mimořádný hudební zážitek.


Jak zní svět

Přemýšleli jste někdy nad tím, jak zní svět? Jak můžete s pomocí slov malovat obrazy a propisovat je do své fantazie, spojit je se svými pocity? Online program tvořivě pracuje s jazykem, hraje si se slovy, objevuje a zkoumá jejich možnosti.


Storybox

K výstavě Fenomeander, která v DOXu oslavuje 25 let nakladatelství Meander, nabízíme online rodinnou dílnu pro rodiče s dětmi od 5 let, která využije metodiku Narrative4 a koncept „radikální empatie“ – sdílení příběhů prostřednictvím vyprávění a jejich převyprávění druhou osobou.


#Datamaze: AI & syntetické obrazy

Vývoj umělé inteligence postupuje rychle vpřed – máme k dispozici tzv. neuronové sítě schopné generovat fotorealistické lidské tváře, zvířata, objekty či přírodní scenerie. Workshop je zaměřen na posilování kritického myšlení o nejnovějších technologiích.



Útočiště

Vydávají se na cestu. Ze strachu. Bez záruk. Cesty tří lidí se protnou na útěku. Poutáni k sobě navzájem překonávají území úzkosti, odvahy, selhávání a soucitu. Hledají útočiště ve světě, který o ně nestojí.


#Datamaze: Personal Data & Political Influence

Možná jste již slyšeli, že politické reklamy využívají tzv. mikrocílení. Co to znamená? Varoon Bashyakarla vám v rámci svého workshopu představí různé způsoby, jakými se sbírají, analyzují a využívají osobní údaje pro politický marketing.


Sociální sítě

Třída na bloku ikony sítí .dox-share-icons, gplus se mění na tripadvisor a flicker na vimeo

Odkaz jako kotva

  1. U sekce, kam má odkaz doscrollovat vyplnit ID v Nastavení > Pokročilé 
  2. U text u nebo tlačítka vytvořit odkaz a vybrat ze seznamu kotvu např. Rodiče a děti#program (kotva)

Odskočený sloupec textu 

Pokud se na události stane, že druhý sloupec s textem odksočí od prvního červeného, stačí na odskočený příidat třídu no-pt a on se srovná.

Odkaz na vimeo do popupu

  1. Odkaz musí být ve tvaru "https://player.vimeo.com/video/336311745?autoplay=1&loop=1"
  2. Číslo "336311745" je ID videa, které lze vyčíst z url adresy pro přehání videa https://vimeo.com/333189316

Mapa do čtverce

Třída is-square