Styleguide custom prvků
HABITAT
Budoucnost je tu doma
Nízkoenergetická čtvrť v Malešicích
Vybarvili jsme kousek Prahy
Objevte bydlení, kde moderní design splývá s přírodou, poskytující nejen komfort, ale i udržitelný životní styl v srdci Malešic.
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.
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
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
Mapa s body na mapě
Širší sloupec
Na sekci přidat třídu is-wider-content.
Kontaktní obrázek
Kruhová maska na obrázku
Obrázek musí mít poměr stran 1:1
![](https://residential.skanska.cz/files/responsive/360/0/cv-novy-ext-noc.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-novy-ext-noc.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-novy-ext-noc.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-novy-ext-noc.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-novy-ext-noc.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-novy-ext-noc.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-novy-ext-den.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-novy-ext-den.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-novy-ext-den.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-novy-ext-den.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-novy-ext-den.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-novy-ext-den.jpg 2600w)
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.
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
Flex cols: by-two
Zajistí lepší zalamování sloupců na mobilu/tabletu.
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
![](https://residential.skanska.cz/files/responsive/360/0/cv-zahrady.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/cv-zahrady.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/cv-zahrady.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/cv-zahrady.jpg 1280w,https://residential.skanska.cz/files/responsive/1920/0/cv-zahrady.jpg 1920w,https://residential.skanska.cz/files/responsive/2600/0/cv-zahrady.jpg 2600w)
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
![](https://residential.skanska.cz/files/responsive/360/0/img-destova-voda-01.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/img-destova-voda-01.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/img-destova-voda-01.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/img-destova-voda-01.jpg 1024w)
Nabízíme také komerční
prostory
![](https://residential.skanska.cz/files/responsive/360/0/img-destova-voda-01.jpg 360w,https://residential.skanska.cz/files/responsive/720/0/img-destova-voda-01.jpg 720w,https://residential.skanska.cz/files/responsive/980/0/img-destova-voda-01.jpg 980w,https://residential.skanska.cz/files/responsive/1280/0/img-destova-voda-01.jpg 1024w)
Nabízíme také komerční
prostory
Stín přes obrázek sekce
.has-shadow přidá vrstvu s tmavým poloprůhledným gradientem nad obrázek sekce