Compositions 5.0

Composed UI components

Listing 5.1

An individual article post

Default styling

Seveřané mi uvést membránou pohřbeno hmotné

Jader další tradičních ničem zdecimován v rostlé zmíněná sečetla … číst více

Seveřané mi uvést membránou pohřbeno hmotné

Jader další tradičních ničem zdecimován v rostlé zmíněná, sečetla pomyšlení u většinu čtvrti, oceánu brazílií cíle dávných veřejné cípu a čech. Či i člun cest nikoli strašnými chirurgy pokaždé zoologie hlubšího … číst více

<div class="grid post-listing">
    <div class="grid__item hidden--print e-2--palm e-6">
        <a href="#">
            <picture>
                <source media="(max-width: 768px)" srcset="public/images/60x45.jpg">
                <img src="public/images/300x225.jpg" alt="" class="post-listing__image"/>
            </picture>
        </a>
    </div><!--
    --><div class="grid__item e-6--palm e-10">
        <h2 class="post-listing__heading">
            <a href="#">Seveřané mi uvést membránou pohřbeno hmotné</a>
        </h2>
        <p>
            Jader další tradičních ničem zdecimován v rostlé zmíněná
            sečetla&nbsp;…<a class="post-listing__read-more" href="#"> číst více </a>
        </p>
    </div>
</div>
<div class="grid post-listing">
    <div class="grid__item e-16">
        <h2 class="post-listing__heading">
            <a href="#">Seveřané mi uvést membránou pohřbeno hmotné</a>
        </h2>
        <p class="hidden--palm">
            Jader další tradičních ničem zdecimován v rostlé zmíněná, sečetla
            pomyšlení u většinu čtvrti, oceánu brazílií cíle dávných veřejné
            cípu a čech. Či i člun cest nikoli strašnými chirurgy pokaždé
            zoologie hlubšího&nbsp;…<a class="post-listing__read-more"
                                       href="#"> číst více </a>
        </p>
    </div>
</div>

Promo 5.2

Displays a link with an optional figure and description

Default styling

<div class="grid promo">
    <div class="grid__item e-2--palm">
        <a href="#"><img class="promo__image" src="public/images/60x45.jpg" /></a>
    </div><!--
    --><div class="grid__item e-6--palm e-5">
        <span a class="promo__title">
            <a href="#">Jazykem stranu paliva</a>
        </span>
        <p class="promo__text">Pokaždé zoologie hlubšího</p>
    </div>
</div>
<div class="grid promo">
    <div class="grid__item e-7">
        <span class="promo__title">
            <a href="#">Jazykem stranu paliva k nežli smrky pozdější viditelný</a>
        </span>
        <p class="promo__text">Pokaždé zoologie hlubšího</p>
    </div>
</div>

Featured 5.3

Display of a featured article with a big image on the background and a ribbon on the top left conner.

To display featured with a ribbon, use the .featured--ribboned modifier (hidden in IE8)

To be used with two promos which are on the right.

Default styling

Zúročovat z matriarchálně houba nebe sudokopytníci narušovány té zkoušet o unii

Kalkulačky

Další inspirace a rady

<div class="grid">
    <div class="grid__item e-8">
        <a class="featured " href="#">
            <img class="featured__image" src="public/images/300x225.jpg" />
            <div class="featured__caption">
                <span class="featured__heading">Zúročovat z matriarchálně houba
                nebe sudokopytníci narušovány té zkoušet o unii</span>
            </div>
        </a>
    </div><!--
    --><div class="grid__item e-8">
        <a class="featured featured--ribboned " href="#">
            <img class="featured__image" src="public/images/300x225.jpg" />
            <div class="featured__caption">
                <span class="featured__heading">Zúročovat z matriarchálně houba
                nebe sudokopytníci narušovány té zkoušet o unii</span>
            </div>
        </a>
    </div><!--
    --><div class="grid__item e-8">
        <a class="featured " href="#">
            <div class="featured__icon">
                <span class="icon icon--chart" aria-hidden="true"></span>
            </div>
            <div class="featured__caption featured__caption--single">
                <span class="featured__heading">Kalkulačky</span>
            </div>
        </a>
    </div><!--
    --><div class="grid__item e-8">
        <a class="featured " href="#">
            <div class="featured__caption featured__caption--simple">
                <span class="featured__heading">Další inspirace a rady&nbsp;&nbsp;<span class="icon icon--angle-right"></span></span>
            </div>
        </a>
    </div>
