Styleguide custom prvků
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Infoboxy
Hlavní třída: infobox
Varianty: default (zelený), is-blue, is-orange
Jak to funguje?
1. Vždy je vidět jen obrázek a nadpis
2. Po najetí/focusu na prvek se zobrazí další text
3. Má li obrázek nastavené a zapnuté tlačítko, zobrazí se pod textem a nadpisem.
4. Obrázky infoboxů vedle sebe by měly mít vždy stejbnou výšku.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Infoboxy v sekci
Vše je stejné jako v případě samotného infoboxu + platí rozšiřující:
1. Na sekci je třída infobox-section
2. Pokud chci nějaký infobox ztmavit, přidám mu třídu is-darker. Pokud mám nastavenou barevnou variantu, budou pak třídy vypadat takto: infobox is-blue is-darker.
3. V dané sekci si nelze moc vymýšlet, nemusí zde fungovat všechen obsah.
Naše projekty mají přesah
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Nadpis
Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat. Aenean lacinia bibendum nulla.
Badge s obsahem
Inline badge
Pokoj
Volný pokoj
Rezervovaný pokoj
Ikonky s textem
Základní třída je icon-link. Obrázek pak definuje třída další, která se liší podle záměru: file, email, favourite. Na pravou stranu se ikona dostane po přidání třídy is-on-right. Všechny třídy se musí přidávat na odkaz přímo.
Formuláře
Typ 1 - řádková varianta
Na formuláři je třída field-lines.
Načítání čísel
70
bytů
200 m
na MHD
100
parkovacích míst
2021
k nastěhování
Timeline
Body timeline musí být v samostatné sekci.
Zahájení prodeje
listopad 2018
Zahájení stavby
leden 2019
Hrubá stavba
leden 2020
Vnitřní omítky
?
Kolaudace
?
Nastěhování
březen 2021
Výchozí a na detailu projektu používaný napříč webem je typ 1.
Další typy (druhý a třetí box) lze ale také použít.
Mapa s body na mapě
Širší sloupec
Na sekci přidat třídu is-wider.
Kontaktní obrázek
Soused Plechatý
Soused Plechatý
Soused Plechatý
Kruhová maska na obrázku
Obrázek musí mít poměr stran 1:1
Ceník s řádky
Název položky
Popis položky
199 Kč
Název položky
Popis položky
199 Kč
Název položky
Popis položky
199 Kč
Tmavé řádky
Každá řádka vytvořená v LB je v této sekci tmavá. Barva řádek je buď tmavá nebo světlá. Kombinace v sekcích není možná.
Řádek 2
Světlé řádky
Každá řádka vytvořená v LB je v této sekci tmavá. Barva řádek je buď tmavá nebo světlá. Kombinace v sekcích není možná.
Řádek 2
Flex cols: by-three
Zajistí lepší zalamování sloupců na mobilu/tabletu.
Flex cols: by-two
Zajistí lepší zalamování sloupců na mobilu/tabletu.
Kompaktní řádky u <p>
Mezery mezi
normálním textem jsou zmenšeny
aby byl výsledek více kompaktní.
Obrázek Karta s pozadím
Třída: has-background (bílá)
Varianty: has-background-dark
Nabízíme také komerční
prostory