Styleguide

Barvy

@primary
@secondary
@black
@white
@color
@gray-lighter
@gray-light
@gray
@gray-dark
@gray-darker
<div class="colorbox--@color"></div>

Boxy

Border box
Small radius
Normal radius
Large radius
<div class="colorbox--white border">Border box</div>
<div class="colorbox--primary radius--small">Border box with small radius</div>
<div class="colorbox--primary radius">Border box with normal radius</div>
<div class="colorbox--primary radius--large">Border box with large radius</div>

Texty

H1 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim elit, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H2 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H3 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

H4 Nadpis

H5 Nadpis
H6 Nadpis

Large

Small

<p class="large"></p>
<p class="small"></p>

Oddělovací čára


<hr>

Tabulka

Table Header 1 Table Header 2
Table cell 1 Table cell 2
Table cell 3 Table cell 4
Table cell 5 Table cell 6
Table cell 7 Table cell 8
<table class="table"></table>

Tlačítka

Button Button default Button primary Button secondary
<a class="btn"></a>
<a class="btn btn--default"></a>
<a class="btn btn--primary"></a>
<a class="btn btn--secondary"></a>

Velikosti

Button large Button normal Button small
<a class="btn btn--primary btn--large"></a>
<a class="btn btn--primary"></a>
<a class="btn btn--primary btn--small"></a>

Reset

Všechny by měi vypadat jako odkaz

odkaz Button default Button primary Button secondary
<a>odkaz</a>
<a class="btn btn--default btn--reset"></a>
<a class="btn btn--primary btn--reset"></a>
<a class="btn btn--secondary btn--reset"></a>

Toggle

Toggle
<a class="btn btn--toggle">Toggle</a>

Block

<div class="col-xs-5">
    <a class="btn btn--primary btn--block">Block</a>
</div>

Disabled

Button disabled Button disabled
<a class="btn btn--primary btn--disabled"></a>

Ikony

Button primary Button secondary Button small Button large Button reset
<a class="btn btn--primary"><i class="icon icon-home"></i>Button primary</a>
<a class="btn btn--secondary"><i class="icon icon-home icon--after"></i>Button secondary</a>
<a class="btn btn--primary btn--small"><i class="icon icon-home"></i>Button small</a>
<a class="btn btn--secondary btn--large"><i class="icon icon-home icon--after"></i>Button large</a>
<a class="btn btn--primary btn--reset"><i class="icon icon-home"></i>Button reset</a>

Seznamy

Běžný seznam

  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • quis nostrud exercitation
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Stylovaný seznam

  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • quis nostrud exercitation
<ul class="ul"></ul>

Stylovaný seznam - vlastní ikony

  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • consectetur adipisicing elit
  • quis nostrud exercitation
<ul class="ul--myicon">
    <li><i class="icon icon-home"></i>Lorem ipsum dolor sit amet</li>
    <li><i class="icon icon-mail"></i>consectetur adipisicing elit</li>
    <li>consectetur adipisicing elit</li>
    <li><i class="icon icon-phone"></i>quis nostrud exercitation</li>
</ul>

Stylovaný seznam s odstavcem

  • consectetur adipisicing elit
  • consectetur adipisicing elit

  • consectetur adipisicing elit
  • consectetur adipisicing elit
<ul class="ul--myicon ul--indent"></ul>
<ul class="ul--myicon ul--indent ul--indent--large"></ul>

Číslovaný seznam

  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    1. LoremIpsum
    2. LoremIpsum
    3. LoremIpsum
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
    1. LoremIpsum
    2. LoremIpsum
    3. LoremIpsum
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus explicabo adipisci modi, tenetur labore non tempora cumque soluta ex dolore dolorem maxime impedit reprehenderit blanditiis voluptas voluptatibus neque sapiente ipsam perferendis inventore totam veniam numquam itaque! Quos at, voluptates adipisci porro consectetur dolore quibusdam, hic, ducimus deleniti molestias accusamus nam!
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

Vertikální seznam

  • Moje objednávky
  • Změnit osobní informace
  • Změnit heslo
  • Odhlásit se
<ul class="ul--vertical"></ul>

Záložky

Běžné záložky

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<div class="tabs tabs--default">
    <div class="tabs-tab">
        <input class="tab-radio" type="radio" id="tab-normal-1" name="tab-group-1" checked>
        <label class="tab-label" for="tab-normal-1">Tab 1</label>
        <div class="tab-panel">
            <div class="tab-content">
                Content
            </div>
        </div>
    </div>

    <div class="tabs-tab">
        <input class="tab-radio" type="radio" id="tab-normal-2" name="tab-group-1">
        <label class="tab-label" for="tab-normal-2">Tab 1</label>
        <div class="tab-panel">
            <div class="tab-content">
                Content
            </div>
        </div>
    </div>
</div>