</div>

Pager 5.4

Multi-page pagination links

Default styling

<ul class="pager hidden-print list-inline">
    <li>
        <a class="button button--slim" href="#">
            <span class="icon icon--angle-left" aria-hidden="true"></span>
        </a>
    </li>
    <li>
        <a class='pager__item' href='#'>1</a>
    </li>
    <li>
        <span class='pager__item pager__item--active'>2</span>
    </li>
    <li>
        <a class='pager__item' href='#'>3</a>
    </li>
    <li>
        <a class='pager__item' href='#'>4</a>
    </li>
    <li>
        <span class="pager__item pager__item--ellipsis"></span>
    </li>
    <li>
        <a class='pager__item' href='#'>25</a>
    </li>
    <li>
        <a class="button button--slim" href="#">
            <span class="icon icon--angle-right" aria-hidden="true"></span>
        </a>
    </li>
</ul>

Icon description 5.5

List of values prefixed with labeling icons.

Make sure to provide a text alternative.

Default styling

Největšího: Jediná přepůlená ředitelka tj. chlapců Michal i zřejmě přírodním vyhyne zhlédnout laboratorní nasazení gamy dálný, našeho náš deprese daného radost vysvětlením porézní, není čeští.
Úhrnem: Souvislosti modré ujít ně současnou

<dl class="icon-description">
    <dt>
        <span class="icon icon--house" aria-hidden="true"></span>
        <span class="visuallyhidden">Největšího</span>
    </dt>
    <dd>
        Jediná přepůlená ředitelka tj. chlapců Michal i zřejmě přírodním vyhyne
        zhlédnout laboratorní nasazení gamy dálný, našeho náš deprese daného
        radost vysvětlením porézní, není čeští.
    </dd>
    <dt>
        <span class="icon icon--user" aria-hidden="true"></span>
        <span class="visuallyhidden">Úhrnem</span>
    </dt>
    <dd>Souvislosti modré ujít ně současnou</dd>
</dl>

Modal 5.6

Displays a link with an optional figure and description.

Uses remodal. Set width on tablet using grid item width classes.

For accessibility please always set the role and aria-labelledby atrributes

Default styling

Open modal

<div class="remodal e-12" data-remodal-id="modal"
     role="dialog" aria-labelledby="dialog1Title">
    <div class="grid">
        <div class="grid__item e-7--palm e-10">
            <a class="remodal-cancel remodal__close" href="#">
                <span class="icon icon--remove" aria-hidden="true"></span>
                <span class="visuallyhidden">Zavřít</span>
            </a>
            <h2 id="dialog1Title">Mozkovou úrovni</h2>
            <p>
                Led má náš přínosem špitálu, vy boji jejího nicméně přinášíme
                potřeli částicím. Látky slabých původních nosu je křídy cesta
                celá vystoupáte pro, anténou už tábory samostatného slábnou
                normálem smetánka. Pozorované s činná k uspořádaných okouzlí
                migračních u kromě ukončil 1 permanentek nim otroky ne
                bojovníka. Působil kréta expedice až pralesa postavit řádu
                pocit dělat genetice, těm krásy hlasové techniku pomáhá.
                Přijela co fronty, k 1.050 Kč do borci laně dialozích nakrásně
                dobře, já vývojovou. Pevnostní zdvihla softwarové.
            </p>
            <br>
            <a class="remodal-confirm button button--block" href="#">Souhlasím</a>
        </div>
    </div>
</div>
<a href="#modal">Open modal</a>

Tabs 5.7

The component for switching content areas.

To use, simply put as many tabs__item as you wish in your tabs and the tabs__item will automatically be evenly spaced. There are maximum 3 tabs visible on smartphone, others are hidden.

To activate tab navigation without writing any JavaScript add data-tab-toggle attribute on an link element. The href must have collection and target element to show in format: #collection:target Element to show must have id in same format (collection:target). For the functionality you need to call the Tabs as below.

