dep-bus-soldep-designdep-developmentdep-marketingdep-partner-soldep-soft-sol
Náš Ježíšek ještě objednávky přijímá! Pokud objednáte do zítra, měl by ještě stihnout dárek doručit.

Přihlásit se

Správa účtu

Odhlásit se

Styleguide

Barvy

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

Boxy

Border box
Small radius
Normal radius
Large radius
<div class="colorbox--white border">Border box</div>
<div class="colorbox--black radius--small">Border box with small radius</div>
<div class="colorbox--black radius">Border box with normal radius</div>
<div class="colorbox--black 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

H3 Nadpis

H4 Nadpis

H5 Nadpis
H6 Nadpis

Bigger text

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.

Smaller text

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.

<h1>H1 Nadpis</h1>
<p>Lorem ipsum dolor sit amet, consectetur <i>adipisicing elit</i>, sed do eiusmod <strong>tempor</strong> incididunt <b>ut labore et</b> dolore magna aliqua. Ut enim ad minim <a href="">elit</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>H2 Nadpis</h2>
<h3>H3 Nadpis</h3>
<h4>H4 Nadpis</h4>
<h5>H5 Nadpis</h5>
<h6>H6 Nadpis</h6>

<h3>Bigger text</h3>
<p class="large">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.</p>
<h3>Smaller text</h3>
<p class="small">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.</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">
    <tr>
        <th>Table Header 1</th>
        <th>Table Header 2</th>
    </tr>

    <tr>
        <td>Table cell 1</td>
        <td>Table cell 2</td>
    </tr>
    <tr>
        <td>Table cell 3</td>
        <td>Table cell 4</td>
    </tr>
    <tr>
        <td>Table cell 5</td>
        <td>Table cell 6</td>
    </tr>
    <tr>
        <td>Table cell 7</td>
        <td>Table cell 8</td>
    </tr>
</table>

Ikony

icon-arrow-back
icon-arrow-crumb
icon-arrow-down
icon-arrow-down-small
icon-arrow-right
icon-arrow-right-small
icon-burger
icon-cart
icon-chat-bubble
icon-check
icon-circle
icon-circle-full
icon-cross
icon-delivery
icon-document
icon-fb
icon-home
icon-info
icon-list
icon-mail
icon-map-pin
icon-pencil
icon-phone
icon-print
icon-search
icon-time
icon-user
<span class="sg-icon-wrap">
    <i class="icon icon-@icon"></i> <span>icon</span>
</span>

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>

Buttons

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

Velikosti

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

Reset

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

Toggle

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

Disabled

Button disabled
<a class="btn btn--primary btn--disabled">Button 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>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipisicing elit</li>
    <li>quis nostrud exercitation</li>
</ul>

Stylovaný seznam

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

Stylovaný seznam - vlastní ikony

  • Lorem ipsum dolor sit amet
  • consectetur adipisicing elit
  • consectetur adipisicing elit
  • quis nostrud exercitation

Stylovaný seznam s odstavcem

  • consectetur adipisicing elit
  • consectetur adipisicing elit

  • consectetur adipisicing elit
  • consectetur adipisicing elit
<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>

<ul class="ul--myicon ul--indent">
    <li><i class="icon icon-mail"></i>consectetur adipisicing elit</li>
    <li>consectetur adipisicing elit</li>
</ul>

<ul class="ul--myicon ul--indent ul--indent--large">
    <li><i class="icon icon-mail icon--large"></i>consectetur adipisicing elit</li>
    <li>consectetur adipisicing elit</li>
</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>Lorem ipsum dolor sit amet</li>
    <li>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.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</li>
</ol>

Vertikální seznam

  • Moje objednávky
  • Změnit osobní informace
  • Změnit heslo
  • Odhlásit se
<ul class="ul--vertical">
    <li>Moje objednávky</li>
    <li>Změnit osobní informace</li>
    <li><a>Změnit heslo</a></li>
    <li><i class="icon icon-cross"></i>Odhlásit se</li>
</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
  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4
<div class="tabs--default tabs--fake">
    <div class="tab-label tab-label--active">{_'Tab 1'}</div>
    <div class="tab-label">{_'Tab 2'}</div>
    <div class="tab-label">{_'Tab 3'}</div>
    <div class="tab-label">{_'Tab 4'}</div>
</div>

<div class="clear-20"></div>

<ul class="tabs--default tabs--fake">
    <li class="tab-label">{_'Tab 1'}</li>
    <li class="tab-label">{_'Tab 2'}</li>
    <li class="tab-label tab-label--active">{_'Tab 3'}</li>
    <li class="tab-label">{_'Tab 4'}</li>
</ul>

Formuláře

Osobní údaje
Založení nového účtu
 
 
 
{control loginForm}

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="col-xs-12 col-sm-6 col-md-4">
    <div class="input-box">
        <input type="radio" name="styleguide-radio" id="radio-1" class="input-box-input" checked="checked">
        <label for="radio-1" class="input-box-label">
            <span>{_'Radio'}</span>
        </label>
    </div>
</div>

Selectbox

<select>
    <option selected>{_'Selectbox'}</option>
    <option>{_'Option 2'}</option>
    <option>{_'Option 3'}</option>
</select>

Komponenty

Breadcrumbs

{control breadcrumb}
Nahoru

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