Styleguide custom prvků

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.




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.

  • Možnost 1
  • Možnost 2
  • Možnost 3
  • Açaí
  • Apple.
  • Akee.
  • Apricot.
  • Avocado.
  • Banana.
  • Bilberry.
  • Blackberry.
Ukázka synchronizace s inputy:

Typ 2 - obdélníková varianta

  • Možnost 1
  • Možnost 2
  • Možnost 3
  • Açaí
  • Apple.
  • Akee.
  • Apricot.
  • Avocado.
  • Banana.
  • Bilberry.
  • Blackberry.

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


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

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