Using divs instead of list is possible.

Default styling

Tab1
Tab2
Tab3
Tab4

Vyhynul podíval květiny.

Souvislosti modré ujít ně současnou.

Pokaždé zoologie hlubšího.

Filosofa v nazvaného s mcintoshe větších.

Kanadských nově autoři británie mé starověkého uherské americké mexiko proužkem v zrušili.

<div class="grid">
    <div class="grid__item">
        <ul class="tabs">
            <li class="tabs__item"><a class="tabs__link" href="#tabs1:first" data-tab-toggle>Tab1</a></li>
            <li class="tabs__item"><a class="tabs__link tabs__link--active" href="#tabs1:second" data-tab-toggle>Tab2</a></li>
            <li class="tabs__item"><a class="tabs__link" href="#tabs1:third" data-tab-toggle>Tab3</a></li>
            <li class="tabs__item"><a class="tabs__link" href="#tabs1:fourth" data-tab-toggle>Tab4</a></li>
        </ul>
    </div>
    <div class="grid__item"></div>
    <div class="grid__item e-0--palm e-full">
        <div class="tabs">
            <div class="tabs__item"><a class="tabs__link" href="#tabs1:first" data-tab-toggle>Tab1</a></div>
            <div class="tabs__item"><a class="tabs__link tabs__link--active" href="#tabs1:second" data-tab-toggle>Tab2</a></div>
            <div class="tabs__item"><a class="tabs__link" href="#tabs1:third" data-tab-toggle>Tab3</a></div>
            <div class="tabs__item"><a class="tabs__link" href="#tabs1:fourth" data-tab-toggle>Tab4</a></div>
            <div class="tabs__item"><a class="tabs__link" href="#tabs1:fifth" data-tab-toggle>Tab5</a></div>
        </div>
    </div>
</div>
<div class="grid">
    <div id="tabs1:first" class="grid__item" style="display:none;">
        <p>Vyhynul podíval květiny.</p>
    </div>
    <div id="tabs1:second" class="grid__item">
        <p>Souvislosti modré ujít ně současnou.</p>
    </div>
    <div id="tabs1:third" class="grid__item" style="display:none;">
        <p>Pokaždé zoologie hlubšího.</p>
    </div>
    <div id="tabs1:fourth" class="grid__item" style="display:none;">
        <p>Filosofa v nazvaného s mcintoshe větších.</p>
    </div>
    <div id="tabs1:fifth" class="grid__item" style="display:none;">
        <p>Kanadských nově autoři británie mé starověkého uherské americké mexiko proužkem v zrušili.</p>
    </div>
</div>

<!-- Javascript -->
<script>
    $(function () {
        new JobsUI.Tabs('tabs1', 'tabs__link--active');
    });
</script>

Cover 5.8

Graphical background of any element; to be used with <img>, <picture> or <video>.

Cover can be used e.g. inside a hero component.

To emulate background-position: cover add .cover__media--horizontal.

The media may be shorter that the content; in such case add .cover__media--vertical.

Modifier .cover__media--center will center the image horizontally without any resize. Use only on full-page sized images!

Use --palm, --desk or none modifier for respective resolutions.

Default styling

Prosklené a vyšších byste kolegyň a svaly

A pět, čím to 3000 podzim v složité desítek, já náklady indickým chemické ležet, tu slovník předvádět loni příslušnosti části zvíře. Budou v jel.

Nám společné traektorii

Soustavu i klec

Trojcípou jiná než důsledkem zástupci hovořit rádi o charisma asteroidu lyžařská kritické v pravděpodobně zesílilo praktickou, nízké uličce přirozené obyčejné, 750 led hanové existují vysvětlením; tóny všechna tutanchamónovy.

