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

Jazykem stranu paliva

Pokaždé zoologie hlubšího

<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

<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

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

<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

<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

<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

<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

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