25% ZĽAVA NA VŠETKO s kódom "XMAS".

Prihlásiť sa

Správa účtu

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

<a class="btn btn-default btn--block">Block</a>
<a class="btn btn--primary btn--block">Block</a>

Disabled

Button 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>
<a class="btn btn--primary btn--block"><span class="inline-block"><i class="icon icon-home"></i>Icon stick on text</span></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.
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
<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>

Inputy - velikosti

<input class="form-control text" type="text" />
<input class="form-control text text--small" type="text" />
<input class="form-control text text--large" type="text" />

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}

Paginator

{control paginator}

Ikony

icon-._check-cart
icon-._check-chunky
icon-._cross-cart
icon-._info-italic
icon-arrow-back
icon-arrow-crumb
icon-arrow-down
icon-arrow-down-small
icon-arrow-right
icon-arrow-right-small
icon-arrow-sharp-up
icon-autumn
icon-beaker
icon-burger
icon-cart
icon-chat-bubble
icon-check
icon-check-cart
icon-check-chunky
icon-christmas-tree
icon-circle
icon-circle-full
icon-cross
icon-cross-cart
icon-delivery
icon-document
icon-easter
icon-facebook
icon-fb
icon-flame
icon-gift
icon-gplus
icon-heart
icon-heart-full
icon-home
icon-info
icon-info-italic
icon-instagram
icon-key
icon-list
icon-mail
icon-map-pin
icon-orders
icon-palette
icon-pencil
icon-phone
icon-pinterest
icon-print
icon-sale
icon-search
icon-spring
icon-star
icon-summer
icon-time
icon-user
icon-valentines-day
icon-winter
icon-youtube
<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
icon icon-arrow-down icon--after icon--before
<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>
<i class="icon icon-home icon--after icon--before"></i>

Obrázky

Vektory

arrow
arrow View: 0 0 25 25
car
car View: 0 0 54.78 25
cart
cart View: 0 0 26.84 25
clock
clock View: 0 0 25 25
hat
hat View: 0 0 30.53 25
letters
letters View: 0 0 37.98 25
logo
logo View: 0 0 119.36 21.46
logo-full-cz
View: 0 0 327.61 76.11
logo-overene
View: 0 0 593.5 593.4
logo-overene--small
View: 0 0 870 188
logo-overene--white
View: 0 0 594 594
logo-overeno
View: 0 0 450 450
logo-overeno--small
View: 0 0 483 109
logo-overeno--white
View: 0 0 450 450
logo2
View: 0 0 84.2901 97.8735
menu
menu View: 0 0 25 25
nani
kocka_7 View: 0 0 332.87 459
nani2
kocka_11 View: 0 0 345.61 435.78
nani2_winter
kocka_3 View: 0 0 349.54 479.48
nani3
nani3 View: 0 0 362.12 360
nani3_winter
kocka_6 View: 0 0 373.14 444.98
nani4
kocka_8 View: 0 0 461.62 384.74
nani4_winter
kocka_5 View: 0 0 483.28 408.84
nani5
nani5 View: 0 0 287.85 413.4
nani5_winter
kocka_2 View: 0 0 312.84 449.31
nani6
kocka_10 View: 0 0 348.18 439
nani6_winter
kocka_vanoce_10 View: 0 0 348.19 471.38
nani7
kocka_2 View: 0 0 392.19 386.01
nani7_winter
kocka_1 View: 0 0 429.29 417.25
nani8
kocka_12 View: 0 0 348.21 438.8
nani_winter
kocka_4 View: 0 0 326.19 481.87
person
person View: 0 0 25 25
search
search View: 0 0 25 25
star
star View: 0 0 26.2 25

PNG

balikovna

blog

cargus

ceska-posta

comgate

detail-arrow

education

famafutar

fan-courier

faq-bubble

gopay-platby-univ

hr-post

hu-post

lang-cz

lang-gr

lang-hr

lang-hu

lang-lt

lang-pt

lang-ro

lang-si

lang-sk

logo-acs

logo-applepay

logo-boxnow

logo-comgate-si

logo-compar-mobilei

logo-compari

logo-dpd

logo-elta-courier

logo-gls

logo-googlepay

logo-gopay

logo-lietuvos_pastas

logo-mrw

logo-nani

logo-nejlevnejsi-doruceni

logo-omniva

logo-online-prevod

logo-online-prevod-sk

logo-paypal

logo-payu

logo-ppl

logo-skippay

logo-sps

logo-taxydromiki

logo-twisto

logo-ups

logo-venipak

logo-visa-mastercard

logo_Express-One

logo_gpwebpay

overseas-express

payu-platby

si-post

slovenska-posta

twisto

visa-mastercard

zasilkovna

arrow car cart clock hat letters menu kocka_7 kocka_11 kocka_3 nani3 kocka_6 kocka_8 kocka_5 nani5 kocka_2 kocka_10 kocka_vanoce_10 kocka_2 kocka_1 kocka_12 kocka_4