<div class="grid grid--center--palm">
    <div class="grid__item e-12">
        <div class="grid">
            <div class="grid__item">
                <div class="cover">
                    <div class="cover__inner">
                        <img src="public/images/clif-sm.jpg" alt=""
                             class="cover__media cover__media--horizontal--palm"
                             srcset="public/images/clif-sm.jpg 300w,
                                     public/images/clif.jpg 800w,
                                     public/images/clif-hd.jpg 1920w"
                             sizes="(min-width: 768px) 90vw, 460px"
                        />
                    </div>
                    <h1>Prosklené a vyšších byste kolegyň a svaly</h1>
                    <p>
                        A pět, čím to 3000 podzim v složité desítek, já náklady indickým
                        chemické ležet, tu slovník předvádět loni příslušnosti části zvíře.
                        Budou v jel.
                    </p>
                </div>
            </div><!--
            --><div class="grid__item">
                <div class="cover">
                    <div class="cover__inner">
                        <video src="http://104261113.r.cdn77.net/big_buck_bunny_480x272.mp4"
                               autoplay loop muted class="cover__media cover__media--horizontal--palm" />
                    </div>
                    <div class="glass" style="height: 130px; margin-top: 130px;">
                        <h2 class="text--center" style="padding-top: 40px;">
                            <span class="icon icon--bite-square icon--heading" aria-hidden="true"></span>
                            Nám společné traektorii
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="cover">
            <div class="cover__inner">
                <img src="public/images/cam-sm.jpg" alt=""
                     class="cover__media cover__media--vertical--palm"
                     srcset="public/images/cam-sm.jpg 120w,
                             public/images/cam.jpg 400w,
                             public/images/cam-hd.jpg 800w"
                     sizes="(min-width: 768px) 30vw, 140px"
                />
            </div>
            <h1>Soustavu i klec</h1>
            <p>
                Trojcípou jiná než důsledkem zástupci hovořit rádi o charisma
                asteroidu lyžařská kritické v pravděpodobně zesílilo
                praktickou, nízké uličce přirozené obyčejné, 750 led hanové
                existují vysvětlením; tóny všechna tutanchamónovy.
            </p>
        </div>
    </div>
</div>

Search-list 5.9

Component for item in search results

Default styling

Padákům severu

Pokaždé zoologie hlubšího | Praha

Obory: Souvislosti modré Obchod

Gamou ta jí katastrofě

Jí z okny domů támhle pohroma | Ostrava

Obory: Kde upadat odjakživa Morton

<div class="search-list">
    <div class="grid">
        <div class="grid__item e-16">
            <div class="search-list__item">
                <a class="search-list__logo" href="#">
                    <img class="search-list__logo__image" src="public/images/jobs-logo.png" alt="">
                </a>
                <h2 class="search-list__title">
                    <a href="#" class="search-list__title__link">
                        Padákům severu
                    </a>
                </h2>
                <p class="search-list__caption">
                    <a href="#">Pokaždé zoologie hlubšího</a>
                    |
                    <a href="#">Praha</a>
                </p>
                <p class="search-list__description">
                    Obory:
                    Souvislosti modré&nbsp;
                    <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    Obchod
                </p>
            </div>
        </div>
    </div>
    <div class="grid">
        <div class="grid__item e-16">
            <div class="search-list__item">
                <a class="search-list__logo" href="#">
                    <img class="search-list__logo__image" src="public/images/jobs-logo.png" alt="">
                </a>
                <h2 class="search-list__title">
                    <a href="#" class="search-list__title__link">
                        Gamou ta jí katastrofě
                    </a>
                </h2>
                <p class="search-list__caption">
                    <a href="#">Jí z okny domů támhle pohroma</a>
                    |
                    <a href="#">Ostrava</a>
                </p>
                <p class="search-list__description">
                    Obory:
                    Kde upadat odjakživa&nbsp;
                    <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    Morton
                </p>
            </div>
        </div>
    </div>
</div>

Cover box 5.10

Displays elita cover.

Can be used primary in search-list.

Default styling

Do borci Zoologie hlubšího Veřejný cíp

<div class="cover-box cover-box--with-content">
    <a href="#">
        <img class="cover-box__image" src="public/images/cover-box.jpg" />
    </a>
    <div class="cover-box__content">
        <div class="cover-box__content__links">
            <a class="cover-box__content__links__link cover-box__content__links__link--left"
               href="#">Do borci</a>
            <a class="cover-box__content__links__link cover-box__content__links__link--right"
               href="#">Zoologie hlubšího</a>
            <a class="cover-box__content__links__link"
               href="#">Veřejný cíp</a>
        </div>
    </div>
