Barvy

<div class="row sg-colors-wrap">
    <div class="color-box color">
        @color
    </div>
</div>

Přechody

<div class="row sg-colors-wrap">
    <div class="col-xs-4">
        <div class="color-box silver">Silver with</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-top">Silver top</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-left">Silver left</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box blue-to-silver">Blue to silver</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box silver-to-blue">Silver to blue</div>
    </div>
    <div class="col-xs-4">
        <div class="color-box blue-to-green">Blue to green</div>
    </div>
    <div class="col-xs-12">
        <div class="color-box silver-blue-silver">Silver blue silver</div>
    </div>
</div>

Boxy

<div class="sg-colors-wrap">
    <div class="color-box white shadow-tb border">Border box with shadow top and bottom</div>
    <div class="color-box white shadow border">Border box with shadow</div>
    <div class="color-box radius black">Border radius black</div>
    <div class="color-box radius-top black">Top border radius black</div>
</div>

Legenda

<div class="legend">Legenda</div>

Ikony

<div class="sg-icons-wrap row">
    <div class='col-xs-4'>
        <div class='icon icon-no-circle icon-@icon'>icon</div>
    </div>
</div>

Použití ikon

<div class="icon icon-arr">{_'Text with icon icon-arr'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-reverse">{_'Text with icon icon-arr icon-reverse'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-after">{_'Text with icon icon-arr after'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle">{_'Text with icon icon-arr no-circle'}</div>
<div class="clear-20"></div>
<div class="icon icon-arr icon-blue">{_'Text with icon icon-arr blue'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-blue icon-no-circle">{_'Text with icon icon-home no-circle blue'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle icon-bigger">{_'Text with icon icon-home bigger no-cirle'}</div>
<div class="clear-20"></div>
<div class="icon icon-home icon-no-circle icon-bigger icon-after">{_'Text with icon icon-home bigger no-cirle'}</div>

Buttony

<div class="btn">{_'Button'}</div>
<div class="btn icon icon-arr">{_'Button icon icon-arr'}</div>
<div class="btn icon icon-arr icon-after">{_'Button icon icon-arr after'}</div>
<div class="btn icon icon-home icon-no-circle">{_'Button icon icon-arr no-circle'}</div>

<div class="btn btn-default">{_'Button default'}</div>
<div class="btn btn-blue">{_'Button blue'}</div>
<div class="btn btn-green">{_'Button green'}</div>

<div class="btn btn-default btn-reset">{_'Button default reset'}</div>
<div class="btn btn-blue btn-reset">{_'Button blue reset'}</div>
<div class="btn btn-green btn-reset">{_'Button green reset'}</div>

TOGGLE

<div class="btn btn-green icon icon-arr icon-no-circle btn-toggle">{_'Button green toggle'}</div>
<div class="btn btn-green icon icon-arr icon-no-circle btn-toggle ac">{_'Button green toggle ac'}</div>

IKONY

<div class="btn icon icon-arr btn-default">{_'Button default icon'}</div>
<div class="btn icon icon-arr btn-blue">{_'Button blue icon'}</div>
<div class="btn icon icon-arr btn-green">{_'Button green icon'}</div>

<div class="btn icon icon-home btn-default icon-no-circle">{_'Btn default icon no-circle'}</div>
<div class="btn icon icon-home btn-blue icon-no-circle">{_'Btn blue icon no-circle'}</div>
<div class="btn icon icon-home btn-green icon-no-circle">{_'Btn green icon no-circle'}</div>

<div class="btn icon icon-arr icon-after btn-default">{_'Button default icon after'}</div>
<div class="btn icon icon-arr icon-after btn-blue">{_'Button blue icon after'}</div>
<div class="btn icon icon-arr icon-after btn-green">{_'Button green icon after'}</div>

<div class="btn icon icon-arr icon-after icon-full btn-default">{_'Btn default icon full after'}</div>
<div class="btn icon icon-arr icon-after icon-full btn-blue">{_'Btn blue icon full after'}</div>
<div class="btn icon icon-arr icon-after icon-full btn-green">{_'Btn green icon full after'}</div>

LARGE

<div class="btn btn-lg btn-default">{_'Button default large'}</div>
<div class="btn btn-lg btn-blue">{_'Button blue large'}</div>
<div class="btn btn-lg btn-green">{_'Button green large'}</div>

<div class="btn btn-lg icon icon-arr btn-default">{_'Button default lg icon'}</div>
<div class="btn btn-lg icon icon-arr btn-blue">{_'Button blue lg icon'}</div>
<div class="btn btn-lg icon icon-arr btn-green">{_'Button green lg icon'}</div>

<div class="btn btn-lg icon icon-arr icon-after btn-default">{_'Btn default lg icon after'}</div>
<div class="btn btn-lg icon icon-arr icon-after btn-blue">{_'Btn blue lg icon after'}</div>
<div class="btn btn-lg icon icon-arr icon-after btn-green">{_'Btn green lg icon after'}</div>

<div class="btn btn-lg icon icon-home btn-default icon-no-circle">{_'Default lg icon no-circle'}</div>
<div class="btn btn-lg icon icon-home btn-blue icon-no-circle">{_'Blue lg icon no-circle'}</div>
<div class="btn btn-lg icon icon-home btn-green icon-no-circle">{_'Green lg icon no-circle'}</div>

SMALL

<div class="btn btn-small btn-default">{_'Button default small'}</div>
<div class="btn btn-small btn-blue">{_'Button blue small'}</div>
<div class="btn btn-small btn-green">{_'Button green small'}</div>

<div class="btn btn-small icon icon-arr btn-default">{_'Button default small icon'}</div>
<div class="btn btn-small icon icon-arr btn-blue">{_'Button blue small icon'}</div>
<div class="btn btn-small icon icon-arr btn-green">{_'Button green small icon'}</div>

<div class="btn btn-small icon icon-arr icon-after btn-default">{_'Btn default small icon after'}</div>
<div class="btn btn-small icon icon-arr icon-after btn-blue">{_'Btn blue small icon after'}</div>
<div class="btn btn-small icon icon-arr icon-after btn-green">{_'Btn green small icon after'}</div>

<div class="btn btn-small icon icon-home btn-default icon-no-circle">{_'Default small icon no-circle'}</div>
<div class="btn btn-small icon icon-home btn-blue icon-no-circle">{_'Blue small icon no-circle'}</div>
<div class="btn btn-small icon icon-home btn-green icon-no-circle">{_'Green small icon no-circle'}</div>

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 veniam, 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.

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.

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.

H4 Nadpis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>H2 Nadpis</h2>
<p>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>
<p>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>H3 Nadpis</h3>
<p>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>
<h4>H4 Nadpis</h4>
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing <a href="">elit</a>, sed do <a href="" class="reverse">eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Bigger text</h3>
<p class="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.</p>
<h3>Smaller text</h3>
<p class="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.</p>

Oddělovací čára

<hr />

Tabulka

<table class="table">
    <tr>
        <th>adf</th>
        <th>sss</th>
        <th>jgsa</th>
    </tr>
    <tr>
        <td>654fasd6f1</td>
        <td>546516</td>
        <td>789125</td>
    </tr>
    <tr>
        <td>qerhrywer</td>
        <td>cbmc</td>
        <td>ityp</td>
    </tr>
    <tr>
        <td>654fasd6f1</td>
        <td>546516</td>
        <td>789125</td>
    </tr>
    <tr>
        <td>qerhrywer</td>
        <td>cbmc</td>
        <td>ityp</td>
    </tr>
</table>

Běžný seznam

• Lorem ipsum dolor sit amet
• 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.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

<ul>
    <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>
</ul>

Stylovaný seznam

• Lorem ipsum dolor sit amet
• 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.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

<ul class="ul">
    <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>
</ul>

Tečkovaný seznam

• Lorem ipsum dolor sit amet
• 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.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

<ul class="ul dot-ul">
    <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>
</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

• Lorem ipsum
• Dolor sit amet
• Ut enim ad minim
• Laboris nisi

<ul class="ul-vertical">
    <li>Lorem ipsum</li>
    <li>Dolor sit amet</li>
    <li><a>Ut enim ad minim</a></li>
    <li>Laboris nisi</li>
</ul>
<div class="clear-20"></div>

Tlačítkový seznam

• Lorem ipsum dolor sit amet
• Lorem sit amet ipsum dolor
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
• Lorem dolor sit amet ipsum
  • Lorem dolor sit amet ipsum
  • Lorem dolor sit amet ipsum
  • Lorem dolor sit amet ipsum

<ul class="full-ul">
    <li><a>Lorem ipsum dolor sit amet</a></li>
    <li><a>Lorem sit amet ipsum dolor</a></li>
    <li><a>Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
    <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a>
        <ul>
            <li><a>Lorem dolor sit amet ipsum</a></li>
            <li><a class="icon icon-star icon-no-circle">Lorem dolor sit amet ipsum</a></li>
            <li><a class="icon icon-star icon-no-circle icon-bigger">Lorem dolor sit amet ipsum</a></li>
        </ul>
    </li>
</ul>

Tlačítkový seznam se šipkou a borderem

• Lorem ipsum dolor sit amet
• Lorem sit amet ipsum dolor
• Lorem dolor sit amet ipsum
  • Lorem ipsum dolor sit amet
  • Lorem sit amet ipsum dolor
  • Lorem dolor sit amet ipsum

<ul class="full-ul with-arrow border-bottom">
    <li><a>Lorem ipsum dolor sit amet</a></li>
    <li><a>Lorem sit amet ipsum dolor</a></li>
    <li><a>Lorem dolor sit amet ipsum</a>
        <ul>
            <li><a>Lorem ipsum dolor sit amet</a></li>
            <li><a>Lorem sit amet ipsum dolor</a></li>
            <li><a>Lorem dolor sit amet ipsum</a></li>
        </ul>
    </li>
</ul>

Běžné záložky

<div class="tabs">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-1" name="tab-group-1" checked>
        <label class="tab-label" for="tab-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-2" name="tab-group-1">
        <label class="tab-label" for="tab-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Modré záložky

<div class="tabs reverse">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-second-1" name="tab-group-2" checked>
        <label class="tab-label" for="tab-second-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-second-2" name="tab-group-2">
        <label class="tab-label" for="tab-second-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Menší záložky

<div class="tabs small">
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-third-1" name="tab-group-3" checked>
        <label class="tab-label" for="tab-third-1">{_'Tab 1'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 1'}
            </div>
        </div> 
    </div>
    <div class="tab">
        <input class="tab-radio" type="radio" id="tab-third-2" name="tab-group-3">
        <label class="tab-label" for="tab-third-2">{_'Tab 2'}</label>
        <div class="tab-panel">
            <div class="tab-content">
                {_'Obsah tabu 2'}
            </div>
        </div> 
    </div>
</div>

Fake záložky

• Tab 1
• Tab 2
• Tab 3
• Tab 4

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

Checkboxy

<div class="row">
    <div class="col-xs-4">
        <div class="checkbox-element"><input type="checkbox"><label>{_'Checkbox'}</label></div>
    </div>
    <div class="col-xs-4">
        <div class="checkbox-element"><input type="checkbox"><label>{_'Checkbox'}</label></div>
    </div>
    <div class="col-xs-4">
        <div class="checkbox-element active"><input type="checkbox" checked><label>{_'Checkbox active'}</label></div>
    </div>
</div>

Selectbox

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

Switch checkbox

<div class="switch-checkbox">
    <input id="checkbox-1" type="checkbox">
    <label for="checkbox-1" data-yes="{_'Ano'}" data-no="{_'Ne'}"></label>
    <span>{_'Switch checkbox'}</span>
</div>

Formulář

<form id="frm-formUser">
    <fieldset>
        <legend>Osobní údaje</legend>
        <table>
            <tbody>
                <tr class="required">
                    <th><label class="required" for="frmformUser-name">Jméno:</label></th>
                    <td><input class="form-control text" name="name" id="frmformUser-name" required="required" value="" type="text"></td>
                </tr>
                <tr class="required">
                    <th><label class="required" for="frmformUser-email">E-mail:</label></th>
                    <td><input class="form-control text" name="email" id="frmformUser-email" required="required" value="" type="text"></td>
                </tr>
                <tr class="required">
                    <th><label class="required" for="frmformUser-country">Stát:</label></th>
                    <td><select class="form-control" name="country" id="frmformUser-country" required="required"><option value="1">Česká republika</option><option value="2">Slovenská republika</option><option value="3">Polská republika</option><option value="3328">Austria</option><option value="3329">Germany</option><option value="3330">Switzerland</option><option value="3331">Norway</option><option selected="selected" value="3332">Belgium</option><option value="3333">Bulgaria</option><option value="3334">Denmark</option><option value="3335">Estonia</option><option value="3336">Finland</option><option value="3337">France</option><option value="3338">Hungary</option><option value="3339">Italy</option><option value="3340">Ireland</option><option value="3341">Latvia</option><option value="3342">Lithuania</option><option value="3343">Netherlands</option><option value="3344">Slovenia</option><option value="3345">Spain</option><option value="3346">Sweden</option><option value="3347">United Kingdom</option></select></td>
                </tr>                
                <tr class="required">
                    <th><label class="required" for="frmformUser-phone">Telefon:</label></th>
                    <td><input class="form-control text" name="phone" id="frmformUser-phone" required="required" value="" type="text"></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
    <fieldset id="password">
        <legend>Založení nového účtu</legend>
        <table>
            <tbody>
                <tr>
                    <th><label for="frmformUser-pass">Heslo:</label></th>
                    <td><input class="form-control text" autocomplete="off" name="pass" id="frmformUser-pass"type="password"></td>
                </tr>
                <tr>
                    <th><label for="frmformUser-pass2">Heslo ('potvrzení'):</label></th>
                    <td><input class="form-control text" name="pass2" id="frmformUser-pass2" type="password"></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</form>

Karty produktové běžné

• Jadberg Toolbag 94

  
  Novinka

  936 Kč
  Hodnotilo 7 uživatelů

  100 % doporučuje

  (4)

• Salming Quest2 Lime KickZone…

  
  -44 %

  2 190 Kč
  Hodnotilo 7 uživatelů

  80 % doporučuje

  (7)

• Jadberg Toolbag 94

  
  Novinka

  936 Kč
  Hodnotilo 7 uživatelů

  50 % doporučuje

  (4)

• Salming Quest2 Lime KickZone…

  
  -44 %

  2 190 Kč
  Hodnotilo 7 uživatelů

  100 % doporučuje

  (7)

<ul class="products-list">
    <li class="col-xs-3">
        product-list
    </li>
</ul>

Karty produktové velké

• Jadberg Toolbag 94

  
  Novinka

  936 Kč
  Hodnotilo 7 uživatelů

  100 % doporučuje

  (4)

• Salming Quest2 Lime KickZone…

  
  -44 %

  2 190 Kč
  Hodnotilo 7 uživatelů

  100 % doporučuje

  (7)

<ul class="products-list">
    <li class="col-xs-6 big">
        product-list big
    </li>
</ul>

Karty produktové prohlížené

• Jadberg Toolbag 94

  
  Novinka

  936 Kč

• Salming Quest2 Lime KickZone…

  
  -44 %

  2 190 Kč

<ul class="products-list">
    <li class="col-xs-2 mini">
        product-list mini
    </li>
</ul>

Karty článkové běžné

• Zone Force Curve 2.0 Super Light…

  
  Detail článku

• Unihoc Cavity Z - recenze

  
  zhliadnuť video

<ul class="article-list">
    <li class="col-xs-3">
        article-list
    </li>
    <li class="col-xs-3 video">
        article-list
    </li>
</ul>

Karty článkové velké

• Zone Force Curve 2.0 Super Light…

  

  Připravili jsme pro Vás recenzi florbalové hole Salming Quest3 TourLite Aero 27 s novou čepelí Salming Quest3. Hokejku můžete zakoupit zde: http://bit.ly/1h5mPiH

  Detail článku

• Unihoc Cavity Z - recenze

  

  Připravili jsme pro Vás recenzi florbalové hole Salming Quest3 TourLite Aero 27 s novou čepelí Salming Quest3. Hokejku můžete zakoupit zde: http://bit.ly/1h5mPiH

  zhliadnuť video

<ul class="article-list">
    <li class="col-xs-6 big">
        article-list big
    </li>
    <li class="col-xs-6 big video">
        article-list big
    </li>
</ul>

Drobečkovka

• Úvodní strana
• Brankářská výbava
• Brankářské rukavice
• Jadberg Wings Gloves 2 brankářské rukavice

{control breadcrumb}

Paginator

{control paginator}

Readmore

{include readmore.phtml idRead=>'read_more', 'textRead'=>'Text'}

->

<div class="read-more-box">
    <input type="checkbox" id="read_more" role="button">
    <label for="read_more">
        <span class="icon icon-blue icon-arr-cart rotate-90">Zobrazit více</span>
        <span class="icon icon-blue icon-arr-cart rotate-270">Zobrazit méně</span>
    </label>
    <section>
        <p>Základem dobrého výkonu florbalového týmu je také florbalový brankář. Proto je třeba dbát vysoké pozornosti při výběru florbalového brankářského vybavení. Veškerá námi nabízená florbalová brankářská výstroj splňuje předpisy světové florbalové federace IFF a je pouze od nejlepších florbalových značek. Máš tedy jistotu velmi vysoké kvality materiálů a prvotřídně propracovaného zboží.</p>
    </section>
</div>
<div class="clear-20"></div>

Tooltip

<button type="button" class="btn btn-default" data-toggle="tooltip" title="Tooltip on top">Tooltip</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

Slider

<div class="sg-slider-wrap">
    <input class="slider-range" data-slider-min="150" data-slider-max="25000" data-slider-step="100" data-slider-value="[550,12500]" />
</div>

https://github.com/seiyria/bootstrap-slider#options

Galerie

<div class="col-xs-5">
    <div class="slick" data-slick='{"dots": true, "autoplay": true, "slidesToShow": 1}'>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/27249/7053_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
    </div>
</div>
<div class="col-xs-5 col-xs-offset-2">
    <div class="slick rounded-arr" data-slick='{"slidesToShow": 2}'>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/27249/7053_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
        <div><img class="img-responsive" src="/files/e/30089/salming-quest-smu-kopie_w378_h378.jpeg" alt="fotografie není k dispozici" /></div>
    </div>
</div>

http://kenwheeler.github.io/slick/

Doručovací kalendář