Menší záložky

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipisicing 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.
<div class="tabs tabs--default tabs--small"></div>

Fake záložky

Tab 1
Tab 2
Tab 3
Tab 4
<div class="tabs--default tabs--fake">
    <div class="tab-label tab-label--active"></div>
    <div class="tab-label"></div>
    <div class="tab-label"></div>
    <div class="tab-label"></div>
</div>

Formuláře

Osobní údaje
Založení nového účtu
 
 
 
<div class="form--default form--formatted">
    {control loginForm}
</div>

Input boxy

<div class="input-box">
    <input type="checkbox" id="check-1" class="input-box-input">
    <label for="check-1" class="input-box-label">
        <span>{_'Checkbox'}</span>
    </label>
</div>

<div class="input-box">
    <input type="radio" name="styleguide-radio" id="radio-1" class="input-box-input">
    <label for="radio-1" class="input-box-label">
        <span>{_'Radio'}</span>
    </label>
</div>

Selectbox

JS automaticky obalí všechny select tagy.

<select>
    <option selected></option>
    <option></option>
    <option></option>
</select>

Komponenty

Breadcrumbs

{control breadcrumb}

Ikony

icon-404
icon-500
icon-advisor-chair
icon-advisor-kid-chair
icon-arrow-back
icon-arrow-crumb
icon-arrow-down
icon-arrow-down-small
icon-arrow-right
icon-arrow-right-small
icon-arrow-roght-small
icon-burger
icon-card
icon-cart
icon-chat-bubble
icon-check
icon-checkbox-check
icon-circle
icon-circle-full
icon-contact
icon-cross
icon-darky k valentynu
icon-delivery
icon-document
icon-exclamation
icon-fb
icon-gift
icon-hearth
icon-height
icon-holesovice
icon-home
icon-i_additional
icon-i_arrow
icon-i_arrow-down
icon-i_arrow-up
icon-i_burger
icon-i_cart
icon-i_cart-circle
icon-i_check
icon-i_cross
icon-i_facebook
icon-i_google
icon-i_heart2
icon-i_hearth
icon-i_holubicky
icon-i_info
icon-i_instagram
icon-i_kids
icon-i_kilt
icon-i_mail
icon-i_map-pin
icon-i_massage
icon-i_new
icon-i_no-reserve
icon-i_pencil
icon-i_phone
icon-i_pinterest
icon-i_print
icon-i_priority1
icon-i_priority2
icon-i_priority3
icon-i_priority4
icon-i_private
icon-i_reserve
icon-i_search
icon-i_tip
icon-i_top
icon-i_tree
icon-i_twitter
icon-i_user
icon-i_valentine
icon-i_valid
icon-i_valid-12
icon-i_valid-18
icon-i_valid-8
icon-i_valid-9
icon-i_value
icon-i_web
icon-i_wellness
icon-i_wellness-packs
icon-i_wellness-stay
icon-i_youtube
icon-icon01
icon-icon02
icon-icon03
icon-icon04
icon-info
icon-list
icon-mail
icon-map-pin
icon-masaze
icon-maximus
icon-na-zamku
icon-payment
icon-pencil
icon-person
icon-phone
icon-print
icon-sale
icon-save
icon-search
icon-slider
icon-slider-arrow-left
icon-slider-arrow-right
icon-srdce
icon-star
icon-stock
icon-textarea
icon-thickness
icon-time
icon-twitter
icon-user
icon-view
icon-voucher
icon-vysocany
icon-wide
icon-zoom
<i class="icon icon-@icon"></i>

Použití ikon

icon icon-home
icon icon-home icon--reverse
icon icon-home icon--after
icon icon-home icon--primary
icon icon-home icon--secondary
icon icon-home icon--large
icon icon--primary icon--large icon--reverse icon--after
<i class="icon icon-arrow-right"></i>
<i class="icon icon-arrow-right icon--reverse"></i>
<i class="icon icon-home icon--after"></i>
<i class="icon icon-home icon--primary"></i>
<i class="icon icon-home icon--secondary"></i>
<i class="icon icon-home icon--large"></i>
<i class="icon icon-arrow-down icon--primary icon--large icon--reverse icon--after"></i>

Obrázky

Vektory

logo
logo_prototype View: 0 0 434.6528 66.9042

PNG

benefit

brno-mapa

ceska-posta

dpd

footer-card

gift

lang-cz

lang-sk

logo-gls

logo-gopay-small

nophoto

ppl

praha-mapa

valentyn

Zboží bylo vloženo do košíku

Množství: ks
Varianta:
Cena:

Zboží nebylo vloženo do košíku

Omlouváme se, ale produkty Zóny v pohybu nelze kombinovat s ostatními službami wellness center Infinit. Prosím o vytvoření 2 objednávek.

Děkujeme za pochopení.

Správa účtu