</div>
<div class="cover-box">
    <a href="#">
        <img class="cover-box__image" src="public/images/cover-box.jpg" />
    </a>
</div>

Promobox 5.11

Box for promo

Default styling

Jazykem paliva

Pokaždé zoologie hlubšího

Jazykem paliva

Pokaždé zoologie hlubšího

Jazykem paliva

Pokaždé zoologie hlubšího

<div class="grid">
    <div class="grid__item e-6--palm e-5">
        <div class="promobox">
            <h1>Jazykem paliva</h1>
            <p>
                Pokaždé zoologie hlubšího
            </p>
            <p>
                <button class="button">Odeslat</button>
            </p>
        </div>
    </div><!--
    --><div class="grid__item e-6--palm e-5">
        <div class="promobox promobox--inverse">
            <h1 class="promobox__title">Jazykem paliva</h1>
            <p>
                Pokaždé zoologie hlubšího
            </p>
            <p>
                <button class="button">Odeslat</button>
            </p>
        </div>
    </div><!--
    --><div class="grid__item e-6--palm e-5">
        <div class="promobox promobox--reduced">
            <h1>Jazykem paliva</h1>
            <p>
                Pokaždé zoologie hlubšího
            </p>
            <p>
                <button class="button">Odeslat</button>
            </p>
        </div>
    </div>
</div>

Profile badge 5.12

Displays a box for profile badge

Default styling

: Odrážka 1
: Odrážka 2
: Odrážka 3

: Odrážka 1
: Odrážka 2
: Odrážka 3

<div class="grid">
    <div class="grid__item e-7">
        <div class="profile-badge">
            <div class="profile-badge__logo">
                <a href="#"><img src="public/images/120x90.jpg" width="120" height="90"></a>
            </div>
            <div class="profile-badge__preview">
                <a href="#"><img src="public/images/elita_default.png" width="258" height="130"></a>
            </div>
            <div class="profile-badge__content">
                <dl class="icon-description">
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 1
                    </dd>
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 2
                    </dd>
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 3
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="grid__item e-7">
        <div class="profile-badge profile-badge--naked">
            <div class="profile-badge__preview profile-badge__preview--fixed">
                <a href="#">
                    <img class="profile-badge__logo profile-badge__logo--fixed"
                         src="public/images/elita_default.png" >
                </a>
            </div>
            <div class="profile-badge__content">
                <dl class="icon-description">
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 1
                    </dd>
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 2
                    </dd>
                    <dt>
                        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>
                    </dt>
                    <dd>
                        Odrážka 3
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>

Table 5.13

The table component with default styles.

Default styling

město o metry o jakoby	klíčem sebe
nicméně roce evropa úpravou	kanadské proudění draci, známý toto tzv. šimpanzů nory pohodlí vědci žen krásná EU též paprsky k pouhým tomu

<table class="table">
    <thead>
    <tr>
        <th>
            město o metry o jakoby
        </th>
        <th>
            klíčem sebe
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            nicméně roce evropa úpravou
        </td>
        <td>
            kanadské proudění draci, známý toto tzv. šimpanzů nory pohodlí vědci žen krásná EU též paprsky k pouhým tomu
        </td>
    </tr>
    </tbody>
</table>

Picker 5.14

An advanced option panel.

The picker is palm only by default. To enable use on lap and above use .picker--lap modifier. It may be combined with a combobox.

Opening a picker means adding .picker--open class and changing its aria-hidden attribute to false.

To make a picker displayed on the second level use .picker--secondary. The .picker--pre-open class should be added to a secondary picker when its primary picker is opened; this makes the open animation smoother.

On desk unstyled.

Please note that provided JavaScript is for demonstration purposes only.

Default styling

Show picker

<div class="hidden--desk">
    <div class="picker picker--lap" id="demo-picker"
         role="dialog" aria-hidden="true">
        <div class="picker__head">
            Vyhýbá starověkých
            <a class="picker__close" href="#">
                <span class="icon icon--remove" aria-hidden="true"></span>
                <span class="visuallyhidden">Zavřít</span>
            </a>
        </div>
        <div class="picker__body">
            <h2>Mozkovou úrovni</h2>
            <p>
                Led má náš přínosem špitálu, vy boji jejího nicméně přinášíme
                potřeli částicím. Látky slabých původních nosu je křídy cesta.
            </p>
            <a href="#" class="button" data-show-subpicker>Show subpicker</a>
        </div>
    </div>
    <div class="picker picker--lap picker--secondary" id="demo-subpicker"
         role="dialog" aria-hidden="true">
        <a class="picker__close" href="#">
            <span class="icon icon--remove" aria-hidden="true"></span>
            <span class="visuallyhidden">Zavřít</span>
        </a>
        <div class="picker__body">
            <h2>Samci přes, polovině </h2>
            <p>
                U něj vy lesy řeči monzunový do sága. Stavy foto. Jader úsilí,
                vybráno sezonu tří plyšové laboratoře jedinečnost plachetnice
                tím nejdivočejším účastnil o označované, ho cítit, ať ideál i
                ukázal minuty vytvoří pozvedl podobný je mizení. Plná fyzici
                zasáhla, ty novým až příroda, k mysu by 100 nejmodernějších
                U něj vy lesy řeči monzunový do sága. Stavy foto. Jader úsilí,
                vybráno sezonu tří plyšové laboratoře jedinečnost plachetnice
                tím nejdivočejším účastnil o označované, ho cítit, ať ideál i
                ukázal minuty vytvoří pozvedl podobný je mizení. Plná fyzici
                zasáhla, ty novým až příroda, k mysu by 100 nejmodernějších
            </p>
        </div>
    </div>
    <a href="#" data-show-picker>Show picker</a>
</div>

<script>
    var picker = $('#demo-picker'),
            subpicker = $('#demo-subpicker'),
            overlay = $('#overlay'),
            page = $('html, body');
    function openPicker(e) {
        e.preventDefault();
        picker.addClass('picker--open').attr('aria-hidden', 'false');
        overlay.addClass('overlay--open');
        subpicker.addClass('picker--pre-open');
        page.addClass('scroll-lock');
    };
    function closePicker(e) {
        e.preventDefault();
        picker.removeClass('picker--open').attr('aria-hidden', 'true');
        overlay.removeClass('overlay--open');
        subpicker.removeClass('picker--pre-open');
        page.removeClass('scroll-lock');
    };
    function openSubpicker(e) {
        e.preventDefault();
        e.stopPropagation();
        subpicker.addClass('picker--open').attr('aria-hidden', 'false');
        picker.addClass('scroll-lock');
    };
    function closeSubpicker(e) {
        e.preventDefault();
        subpicker.removeClass('picker--open').attr('aria-hidden', 'true');
        picker.removeClass('scroll-lock');
    };
    function closeBothPickers(e) {
        e.preventDefault();
        closeSubpicker(e);
        closePicker(e);
    };
    $('[data-show-picker]').click(openPicker);
    $('[data-show-subpicker]').click(openSubpicker);
    picker.find('.picker__close').click(closeBothPickers);
    subpicker.find('.picker__close').click(closeSubpicker);
    overlay.click(closeBothPickers);
</script>

Combobox 5.15

Floating box e.g. for autocomplete.

It may be combined with a picker.

Opening a combobox body means adding .combobox__body--open class and changing its aria-hidden attribute to false.

Please note that provided JavaScript is for demonstration purposes only.

Default styling

Prarodičů

<div class="grid">
    <div class="grid__item e-10">
        <div class="combobox" id="combobox">
            <label class="form__label" for="demo-input">Prarodičů</label>
            <input class="form__text-input" id="demo-input"
                   type="text" placeholder="Kamkoliv po republice">
            <div class="combobox__body" id="combobody"
                 role="dialog" aria-hidden="true">
                <ul class="list-unstyled">
                    <li class="combobox__item"><a class="combobox__link" href="#">Hmotu čech minimálně</a></li>
                    <li class="combobox__item combobox__item--highlight"><a class=" combobox__link" href="#">Zrušili by která různá  tělo ne vzdělávání</a></li>
                    <li class="combobox__item"><a class="combobox__link" href="#">Slabého chybí tělo ne vzdělávání</a></li>
                    <li class="combobox__item">Rovnosti z původním</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    var combobody = $('#combobody');
    $('#demo-input').click(function (e) {
        e.preventDefault();
        combobody.addClass('combobox__body--open')
                .attr('aria-hidden', 'false');
    });
    $('html').click(function (e) {
        if (!$(e.target).closest('#combobox').length) {
            combobody.removeClass('combobox__body--open')
                    .attr('aria-hidden', 'true');
        }
    });
</script>

Elite row 5.16

The component is used to display Elite employers in a row with a description.

Use modificator hidden-palm for elite-row__item class to hide on smartphone.
Use modificator visible for elite-row__item class to show on lap and desk.
Use modificator visible-desk for elite-row__item class to show only on desk.

Using divs instead of a list is possible.

Default styling

8 nabídek
9 nabídek
10 nabídek
1 nabídka
3 nabídky

<ul class="elite-row list-unstyled">
    <li class="elite-row__item">
        <a href="#"><img class="elite-row__logo" src="http://presentation.lmc.cz/loga/skodaauto/elita/logo.gif" alt="Škoda"></a>
        <p>8 nabídek</p>
    </li>
    <li class="elite-row__item">
        <a href="#"><img class="elite-row__logo" src="http://presentation.lmc.cz/loga/tmobile/elita/logo.gif" alt="T-Mobile"></a>
        <p>9 nabídek</p>
    </li>
    <li class="elite-row__item">
        <a href="#"><img class="elite-row__logo" src="http://presentation.lmc.cz/loga/zentiva/elita/logo.gif" alt="Zentiva"></a>
        <p>10 nabídek</p>
    </li>
    <li class="elite-row__item elite-row__item--hidden-palm elite-row__item--visible">
        <a href="#"><img class="elite-row__logo" src="http://presentation.lmc.cz/loga/koba/elita/logo.gif" alt="Kb"></a>
        <p>1 nabídka</p>
    </li>
    <li class="elite-row__item elite-row__item--hidden-palm elite-row__item--visible-desk">
        <a href="#"><img class="elite-row__logo" src="http://presentation.lmc.cz/loga/csas/elita/logo.gif" alt="Česká Spořitelna"></a>
        <p>3 nabídky</p>
    </li>
</ul>

Recommended-Ads 5.17

Component for recommended ads

Please note that provided counts of any grid columns are for demonstration purposes only.

Using divs instead of a list is possible.

Default styling

Regionální obchodní konzultant , ABC Českého Hospodářství a.s. , Praha
Obchodní zástupce pro regionální oddělení , Škoda auto a.s. , Mladá Boleslav

Zobrazit více doporučených nabídek

<div class="grid"><!--
    --><div class="grid__item recommended-ads"><!--
        --><div class="grid"><!--
            --><div class="grid__item e-1--palm e-1 e-1--desk grid--center">
                <span class="recommended-ads__icon icon icon--lightbulb-o" aria-hidden="true"></span>
            </div><!--
            --><div class="grid__item e-7--palm e-15 e-15--desk">
                <ul class="recommended-ads__list" data-recommended-ads-list>
                    <li class="recommended-ads__list__item">
                        <a class="recommended-ads__list__item__link" href="#">Regionální obchodní konzultant</a>
                        ,
                        <span class="recommended-ads__list__item__company-name">ABC Českého Hospodářství a.s.</span>
                        ,
                        <span class="recommended-ads__list__item__company-address"> Praha </span>
                    </li>
                    <li class="recommended-ads__list__item">
                        <a class="recommended-ads__list__item__link" href="#">Obchodní zástupce pro regionální oddělení</a>
                        ,
                        <span class="recommended-ads__list__item__company-name">Škoda auto a.s.</span>
                        ,
                        <span class="recommended-ads__list__item__company-address"> Mladá Boleslav </span>
                    </li>
                </ul>
                <p data-positions-loader class="hidden">
                    <span class="icon icon--spinner icon--rotating muted" aria-hidden="true"></span>
                </p>
                <a href="#" class="recommended-ads__show-more__link" data-recommended-ads-show-more>
                    Zobrazit více doporučených nabídek
                    <span class="recommended-ads__show-more__link__icon icon icon--angle-right"></span>
                </a>
            </div>
        </div><!--
    --></div><!--
--></div>