Components 4.0

Stand-alone UI components

Buttons 4.1

Button Type Variations 4.1.1

There are three types of buttons: standard button, primary button and circle button.

Default styling

<p>
    <a href="#" class="btn">Standard button</a>
</p>
<p>
    <a href="#" class="btn btn--primary">Primary button</a>
</p>
<p>
    <a href="#" class="btn btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </a>
</p>

Mark-up Variations 4.1.2

Use the button classes on an a, button, or input element.

Default styling

Link as button

Disabled button

<p>
    <a href="#" class="btn">Link as button</a>
</p>
<p>
    <button type="button" class="btn">Button as button</button>
</p>
<p>
    <input type="submit" class="btn" value="Input / submit as button" />
</p>
<p>
    <a href="#" class="btn btn--disabled">Disabled button</a>
</p>

Navbar 4.2

This is a main navigation. Please ignore all inline styles.

Default styling

<a href="#" id="js-navbar-main-toggle-open" class="navbar-main__toggle--open link--no-underline" style="position: static; background-color: #cc313c; padding: 10px;">
    <span class="icon icon--menu icon--left" aria-hidden="true"></span> Menu
</a>
<nav id="js-navbar-main" class="navbar-main" role="navigation">
    <a href="#" id="js-navbar-main-toggle-close" class="navbar-main__toggle--close close close--large">
        <span class="icon icon--close" aria-hidden="true"></span>
        <span class="visually-hidden">Close</span>
    </a>
    <div class="navbar-main__body" style="padding: 0;">
        <ul id="js-navbar-main-nav" class="navbar-main__nav" aria-labelledby="js-navbar-main-toggle-open">
            <li>
                <a href="#" title="Recruitments">
                    <span class="icon icon--candidate-ok-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Recruitments
                </a>
            </li>
            <li>
                <a href="#" title="Jobs.cz Database">
                    <span class="icon icon--candidates-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Jobs.cz Database
                </a>
            </li>
            <li>
                <a href="#" title="Candidate Search">
                    <span class="icon icon--candidate-search icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    Candidate Search
                </a>
            </li>
            <li class="active" title="E-shop">
                <a href="#">
                    <span class="icon icon--cart-outline icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    E-shop
                </a>
            </li>
        </ul>
        <ul class="navbar-main__nav navbar-main__nav--right">
            <li>
                <a href="#" title="Statistics">
                    <span class="icon icon--graph icon--medium icon--middle icon--left" aria-hidden="true"></span>
                    <span class="hidden-md hidden-lg">Statistics</span>
                </a>
            </li>
        </ul>
    </div>
</nav>

Caret 4.4

Caret is used usually in dropdowns or for indication some menu.

Caret Orienation 4.4.1

Default styling

<span class="caret"></span>
<span class="caret caret--up"></span>

Caret Sizing 4.4.2

Default styling

<span class="caret caret--sm"></span>
<span class="caret"></span>
<span class="caret caret--lg"></span>

Filters 4.5

Default styling

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
Label
Label
Label
<div class="section section--shadowed">
<form class="form filters">
    <div class="filters__toggle">
        <button type="button" id="js-filters-toggle" class="btn btn--primary filters__toggle__btn">Filters</button>
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. <br>
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. <br>
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. <br>
    </div>
    <div id="js-filters-body" class="filters__body" aria-labelledby="js-filters-toggle">
        <div class="filters__group">
            <div class="filters__control">
                <select id="select2-single--c">
                    <option value=""></option>
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
            <div class="filters__control">
                <select id="select2-single--d">
                    <option value=""></option>
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
            <div class="filters__control">
                <select id="select2-single--e">
                    <option value=""></option>
                    <option value="option-1">Option 1</option>
                    <option value="option-2">Option 2</option>
                    <option value="option-3">Option 3</option>
                </select>
            </div>
        </div>
        <div class="filters__group">
            <div class="filters__control">
                <strong class="filters__label">Label</strong>
                <div class="filters__content-labeled">
                    <span class="ui-slider--filter__wrapper">
                        <span id="sliderFilters1" class="ui-slider--filter"></span>
                        <span id="sliderFilters1Value" class="ui-slider--filter__value"></span>
                    </span>
                </div>
            </div>
            <div class="filters__control">
                <div class="filters__content-labeled">
                    <a href="#" title="Link">+ Action</a>
                </div>
            </div>
        </div>
        <div class="filters__group">
            <div class="filters__control">
                <strong class="filters__label">Label</strong>
                <div class="filters__content-labeled">
                    <span class="ui-slider--filter__wrapper">
                        <span id="sliderFilters2" class="ui-slider--filter"></span>
                        <span id="sliderFilters2Value" class="ui-slider--filter__value"></span>
                    </span>
                </div>
            </div>
            <div class="filters__control">
                <strong class="filters__label">Label</strong>
                <div class="filters__content-labeled">
                    <input id="checkfilter1" type="checkbox" name="checkfilter1" checked="checked" />
                    <label for="checkfilter1">Checkbox1</label>
                    <input id="checkfilter2" type="checkbox" name="checkfilter2" />
                    <label for="checkfilter2">Checkbox2</label>
                </div>
            </div>
        </div>
        <div class="filters__group">
            <div class="filters__control">
                <button type="submit" class="btn btn--primary">Button</button>
            </div>
        </div>
    </div>
</form>
</div>

Select2 Filter 4.6

Filters are based on Select2. For more information about Select2 component visit https://select2.github.io/.

Basic Select2 Filter 4.6.1

This is a basic Select2 filter.

Default styling

<script>
    // Example of filter initialization
    // $("#select2-single--a").select2({
    //     width: "style",
    //     allowClear: true,
    //     placeholder: "Please select",
    //     containerCssClass: "select2-filter",
    //     dropdownCssClass: "select2-filter"
    // });
</script>
<select id="select2-single--a" class="select2-container--block">
    <option value=""></option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
    <option value="option-3">Option 3</option>
</select>

Select2 Filter - Selected Value 4.6.2

This is a selected state of basic filter. For this state add class select2-filter-selected to class select2-filter.

Default styling

<select id="select2-single--b">
    <option value=""></option>
    <option value="option-1">Option 1</option>
    <option value="option-2" selected="selected">Option 2</option>
    <option value="option-3">Option 3</option>
</select>

Slider 4.7

Basic Slider 4.7.1

Default styling

<p>
<span class="ui-slider--filter__wrapper" role="slider">
    <span id="sliderSimple" class="ui-slider--filter"></span>
    <span id="sliderSimpleValue" class="ui-slider--filter__value"></span>
</span>
</p>

Slider With Range 4.7.2

Default styling

<p>
<span class="ui-slider--filter__wrapper" role="slider">
    <span id="sliderRange" class="ui-slider--filter"></span>
    <span id="sliderRangeValue" class="ui-slider--filter__value"></span>
</span>
</p>

Charts 4.8

Donut Charts 4.8.1

Default styling

0days
15days
42days
<script>
    // Trigger animation
    // For Donut Chart initialization use javascript function: triggerDonutChartAnimation($('.donut-chart'));
</script>
<p>
    <label>
        Set chart value:
        <input type="range" value="0" id="demo-chart-value-setter" style="display: inline-block; width: auto; vertical-align: middle;">
    </label>
</p>
<div class="grid grid--middle">
    <div class="col col-4--md">
        <div class="donut-chart donut-chart--small block--center" data-slice="0" data-total="0" id="demo-chart">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">0</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div><!--
    --><div class="col col-4--md">
        <div class="donut-chart block--center" data-slice="15" data-total="100">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">15</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div><!--
    --><div class="col col-4--md">
        <div class="donut-chart donut-chart--large block--center" data-slice="42" data-total="100">
            <div class="donut-chart__legend">
                <span class="donut-chart__legend__value">42</span><span class="donut-chart__legend__label">days</span>
            </div>
            <div class="donut-chart__mask donut-chart__mask--half">
                <div class="donut-chart__slice"></div>
                <div class="donut-chart__slice donut-chart__slice--fix"></div>
            </div>
            <div class="donut-chart__mask donut-chart__mask--full">
                <div class="donut-chart__slice"></div>
            </div>
        </div>
    </div>
</div>

Pie Charts 4.8.2

Default styling

<script>
    // Initialization (combined with hunt [https://jeremenichelli.github.io/hunt/]):
    // hunt($('#demo-pie-chart'), {
    //     in: function() {
    //         $(this).drawPieChart([
    //                 { title: 'Jobs.cz',         value: 75,  color: '#19325a' },
    //                 { title: 'Prace.cz',        value: 54,  color: '#cb2026' },
    //                 { title: 'Práce za rohem',  value: 21,  color: '#00adef' },
    //                 { title: 'Monster',         value: 8,   color: '#883cd2' },
    //                 { title: 'Other',           value: 5,   color: '#b1b1b1' }
    //             ],
    //             {
    //                 tipClass: 'pie-chart__tip'
    //             }
    //         );
    //     }
    // });
</script>
<div class="pie-chart-wrapper">
    <div class="pie-chart" id="demo-pie-chart"></div>
</div>

Gauge 4.8.3

Currently, threshold must be between 65 and 100. Lower values will cause visual error.

Default styling

<script>
    // Init gauge
    $(function() {
        $('#gauge-1').gauge({
            value: 92,
            threshold: 80,
            legendLabel: 'Moneta Bank'
        });
        $('#gauge-2').gauge({
            value: 0,
            threshold: 0,
            legendLabel: 'LIDL Česká republika'
        });
    });
</script>
<div class="grid grid--middle">
    <div class="col col-4--md">
        <div class="gauge" id="gauge-1"></div>
    </div>
    <div class="col col-4--md">
        <div class="gauge" id="gauge-2"></div>
    </div>
</div>

Pit 4.12

An area reserved or enclosed for a specific purpose.

Default styling

I am in the pit.
<div class="pit">
    I am in the pit.
</div>

Alerts 4.13

Alerts are short notifications about important events in application. Teamio UI provides two types of alerts: alert success and alert danger. Alerts success are automatically closed.

Alerts are generated in component called Tray. Tray is a container for keeping some content fixed on top of the screen.

Default styling

<script>
    // Alert intialization
    // For alerts initialization use following javascript function: showAlerts();
</script>
<div class="tray">
    <div class="alert alert--success js-alert" role="alert">
        <span class="icon icon--success alert__icon" aria-hidden="true"></span>
        I am a <strong>success</strong> alert message. <a href="#">Well done</a>
        <button type="button" class="close alert__close" data-dismiss="alert">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </button>
    </div>
    <div class="alert alert--danger js-alert" role="alert">
        <span class="icon icon--danger alert__icon" aria-hidden="true"></span>
        I am a <strong>danger</strong> alert message. <a href="#">Save me</a>
        <button type="button" class="close alert__close" data-dismiss="alert">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </button>
    </div>
</div>
<p>
    <button type="button" id="js-show-alerts" class="btn btn--primary">Show alerts</button>
</p>

Modals 4.14

There are two types of modal windows. Standard modal and modal on side of the screen.

Standard Modals 4.14.1

Use standard modal for preview some short content.

Default styling

<p>
    <button type="button" class="btn btn--primary" data-toggle="modal" data-target="#myModal">Standard modal</button>
</p>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="myModalLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                    Vestibulum viverra condimentum neque, at tincidunt neque lobortis ut. Sed pellentesque eget nisl quis consectetur.
                    Fusce vel lobortis ante. Curabitur luctus ante ac risus viverra sodales.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae consectetur lorem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                </p>
                <div class="modal__controls">
                    <button type="button" class="btn btn--primary">Save</button>
                    <a href="#" title="" data-dismiss="modal" aria-hidden="true" class="secondary-action">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

Wide Modals 4.14.2

Use wide modals for attachments preview or other content that needs some space.

Default styling

<p>
    <button type="button" class="btn btn--primary" data-toggle="modal" data-target="#modalWide">Wide modal</button>
</p>
<div class="modal modal--wide fade js-modal-wide" id="modalWide" tabindex="-1" role="dialog" aria-labelledby="modalWideLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="modalSideLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <div class="pit">CV</div>
                <div class="modal__controls">
                    <button type="button" class="btn btn--primary">Done</button>
                    <a href="#" title="" data-dismiss="modal" aria-hidden="true" class="secondary-action">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

Profile Preview 4.15

Default styling

Philip Morris

Philip Morris Head of Backoffice

<div class="profile-preview">
    <span class="profile-preview__photo profile-photo">
        <img src="dist/images/cand-photo.jpg" alt="Philip Morris" class="profile-photo__image img-responsive">
    </span>
    <p class="profile-preview__body">
        <strong class="profile-preview__body__title">Philip Morris</strong>
        <span class="profile-preview__body__subtitle">Head of Backoffice</span>
    </p>
</div>

Close 4.16

Default styling

Standard close button - Close

Large close button - Close

<p>
   Standard close button -
   <a href="#" class="close">
       <span class="icon icon--close" aria-hidden="true"></span>
       <span class="visually-hidden">Close</span>
   </a>
</p>
<p>
   Large close button -
   <a href="#" class="close close--large">
       <span class="icon icon--close" aria-hidden="true"></span>
       <span class="visually-hidden">Close</span>
   </a>
</p>

Listing 4.17

Listing is used for all types of lists (vacancies, candidates, ...).

Pure listing 4.17.1

Listing without actions. No header. Row after row. Optional footer.

Default styling

Listing row content
<div class="listing">
    <div class="listing__data">
        <div class="listing-row">
            <div class="grid">
                <div class="col listing-row__cell">
                    Listing row content
                </div>
            </div>
        </div>
    </div>
    <div class="listing__footer">
        <a href="#">+ something else</a>
    </div>
</div>

Listing with actions 4.17.2

Listing with single actions. Action menu resurrection.

Default styling

<div class="listing listing--has-actions">
    <div class="listing__data">
        <div class="listing-row">
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--no-border btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Listing row content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Listing with multi-actions 4.17.3

Listing with multi-actions. Action menu, checkboxes, listing header. Full power.

Default styling

<div class="listing listing--has-actions listing--has-multiactions">
    <div class="listing__header">
        <div class="listing-row__control">
            <input id="listing-check-header" type="checkbox" name="listing-check-header">
            <label for="listing-check-header" class="no-label"> </label>
        </div>
        <div class="listing-row__body">
            <a class="btn offset-right--u-6">Multi action</a>
            <div class="dropdown">
                <a href="#" id="dropdownLabel" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--circle">
                    <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Action Menu</span>
                </a>
                <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                    <div class="arrow"></div>
                    <ul class="dropdown-menu__list">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="listing__data">
        <div class="listing-row">
            <div class="listing-row__control">
                <input id="listing-check-row-1" type="checkbox" name="listing-check-row-1">
                <label for="listing-check-row-1" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--no-border btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Listing row
                    </div>
                </div>
            </div>
        </div>
        <div class="listing-row listing-row--selected">
            <div class="listing-row__control">
                <input id="listing-check-row-2" type="checkbox" name="listing-check-row-2" checked>
                <label for="listing-check-row-2" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--no-border btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        Selected listing row
                    </div>
                </div>
            </div>
        </div>
        <div class="listing-row listing-row--new">
            <div class="listing-row__control">
                <input id="listing-check-row-3" type="checkbox" name="listing-check-row-3">
                <label for="listing-check-row-3" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--no-border btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col listing-row__cell">
                        New listing row
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Empty listing 4.17.4

Default styling

Nothing to say.

<div class="listing">
    <div class="listing__data listing__data--empty">
        <p>Nothing to say.</p>
    </div>
</div>

Listing row: Candidate 4.17.5

Default styling

Not evaluated

Unsuitable: Winnie Pooh

Aenean elementum odio metus, id fermentum purus lacinia nec…

15. 10.

<div class="listing-row listing-row--compact">
    <div class="grid"><!--
        --><div class="col col-4--md listing-row__cell listing-row__cell-name">
            <p>
                <span class="listing-row__heading"><a href="#">Wolfgang Amadeus Mozart</a></span>
                <span class="icon icon--vq-pause icon--medium icon--middle" aria-hidden="true"></span><!--
                --><span class="icon--flexidot icon--middle">72</span>
            </p>
        </div><!--
        --><div class="col col-4--md listing-row__cell">
            <p class="pull-left"><span class="rec-phase">Not evaluated</span></p>
            <p class="pull-right">
                <span class="lm-opinion lm-opinion--unsuitable">
                    <span class="icon--opinion" aria-hidden="true"></span>
                    <span class="visually-hidden">Unsuitable:</span>
                    Winnie Pooh
                </span>
            </p>
        </div><!--
        --><div class="col col-4--md listing-row__cell">
            <div class="listing-row__note text-break-word">Aenean elementum odio metus, id fermentum purus lacinia nec…</div>
            <p class="listing-row__date text-right text-nowrap">15. 10.</p>
        </div><!--
    --></div>
</div>

Listing row: Vacancy 4.17.6

Default styling

13 4

Jaroslava Brůžková

<div class="listing-row">
    <div class="grid"><!--
        --><div class="col col-8--md listing-row__cell">
            <p><span class="listing-row__heading"><a href="#">Key Account Manager</a></span></p>
        </div><!--
        --><div class="col col-4--md listing-row__cell">
            <p class="pull-left">
                <span class="candidate-count">
                    <span class="candidate-count__icon">
                        <span class="icon icon--medium icon--left icon--middle icon--candidate gray-lighter" aria-hidden="true"></span>
                    </span>
                    <span class="candidate-count__total">13</span>
                    <span class="badge badge--super">4</span>
                </span>
            </p>
            <p class="pull-right text-right">Jaroslava Brůžková</p>
        </div><!--
    --></div>
</div>

Listing row: Candidate search 4.17.7

Default styling

IN

Ivana Novotná 101 expired

MarketingObchodní zástupce

Online marketing specialist pro mezinárodní produkt mezinárodní společnosti

Round 1 24. 12. 2015, 11:00

Online marketing specialist

Rejected 24. 12. 2015

a 4 další reakce

<div class="listing-row offset-in-bottom--u-5">
    <div class="grid"><!--
        --><div class="col col-4--md"><!--
            --><div class="listing-row__cell">
                <div class="profile-preview profile-preview--inline">
                    <span class="profile-preview__photo profile-photo">
                        <span class="profile-photo__initials">IN</span>
                    </span>
                    <p class="profile-preview__body">
                        <span class="profile-preview__body__title">Ivana Novotná</span>
                        <span class="icon-group">
                            <span class="icon-group__icon" title="101 expired">
                                <span class="icon icon--minus-hexagon icon--medium icon--middle text-red--dark" aria-hidden="true"></span>
                                <span class="visually-hidden">101 expired</span>
                            </span>
                        </span>
                    </p>
                </div>
            </div>
        </div><!--
        --><div class="col col-8--md">
            <div class="grid"><!--
                --><div class="col col-12--sm">
                    <div class="labels offset-bottom--u-7">
                        <span class="label">Marketing</span><span class="label">Obchodní zástupce</span>
                    </div>
                </div><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p>Online marketing specialist pro mezinárodní produkt mezinárodní společnosti</p>
                </div><!--
                --><div class="col col-6--md listing-row__cell">
                    <span class="rec-phase rec-phase--suitable">
                        <span class="rec-phase__round">Round 1</span>
                        <span class="rec-phase__date-time">24. 12. 2015, 11:00</span>
                    </span>
                </div><!--
            --></div>
            <div class="grid"><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p>Online marketing specialist</p>
                </div><!--
                --><div class="col col-6--md listing-row__cell">
                    <span class="rec-phase rec-phase--rejected">
                        <span class="rec-phase__round">Rejected</span>
                        <span class="rec-phase__date-time">24. 12. 2015</span>
                    </span>
                </div><!--
            --></div>
            <div class="grid"><!--
                --><div class="col col-6--md listing-row__cell offset-bottom--u-0--sm">
                    <p><em>a 4 další reakce</em></p>
                </div><!--
            --></div>
        </div><!--
    --></div>
</div>

Pagination 4.18

Default Pagination 4.18.1

Default styling

<div class="pagination">
    <ul class="pagination__list" role="navigation">
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">1</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">3</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--active">4</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">5</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">50</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</div>

Centered Pagination 4.18.2

Default styling

<div class="pagination pagination--centered">
    <ul class="pagination__list" role="navigation">
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">1</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">3</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--active">4</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">5</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">50</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</div>

Right Aligned Pagination 4.18.3

Default styling

<div class="pagination pagination--right">
    <ul class="pagination__list" role="navigation">
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">1</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">3</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--active">4</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">5</a>
        </li>
        <li class="pagination__item pagination__item--ellipsis">
            <span class="visually-hidden">…</span>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--transparent">50</a>
        </li>
        <li class="pagination__item">
            <a href="#" class="btn btn--circle btn--link pagination__btn pagination__btn--control">
                <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </li>
    </ul>
</div>

Preloader 4.19

Preloader indicates loading of entire page or various part(s) - panels, widget, etc. - of it.

Default styling

Loading…
.preloader--large

Large preloader.

Loading…
.preloader--inverse

Inverse preloader for dark backgrounds.

Loading…
.preloader--block

Block preloader (centered with vertical space) – use it inside panels, widgets or other parts of the page.

Loading…
.preloader--centered

Horizontally and vertically centered preloader intended for full screen (combine with preloader-large modifier) and modal overlay.

Loading…
<div class="demo__canvas demo__canvas--dark" style="position: relative;">
<span class="preloader {$modifiers}">
    <span class="preloader__caption visually-hidden">Loading…</span>
</span>
</div>

Overlay 4.20

Overlay layer covers entire browser window and prevents everything on the page from user's mad clicks. It serves as a placeholder for preloader - use large preloader for full screen overlay and normal preloader in modals. (Ignore data- attribute on trigger button.)

Default styling

Show overlay
.overlay--transparent

Transparent layer - no visual feedback.

Show overlay
<a href="#" class="btn btn--primary" data-show-overlay>Show overlay</a>
<div class="overlay {$modifiers}" style="display: none;">
    <span class="preloader preloader--large preloader--centered">
        <span class="preloader__caption visually-hidden">Loading…</span>
    </span>
</div>

Standard Modal Overlay 4.20.1

Use default size preloader in standard modals.

Default styling

<button type="button" class="btn btn--primary" data-toggle="modal" data-target="#myModalOverlay">Standard modal with Overlay</button>
<div class="modal fade" id="myModalOverlay" tabindex="-1" role="dialog" aria-labelledby="myModalOverlayLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="myModalOverlayLabel">Modal title</h1>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                    Vestibulum viverra condimentum neque, at tincidunt neque lobortis ut. Sed pellentesque eget nisl quis consectetur.
                    Fusce vel lobortis ante. Curabitur luctus ante ac risus viverra sodales.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae consectetur lorem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                </p>
            </div>
        </div>
        <div class="overlay overlay--modal">
            <span class="preloader preloader--centered">
                <span class="preloader__caption visually-hidden">Loading…</span>
            </span>
        </div>
    </div>
</div>

Side Modal Overlay 4.20.2

Use default size preloader in side modal.

Default styling

<button type="button" class="btn btn--primary" data-toggle="modal" data-target="#mySideModalOverlay">Side modal with Overlay</button>
<div class="modal modal--side fade js-modal-side" id="mySideModalOverlay" tabindex="-1" role="dialog" aria-labelledby="sideModalOverlay" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close--large modal__close" data-dismiss="modal" aria-hidden="true"><span class="icon icon--close"></span></button>
                <h1 id="sideModalOverlay">Modal title</h1>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                    Vestibulum viverra condimentum neque, at tincidunt neque lobortis ut. Sed pellentesque eget nisl quis consectetur.
                    Fusce vel lobortis ante. Curabitur luctus ante ac risus viverra sodales.
                    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae consectetur lorem.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula nunc, volutpat id faucibus vel, ullamcorper cursus orci.
                </p>
                <p>
                    <button type="button" id="js-show-modal-alerts" class="btn">Show alert in modal side</button>
                </p>
                <button type="button" class="btn btn--primary">Save</button>
                <a href="#" title="" data-dismiss="modal" aria-hidden="true" class="secondary-action">Cancel</a>
            </div>
        </div>
        <div class="overlay overlay--modal overlay--modal-side">
            <span class="preloader preloader--centered">
                <span class="preloader__caption visually-hidden">Loading…</span>
            </span>
        </div>
    </div>
</div>

Block Overlay 4.20.3

Panel Overlay should be used in any widget, block of page etc. Its parent must have relative position.

Default styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar lacus ut tortor iaculis, laoreet lacinia purus vehicula. Proin at tincidunt nunc, sed feugiat mauris. Maecenas eget neque non felis rhoncus viverra quis sed odio. Morbi rutrum, arcu non dictum posuere, orci eros condimentum dui, at pharetra arcu felis vitae augue. Aenean vitae velit sapien. Praesent tempor mattis arcu, in lacinia diam dignissim non. Mauris ac risus nibh. Curabitur id convallis nisi. Donec euismod at lacus vitae interdum. Phasellus laoreet sem nulla, ut pellentesque nunc pretium eget. Vestibulum non euismod mi. Donec enim urna, imperdiet at convallis ultricies, egestas non diam. Integer quis sapien nulla. Curabitur ut lobortis ante, sit amet rutrum magna. Vivamus eu odio ante. In mollis felis vitae ullamcorper fermentum.

Loading…
<div class="demo__canvas demo__canvas--dark" style="position: relative;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar lacus ut tortor iaculis, laoreet lacinia purus vehicula. Proin at tincidunt nunc, sed feugiat mauris. Maecenas eget neque non felis rhoncus viverra quis sed odio. Morbi rutrum, arcu non dictum posuere, orci eros condimentum dui, at pharetra arcu felis vitae augue. Aenean vitae velit sapien. Praesent tempor mattis arcu, in lacinia diam dignissim non. Mauris ac risus nibh. Curabitur id convallis nisi. Donec euismod at lacus vitae interdum. Phasellus laoreet sem nulla, ut pellentesque nunc pretium eget. Vestibulum non euismod mi. Donec enim urna, imperdiet at convallis ultricies, egestas non diam. Integer quis sapien nulla. Curabitur ut lobortis ante, sit amet rutrum magna. Vivamus eu odio ante. In mollis felis vitae ullamcorper fermentum.</p>
    <div class="overlay overlay--block">
        <span class="preloader preloader--centered">
            <span class="preloader__caption visually-hidden">Loading…</span>
        </span>
    </div>
</div>

Badges 4.21

Default styling

.badge--super

Badge as superscript

<span class="badge-holder">
    <a href="#">16 candidates</a> <span class="badge {$modifiers}">3</span>
</span>

Recruitment Phase 4.22

Default styling

Recruitment phase
.rec-phase--suitable

Pre-selected, Pre-selected for manager, Approved for invitation, Approved for interview

Recruitment phase
.rec-phase--unsuitable

Unsuitable

Recruitment phase
.rec-phase--rejected

Rejected

Recruitment phase
<span class="rec-phase {$modifiers}">
    <span class="rec-phase__state">Recruitment phase</span>
</span>

Recruitment Phase – Interview 4.22.1

Default styling

Round 1 24.12. 15:00
<span class="rec-phase">
    <span class="rec-phase__round">Round 1</span>
    <span class="rec-phase__date-time">24.12. 15:00</span>
</span>

Candidate Count 4.23

Default styling

23 4
<span class="candidate-count">
    <span class="candidate-count__icon">
        <span class="icon icon--medium icon--left icon--middle icon--candidate gray-lighter" aria-hidden="true"></span>
    </span>
    <span class="candidate-count__total">23</span>
    <span class="badge badge--super">4</span>
</span>

Content Tabs 4.24

Default styling

If the attachment is not displayed correctly, you can download it.

Arnold_Schwarzenegger_CV-german.pdf 10. 1. 2015

CV
<div class="demo__canvas">
    <div class="content-tabs">
        <div class="content-tabs__head">
            <ul class="content-tabs__tabs" role="tablist">
                <li id="tab-1" class="content-tab content-tab--active" role="tab">
                    <span class="icon icon--file-pdf content-tab__icon" aria-hidden="true"></span>
                    <span class="content-tab__title">Arnold_Schwarzenegger_CV-german.pdf</span>
                </li>
                <li id="tab-2" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--vq-disable content-tab__icon" aria-hidden="true"></span>
                        <span class="content-tab__title">Sylvester Stallone Video Questionnaire</span>
                    </a>
                </li>
                <li id="tab-3" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--psychometry content-tab__icon" aria-hidden="true"></span>
                        <span class="content-tab__title">TomášKorunaCV.docx</span>
                    </a>
                </li>
                <li id="tab-4" class="content-tab" role="tab">
                    <a href="#" class="content-tab__link">
                        <span class="icon icon--flexidot icon--middle" aria-hidden="true">64</span>
                        <span class="content-tab__title">FlexiDot-osobni-informace</span>
                    </a>
                </li>
                <li class="content-tab content-tab--more">
                    <a href="#">+ 5 more</a>
                </li>
            </ul>
        </div>
        <div class="content-tabs__main" aria-labeledby="tab-1" role="tabpanel">
            <div class="content-tabs__hint">
                If the attachment is not displayed correctly, you can <a href="#">download it</a>.
            </div>
            <div class="content-tabs__header">
                <div class="grid grid--middle"><!--
                    --><div class="col col-8--md">
                        <p>
                            <span class="icon icon--file-pdf icon--medium icon--left icon--middle" aria-hidden="true"></span>
                            <span class="offset-right--u-6">Arnold_Schwarzenegger_CV-german.pdf</span> <span class="text-nowrap gray-light">10. 1. 2015</span>
                        </p>
                    </div><!--
                    --><div class="col col-4--md left-to-right">
                        <p>
                            <a href="#" class="btn btn--link"><span class="icon icon--download icon--medium icon--middle icon--left" aria-hidden="true"></span> Download</a>
                        </p>
                    </div><!--
                --></div>
            </div>
            <div class="content-tabs__body">
                <a href="#" class="content-tabs__action" aria-label="Download" title="Download"><span class="icon icon--medium icon--download"></span></a>
                <span style="display: block; height: 200px; line-height: 200px; text-align: center;">CV</span>
            </div>
            <div class="content-tabs__footer">
                <p>Additional information</p>
            </div>
        </div>
    </div>
</div>

Notes 4.25

Full power Note 4.25.1

Remove .notes-wrapper__body--preview class to show all notes.

Default styling

Alex Manager

Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum felis in mauris placerat eleifend et eu augue. Proin maximus nisi vel felis aliquam, ac venenatis sem dapibus. Sed dapibus, urna eget sollicitudin semper, enim tellus sagittis velit, id convallis lorem ante a lacus. Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.

<div class="notes-wrapper">
    <div class="notes-wrapper__body notes-wrapper__body--preview">
        <div class="note note--add">
            <p class="note__actions print-hidden">
                <a href="#" class="note__action">
                    <span class="icon icon--plus" aria-hidden="true"></span>
                    <span class="note__action-text">Add note</span>
                </a>
            </p>
        </div>
        <div class="note note--active">
            <form>
                <p class="note__header">
                    <span class="pull-left">Alex Manager</span>
                    <span class="note--unimportant pull-right" style="visibility: hidden">Saving</span>
                </p>
                <p class="note__body">
                    <textarea></textarea>
                </p>
                <p class="note__footer">
                    <a class="btn note__btn">Done</a>
                </p>
            </form>
        </div>
        <div class="note">
            <p class="note__header print-hidden">
                <span class="pull-left">Alex Manager</span>
                <span class="pull-right">14.2.2014 12:34</span>
            </p>
            <p class="note__body">Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.</p>
            <p class="note__footer print-hidden">
                <a href="#" title="Edit note">
                    <span class="icon icon--edit icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Edit note</span>
                </a>
                <a href="#" title="Delete note">
                    <span class="icon icon--trash icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Delete note</span>
                </a>
            </p>
        </div>
        <div class="note">
            <p class="note__header print-hidden">
                <span class="pull-left">Alex Manager</span>
                <span class="pull-right">14.2.2014 12:34</span>
            </p>
            <p class="note__body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum felis in mauris placerat eleifend et eu augue. Proin maximus nisi vel felis aliquam, ac venenatis sem dapibus. Sed dapibus, urna eget sollicitudin semper, enim tellus sagittis velit, id convallis lorem ante a lacus. Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien, fermentum nec lectus condimentum, ultricies aliquet leo.</p>
        <p class="note__footer print-hidden">
                <a href="#" title="Edit note">
                    <span class="icon icon--edit icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Edit note</span>
                </a>
                <a href="#" title="Delete note">
                    <span class="icon icon--trash icon--medium" aria-hidden="true"></span>
                    <span class="visually-hidden">Delete note</span>
                </a>
            </p>
        </div>
    </div>
    <div class="notes-wrapper__footer">
        <a href="#">Show all notes</a>
    </div>
</div>

Single Note 4.25.2

Default styling

Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien…

<p class="single-note">Sed sed placerat enim, at ultrices nisl. Suspendisse nulla sapien…</p>

Login 4.26

Login serves as a wrapper for Login form.

Default styling

<div class="login">
    <div class="login__header">
        <h1 class="brand">
            <svg width="100" height="25" aria-label="Teamio">
                <image width="100" height="25" src="dist/images/teamio-black.png" xlink:href="dist/images/teamio-black.svg" />
            </svg>
        </h1>
    </div>
    <div class="login__frame">
        <h1>Welcome,</h1>
        <p class="offset-bottom--u-8">before you can review list of candidates, set your new password that will be used to access Teamio.</p>
        <span style="display: block; text-align: center; line-height: 150px; color: #ccc; background-color: #eee;">Login form</span>
    </div>
</div>

Login Form 4.27

Login form shall be embedded in Login component.

Default styling

<form role="form" class="login-form">
    <fieldset class="login-form__section">
        <label for="password" class="form-group__label"><strong>Yout new password</strong></label>
        <input type="password" id="password" class="form-control login-form__password">
        <span class="login-form__password-toggle">
            <input id="reveal-password" type="checkbox" name="reveal_password" data-reveal-password="password" />
            <label for="reveal-password">Show</label>
        </span>
    </fieldset>
    <button type="submit" class="btn btn--primary">Login</button>
</form>

Popovers 4.28

For complete documentation see http://getbootstrap.com/javascript/#popovers.

Static Popovers 4.28.1

Default styling

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

I understand

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

I understand

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

I understand

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

I understand
<div class="clearfix">
    <div class="popover top" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover top</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover right" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover right</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover bottom" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover bottom</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
    <div class="popover left" style="position: relative; display: block; float: left; margin: 20px;">
        <div class="arrow"></div>
        <div class="popover-content">
            <h3>Popover left</h3>
            <p>Sed posuere consectetur est at lobortis. <a href="#">Aenean eu leo quam</a>. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            <a class="btn btn--primary">I understand</a>
        </div>
    </div>
</div>

Live Demo 4.28.2

Default styling

<p>
    <button type="button" class="btn btn--primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</p>

Line Manager Opinion 4.29

Default styling

Waiting for reaction: Winnie Pooh

To invite: Piglet

Not suitable: Tigger

<p>
    <span class="lm-opinion lm-opinion--waiting">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">Waiting for reaction:</span>
        Winnie Pooh
    </span>
</p>
<p>
    <span class="lm-opinion lm-opinion--suitable">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">To invite:</span>
        Piglet
    </span>
</p>
<p>
    <span class="lm-opinion lm-opinion--unsuitable">
        <span class="icon icon--opinion" aria-hidden="true"></span>
        <span class="visually-hidden">Not suitable:</span>
        Tigger
    </span>
</p>

User Menu 4.30

Default styling

Jana Nováková
Státní plavební správa
<div class="clearfix">
    <div class="user-menu">
        <div class="user-menu__header logged-user" data-toggle-user-menu="js-user-menu">
            <div class="logged-user__name"><strong>Jana Nováková</strong></div>
            <div class="logged-user__company">Státní plavební správa</div>
            <span class="caret caret--sm user-menu-large-screen-indicator"></span>
        </div>
        <div class="user-menu__dropdown" id="js-user-menu">
            <ul class="user-menu__menu">
                <li class="user-menu__menu-item">
                    <a href="#">Change company</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">
                        <span class="icon icon--medium icon--middle icon--left icon--settings" aria-hidden="true"></span>
                        Settings
                    </a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">
                        <span class="icon icon--medium icon--middle icon--left icon--off" aria-hidden="true"></span>
                        Logout
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Language Selector 4.30.1

Default styling

<div class="clearfix">
    <div class="user-menu user-menu--narrow">
        <div class="user-menu__header selected-language" data-toggle-user-menu="js-lang-menu">
            <div class="selected-language__name">Čeština</div>
            <span class="caret caret--sm user-menu-large-screen-indicator"></span>
        </div>
        <div class="user-menu__dropdown" id="js-lang-menu">
            <ul class="user-menu__menu">
                <li class="user-menu__menu-item">
                    <a href="#">Čeština</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">English</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">Suomi</a>
                </li>
                <li class="user-menu__menu-item">
                    <a href="#">Polski</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Widget 4.31

Widget Container 4.31.1

Widget footer can be either outside or inside. If there are no rows to display, use info message to inform the user.

Default styling

Active vacancies

Optional info message.

Widget rows
<div class="widget" aria-labelledby="widgetLabel1">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel1">Active vacancies</h2>
        <a class="widget__header-action btn btn--primary">
            <span class="icon icon--plus icon--middle" aria-hidden="true"></span><!--
            --><span class="offset-left--u-4 hidden-xs">New vacancy</span>
        </a>
    </div>
    <div class="widget__main">
        <div class="widget__body">
            <div class="widget__info">
                <p>Optional info message.</p>
            </div>
            <span style="display: block; line-height: 80px; text-align: center; background-color: #ddd;">Widget rows</span>
        </div>
        <div class="widget__footer widget__footer--inside">
            <a href="#">+ Show 10 more rows</a>
        </div>
    </div>
    <div class="widget__footer">
        <a href="#">All vacancies</a>
    </div>
</div>

Widget Container with Padding 4.31.2

Default styling

58 157 interesting CVs

<div style="max-width: 320px;">
    <div class="widget" aria-labelledby="widgetLabel2">
        <div class="widget__header">
            <h2 class="widget__header-title" id="widgetLabel2"><strong>58 157</strong> interesting CVs</h2>
        </div>
        <div class="widget__main">
            <div class="widget__body widget__body--padded text-center">
                <p class="offset-top--u-5 offset-bottom--u-7"><img src="dist/images/widget-jobs-cv.svg" alt="" class="img-responsive img-responsive--center"></p>
                <a href="#" class="btn btn--link">Search CVs</a>
            </div>
        </div>
    </div>
</div>

Widget Empty States 4.31.3

Default styling

Waiting after interview

There are no candidates after interview waiting for your reaction.

Scheduled interviews

There are no scheduled interviews.

Total not evaluated

There are no not evaluated candidates.

<div class="widget" aria-labelledby="widgetLabel3">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel3">Active vacancies</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body">
            <div class="widget__info">
                <div class="grid text-center"><!--
                    --><div class="col col-6--md">
                        <a href="#" class="link--no-underline">
                            <p>
                                <span class="icon icon--people icon--middle widget__info__icon widget__info__icon--above" aria-hidden="true"></span>
                                <span class="btn btn--primary">New vacancy</span>
                            </p>
                        </a>
                    </div><!--
                    --><div class="col col-6--md widget__info__secondary-action">
                        <a href="#" class="link--no-underline">
                            <p>
                                <span class="icon icon--cart-full icon--middle widget__info__icon widget__info__icon--above" aria-hidden="true"></span>
                                <span class="btn btn--link">Discounted packages</span>
                            </p>
                        </a>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel4">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel4">Waiting after interview</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--interview-waiting widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                        --><div class="col col--fluid col-12--sm">
                        <p>There are no candidates after interview waiting for your reaction.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel5">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel5">Scheduled interviews</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--interview-schedule widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                        --><div class="col col--fluid col-12--sm">
                        <p>There are no scheduled interviews.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>
<div class="widget" aria-labelledby="widgetLabel6">
    <div class="widget__header">
        <h2 class="widget__header-title" id="widgetLabel6">Total not evaluated</h2>
    </div>
    <div class="widget__main">
        <div class="widget__body widget__body--candidates widget__body--empty">
            <div class="widget__info">
                <div class="grid grid--fluid grid--compact grid--middle"><!--
                    --><div class="col col--fluid">
                        <span class="icon icon--middle widget__info__icon" aria-hidden="true"></span>
                    </div><!--
                    --><div class="col col--fluid col-12--sm">
                        <p>There are no not evaluated candidates.</p>
                    </div><!--
                --></div>
            </div>
        </div>
    </div>
</div>

Candidate Group 4.32

Default styling

<div class="candidate-group">
    <a href="#" class="candidate-group__body">
        <span class="candidate-count">
            <span class="candidate-count__total"><strong>23</strong></span>
            <span class="badge badge--super">4</span>
        </span>
        <span class="candidate-group__label">neposouzení</span>
    </a>
</div>

Blog Preview 4.33

Default styling

<div class="blog-preview">
    <a href="#" class="blog-preview__link">
        <div class="blog-preview__item">
            <div class="blog-preview__item-image">
                <img src="dist/images/blog-preview.jpg" alt="">
            </div>
            <div class="blog-preview__item-body">
                <h3 class="blog-preview__item-body__title">Nový formulář hledání CV</h3>
                <p class="blog-preview__item-body__date">12. 5. 2015</p>
            </div>
        </div>
    </a>
    <a href="#" class="blog-preview__link">
        <div class="blog-preview__item">
            <div class="blog-preview__item-image">
                <img src="dist/images/blog-preview.jpg" alt="">
            </div>
            <div class="blog-preview__item-body">
                <h3 class="blog-preview__item-body__title">Zlepšujeme doručitelnost e-mailů uchazečům</h3>
                <p class="blog-preview__item-body__date">4. 3. 2015</p>
            </div>
        </div>
    </a>
</div>

Data Rows 4.34

Data Rows are intended for use inside dashboard widgets.

Active Vacancy 4.34.1

Default styling

SCALA Developer with fluent Chinese
<div class="data-row data-row-vacancy">
    <div class="grid grid--compact grid--middle"><!--
        --><div class="col col-6--md">
            <div class="data-row__heading">
                SCALA Developer with fluent Chinese
            </div>
        </div><!--
        --><div class="col col-6--md">
            <div class="data-row__candidate-groups">
                <div class="candidate-group">
                    <a href="#" class="candidate-group__body">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large"><strong>23</strong></span>
                            <span class="badge badge--super">4</span>
                        </span>
                        <span class="candidate-group__label">neposouzení</span>
                    </a>
                </div>
                <div class="candidate-group">
                    <a href="#" class="candidate-group__body">
                        <span class="candidate-count">
                            <span class="candidate-count__total text-large"><strong>18</strong></span>
                        </span>
                        <span class="candidate-group__label">ve hře</span>
                    </a>
                </div>
            </div><!--
        --></div><!--
    --></div>
</div>

Schedule 4.34.2

Use for both Candidate Waiting after Interview and Scheduled Interview.

Default styling

21 days after round 1
SCALA Developer with fluent Chinese
(Round 2)
4 days after round 2
UX designer
(Round 3)
<div class="data-row data-row-schedule">
    <div class="data-row-schedule__header data-row-schedule__header--emphasize">
        <span class="data-row-schedule__header__title">21 days</span>
        <span class="data-row-schedule__header__subtitle">after round 1</span>
    </div>
    <div class="data-row-schedule__body">
        <div class="data-row-schedule__body__title">
            <a href="#">Jana Nováková</a>
        </div>
        <div class="data-row-schedule__body__subtitle">
            <div class="data-row-schedule__body__subtitle__line-1">SCALA Developer with fluent Chinese</div>
            <div class="data-row-schedule__body__subtitle__line-2">(Round 2)</div>
        </div>
    </div>
</div>
<div class="data-row data-row-schedule">
    <div class="data-row-schedule__header data-row-schedule__duration">
        <span class="data-row-schedule__header__title">4 days</span>
        <span class="data-row-schedule__header__subtitle">after round 2</span>
    </div>
    <div class="data-row-schedule__body">
        <div class="data-row-schedule__body__title">
            <a href="#">Robert Blecha</a>
        </div>
        <div class="data-row-schedule__body__subtitle">
            <div class="data-row-schedule__body__subtitle__line-1">UX designer</div>
            <div class="data-row-schedule__body__subtitle__line-2">(Round 3)</div>
        </div>
    </div>
</div>

Banner 4.35

Default Banner is vertically aligned to top (add .grid--middle to align it to middle – see example).

Available banner modifiers are: .banner--error

Default styling

<div class="banner-container">
    <div class="banner">
        <a href="#" class="banner__close close">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </a>
        <div class="grid grid--fluid grid--compact">
            <div class="col col--fluid banner__icon">
                <span class="icon icon--info"></span>
            </div>
            <div class="col col--fluid">
                <div class="banner__body">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id finibus ante. Aliquam sit amet orci sed lacus faucibus tempor vitae et mi.</p>
                    <p>Pellentesque eu ligula gravida, efficitur elit vitae, varius mi. Morbi aliquet massa purus, vitae porttitor ante efficitur sed. Cras et viverra purus, vel euismod magna.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="banner banner--error">
        <a href="#" class="banner__close close">
            <span class="icon icon--close" aria-hidden="true"></span>
            <span class="visually-hidden">Close</span>
        </a>
        <div class="grid grid--fluid grid--compact grid--middle">
            <div class="col col--fluid banner__icon">
                <span class="icon icon--warning"></span>
            </div>
            <div class="col col--fluid">
                <div class="banner__body">
                    <p>
                        We are sorry, something has broken.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Breadcrumbs 4.36

Default styling

<div class="breadcrumbs">
    <div class="container">
        <a href="#" class="breadcrumbs__link">Recruitments</a>
        <span class="breadcrumbs__separator">/</span>
        <a href="#" class="breadcrumbs__link">Marketing Specialist</a>
        <span class="breadcrumbs__separator">/</span>
        <a href="#" class="breadcrumbs__link">Candidate list</a>
        <span class="breadcrumbs__separator">/</span>
        <span class="breadcrumbs__current-page">Elena Diana</span>
    </div>
</div>

Icon Group 4.37

Default styling

GDPR expired E-mail
<span class="icon-group">
    <span class="icon-group__icon" title="GDPR expired">
        <span class="icon icon--minus-hexagon icon--medium icon--middle text-red--dark" aria-hidden="true"></span>
        <span class="visually-hidden">GDPR expired</span>
    </span>
    <span class="icon-group__icon" title="E-mail">
        <span class="icon icon--mail icon--medium icon--middle" aria-hidden="true"></span>
        <span class="visually-hidden">E-mail</span>
    </span>
</span>

Dropdowns 4.38

For complete documentation see http://getbootstrap.com/javascript/#dropdowns.

Default dropdown menu position is bottom left. You can add classes .dropup and/or .dropdown--right to change menu position.

Default styling

<div class="dropdown">
    <a href="#" id="dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel1">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 3</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropup">
    <a href="#" id="dropdownLabel2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn--link btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel2">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropdown--right">
    <a href="#" id="dropdownLabel3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel3">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>
<div class="dropdown dropdown--right dropup">
    <a id="dropdownLabel4" role="button" data-target="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn--link btn--circle">
        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Context Menu</span>
    </a>
    <div class="dropdown-menu" role="menu" aria-labelledby="dropdownLabel4">
        <div class="arrow"></div>
        <ul class="dropdown-menu__list">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action 2</a></li>
        </ul>
    </div>
</div>

Labels 4.39

Default styling

Marketing
.label--success

Success label

Marketing
.label--warning

Warning label

Marketing
.label--danger

Danger label

Marketing
<span class="label {$modifiers}">Marketing</span><br>

Profile Photo 4.40

Default styling

Philip Morris

PM

PM

PM

<p>
    <span class="profile-photo">
        <img src="dist/images/cand-photo.jpg" alt="Philip Morris" class="profile-photo__image img-responsive">
    </span>
</p>
<p>
    <span class="profile-photo">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>
<p>
    <span class="profile-photo profile-photo--male">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>
<p>
    <span class="profile-photo profile-photo--female">
        <span class="profile-photo__initials">PM</span>
    </span>
</p>

Profile 4.41

See Profile Preview.

Default styling

<div class="profile"></div>

Collapse 4.42

For complete documentation see http://getbootstrap.com/javascript/#collapse.

Default styling

Praesent vehicula sed libero sed lobortis. Donec vestibulum nibh est, ac condimentum ligula maximus tempus. Maecenas imperdiet turpis condimentum ornare cursus. Proin eu posuere risus. Vivamus efficitur, nisi quis bibendum mollis, velit leo sollicitudin leo, in consectetur nibh nunc eget eros.

<a href="#collapse-demo" class="collapse-toggle--has-caret collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-demo">
    <span class="caret caret--sm"></span>Tell me more…
</a>
<div class="collapse" id="collapse-demo">
    <p>Praesent vehicula sed libero sed lobortis. Donec vestibulum nibh est, ac condimentum ligula maximus tempus. Maecenas imperdiet turpis condimentum ornare cursus. Proin eu posuere risus. Vivamus efficitur, nisi quis bibendum mollis, velit leo sollicitudin leo, in consectetur nibh nunc eget eros.</p>
</div>

Rating 4.43

Read-only Stars 4.43.1

Default styling

Rating: 3/5
.stars--large

Large stars

Rating: 3/5
<span class="stars {$modifiers}" data-stars="2.5"><span class="visually-hidden">Rating: 3/5</span></span>

Flags 4.44

Flags for representation of languages (or accompanying them).

Default styling

  • en English
  • bg Bulgarian
  • cs Czech
  • fi Finnish
  • fr French
  • it Italian
  • hu Hungarian
  • de German
  • pl Polish
  • ro Romanian
  • ru Russian
  • sk Slovak
  • es Spanish
  • tr Turkish
  • uk Ukrainian
  • uk Estonian
  • uk Lithuanian
  • uk Latvian
<ul>
    <li><img src="dist/images/flag-en.png" alt="en" class="flag flag--left"> English</li>
    <li><img src="dist/images/flag-bg.png" alt="bg" class="flag flag--left"> Bulgarian</li>
    <li><img src="dist/images/flag-cs.png" alt="cs" class="flag flag--left"> Czech</li>
    <li><img src="dist/images/flag-fi.png" alt="fi" class="flag flag--left"> Finnish</li>
    <li><img src="dist/images/flag-fr.png" alt="fr" class="flag flag--left"> French</li>
    <li><img src="dist/images/flag-it.png" alt="it" class="flag flag--left"> Italian</li>
    <li><img src="dist/images/flag-hu.png" alt="hu" class="flag flag--left"> Hungarian</li>
    <li><img src="dist/images/flag-de.png" alt="de" class="flag flag--left"> German</li>
    <li><img src="dist/images/flag-pl.png" alt="pl" class="flag flag--left"> Polish</li>
    <li><img src="dist/images/flag-ro.png" alt="ro" class="flag flag--left"> Romanian</li>
    <li><img src="dist/images/flag-ru.png" alt="ru" class="flag flag--left"> Russian</li>
    <li><img src="dist/images/flag-sk.png" alt="sk" class="flag flag--left"> Slovak</li>
    <li><img src="dist/images/flag-es.png" alt="es" class="flag flag--left"> Spanish</li>
    <li><img src="dist/images/flag-tr.png" alt="tr" class="flag flag--left"> Turkish</li>
    <li><img src="dist/images/flag-uk.png" alt="uk" class="flag flag--left"> Ukrainian</li>
    <li><img src="dist/images/flag-est.png" alt="uk" class="flag flag--left"> Estonian</li>
    <li><img src="dist/images/flag-lt.png" alt="uk" class="flag flag--left"> Lithuanian</li>
    <li><img src="dist/images/flag-lv.png" alt="uk" class="flag flag--left"> Latvian</li>
</ul>

Name Panel 4.45

Default styling

Kateřina Svobodečková

Pre-selected To invite: Denis

+420 607 132 558

katerina.s@gmail.com

<div class="name-panel">
    <div class="name-panel__section name-panel__header">
        <div class="nav-prev-next" role="navigation">
            <a href="#" class="btn btn--circle btn--link btn--opaque nav-prev-next__prev">
                <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Prev</span>
            </a>
            <a href="#" class="btn btn--circle btn--link btn--opaque nav-prev-next__next">
                <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </a>
        </div>
        <h1 class="name-panel__header__name h2">Kateřina Svobodečková</h1>
        <div class="name-panel__header__status">
            <span class="rec-phase rec-phase--suitable">Pre-selected</span>
            <span class="lm-opinion lm-opinion--suitable">
                <span class="icon icon--opinion" aria-hidden="true"></span>
                <span class="visually-hidden">To invite:</span>
                Denis
            </span>
        </div>
    </div>
    <div class="name-panel__section name-panel__actions">
        <a href="#" class="btn btn-approve btn-approve--active"><span class="icon icon--left icon--thumb-up" aria-hidden="true"></span> Invite</a>
        <a href="#" class="btn btn-disapprove"><span class="icon icon--left icon--thumb-down" aria-hidden="true"></span> Unsuitable</a>
    </div>
    <div class="name-panel__section name-panel__contact">
        <p class="pull-left offset-right--u-8"><span class="icon icon--phone icon--left" aria-hidden="true"></span> +420 607 132 558</p>
        <p class="pull-left"><span class="icon icon--mail icon--left" aria-hidden="true"></span> <a href="#">katerina.s@gmail.com</a></p>
    </div>
</div>

Richtext Container 4.46

Place basic HTML markup (h2, p, ul/ol) inside element with richtext class to fix margins between elements.

Default styling

Donec quis ante egestas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis condimentum hendrerit. In sodales consectetur massa, sit amet feugiat mi vehicula sed. Duis eu nisi lectus. Vivamus et elementum quam, finibus laoreet tellus.

Cras vitae velit nunc. Proin neque nibh, euismod vulputate hendrerit et, hendrerit placerat felis. Integer lobortis nisl arcu, vitae euismod tortor consectetur eu. Suspendisse eget urna congue, interdum arcu vitae, pretium neque. Cras a egestas erat. In hac habitasse platea dictumst.

Nullam fermentum iaculis leo

Proin vitae augue enim. Donec lectus ante, ultrices sit amet lectus nec, pharetra egestas arcu.

  • Sed ac risus gravida, euismod quam et, hendrerit mi.
  • Duis sit amet dolor elementum, commodo massa id, porttitor felis.
  • Suspendisse potenti.
  • Nullam fermentum iaculis leo, quis porta justo pellentesque eget.

Nam vitae elit lacus, at luctus tellus. Nam gravida magna sed velit imperdiet aliquet. Maecenas eget mauris id lorem sodales varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dictum iaculis mi, non laoreet mauris sodales quis. Nulla adipiscing cursus lobortis.

<div class="richtext">
    <h2>Donec quis ante egestas</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis condimentum hendrerit. In sodales consectetur massa, sit amet feugiat mi vehicula sed. Duis eu nisi lectus. Vivamus et elementum quam, finibus laoreet tellus.</p>
    <p>Cras vitae velit nunc. Proin neque nibh, euismod vulputate hendrerit et, hendrerit placerat felis. Integer lobortis nisl arcu, vitae euismod tortor consectetur eu. Suspendisse eget urna congue, interdum arcu vitae, pretium neque. Cras a egestas erat. In hac habitasse platea dictumst.</p>
    <h2>Nullam fermentum iaculis leo</h2>
    <p>Proin vitae augue enim. Donec lectus ante, ultrices sit amet lectus nec, pharetra egestas arcu.</p>
    <ul>
        <li>Sed ac risus gravida, euismod quam et, hendrerit mi.</li>
        <li>Duis sit amet dolor elementum, commodo massa id, porttitor felis.</li>
        <li>Suspendisse potenti.</li>
        <li>Nullam fermentum iaculis leo, quis porta justo pellentesque eget.</li>
    </ul>
    <p>Nam vitae elit lacus, at luctus tellus. Nam gravida magna sed velit imperdiet aliquet. Maecenas eget mauris id lorem sodales varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque dictum iaculis mi, non laoreet mauris sodales quis. Nulla adipiscing cursus lobortis.</p>
</div>

Candidate Pipeline 4.47

Default styling

<div class="candidate-pipeline">
    <div class="candidate-group candidate-group--not-evaluated">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">62</span>
                <span class="badge badge--super">17</span>
            </span>
            <span class="candidate-group__label">not evaluated</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--in-process">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">49</span>
            </span>
            <span class="candidate-group__label">in process</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--out-of-process">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">27</span>
            </span>
            <span class="candidate-group__label">out of process</span>
        </a>
    </div>
    <div class="candidate-group candidate-group--all">
        <a href="#" class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">138</span>
            </span>
            <span class="candidate-group__label">candidates</span>
        </a>
    </div>
</div>

Empty Candidate Pipeline 4.47.1

Default styling

0 not evaluated
0 in process
0 out of process
0 candidates
<div class="candidate-pipeline">
    <div class="candidate-group candidate-group--empty candidate-group--not-evaluated">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">not evaluated</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--in-process">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">in process</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--out-of-process">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">out of process</span>
        </span>
    </div>
    <div class="candidate-group candidate-group--empty candidate-group--all">
        <span class="candidate-group__body">
            <span class="candidate-count">
                <span class="candidate-count__total text-xlarge">0</span>
            </span>
            <span class="candidate-group__label">candidates</span>
        </span>
    </div>
</div>

Vacancy Status 4.48

Vacancy status provides predefined colors for possible vacancy statuses.

Default styling

Active

Suspended

Archived

Draft

<p><span class="vacancy-status vacancy-status--active">Active</span></p>
<p><span class="vacancy-status vacancy-status--suspended">Suspended</span></p>
<p><span class="vacancy-status vacancy-status--archived">Archived</span></p>
<p><span class="vacancy-status vacancy-status--draft">Draft</span></p>

Content Header 4.49

Default styling

Credit and Collections Analyst (German and French)

.content-header--stacked

Actions wrap to new line on mobile

Credit and Collections Analyst (German and French)

<div class="content-header {$modifiers}">
    <h1 class="content-header__title">Credit and Collections Analyst (German and French)</h1>
    <div class="content-header__actions">
        <a class="btn">Edit</a>
    </div>
</div>

Summary Table 4.50

Default styling

Total 160 100 %
Jobs.cz 75 47 %
Prace.cz 54 34 %
PraceZaRohem 21 13 %
Monster 8 5 %
+ 6 others 2 1 %
<table class="table-summary table--wide valign-bottom">
    <thead>
    <tr>
        <th class="text-left text-uppercase">Total</th>
        <th class="table__col--u-10 text-large text-right">160</th>
        <th class="table__col--u-10 text-right">100 %</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><span class="color-flag color-flag--jobs"></span>Jobs.cz</td>
        <td class="text-large text-right">75</td>
        <td class="text-right">47 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--prace"></span>Prace.cz</td>
        <td class="text-large text-right">54</td>
        <td class="text-right">34 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--pracezarohem"></span>PraceZaRohem</td>
        <td class="text-large text-right">21</td>
        <td class="text-right">13 %</td>
    </tr>
    <tr>
        <td><span class="color-flag color-flag--monster"></span>Monster</td>
        <td class="text-large text-right">8</td>
        <td class="text-right">5 %</td>
    </tr>
    <tr>
        <td><span class="color-flag"></span><a href="#">+ 6 others</a></td>
        <td class="text-large text-right">2</td>
        <td class="text-right">1 %</td>
    </tr>
    </tbody>
</table>

Empty Summary Table 4.50.1

Default styling

Total 0
<table class="table-summary table-summary--empty table--wide valign-bottom">
    <thead>
    <tr>
        <th class="text-left text-uppercase">Total</th>
        <th class="table__col--u-10 text-large text-right">0</th>
    </tr>
    </thead>
</table>

Color Flag 4.51

Default styling

.color-flag--jobs

Jobs.cz

.color-flag--prace

Prace.cz

.color-flag--pracezarohem

PraceZaRohem

.color-flag--monster

Monster

.color-flag--career-section

Career secion

.color-flag--profesia

Profesia

<span class="color-flag {$modifiers}"></span>

Messages 4.52

Default styling

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

.message--info

Info message

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

.message--success

Success message

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

.message--warning

Warning message

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

.message--error

Error message

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

.message--idea

Idea message

Nullam ut eros egestas, fringilla neque in, accumsan nisi.

<p class="message {$modifiers}">Nullam ut eros egestas, fringilla neque in, accumsan nisi.</p>

Logo Block 4.53

Block with Job board logo and arbitrary content.

Default styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--jobs

Jobs.cz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--prace

Prace.cz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--jobs-prace

Jobs.cz & Prace.cz

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--pracezarohem

Prace za rohem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--pracazarogiem

Praca za rogiem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--monster

Monster

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--profesia

Profesia

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

.logo-block--jobote

Jobote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.

<div class="logo-block {$modifiers}">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nunc sem, pellentesque in quam non, auctor sagittis diam. Vivamus eleifend id felis quis aliquam.</p>
</div>

Tile 4.54

Default styling

Nullam enim lectus

Curabitur et tincidunt nibh, at faucibus dui. Ut vel ipsum euismod, elementum nulla sed, rhoncus neque. Duis vel iaculis sem. Vivamus eu pharetra libero, vulputate rutrum tellus.

<div class="tile tile--has-state tile--has-decoration">
    <div class="tile__state">
        <span class="tick tick--green tile__state-object">
            <span class="icon--tick" aria-hidden="true"></span>
        </span>
    </div>
    <div class="tile__decoration">
        <img src="dist/images/graph-upward-trend.svg" alt="" class="tile__decoration-object">
    </div>
    <div class="tile__body">
        <h2 class="tile__title">Nullam enim lectus</h2>
        <p>Curabitur et tincidunt nibh, at faucibus dui. Ut vel ipsum euismod, elementum nulla sed, rhoncus neque. Duis vel iaculis sem. Vivamus eu pharetra libero, vulputate rutrum tellus.</p>
        <div class="tile__actions">
            <a href="#" class="btn btn--primary">Primary action</a>
            <a href="#" class="secondary-action">Secondary action</a>
        </div>
    </div>
</div>

Timeline 4.55

Allowed values for .timeline__item--* modifier are: yellow, orange, pink, violet, blue, green.

Default styling

  • Vacancy published on Jobs.cz

    1 credit

  • Vacancy published on Prace.cz

    1 credis

  • Show more
  • Vacancy published on Jobs.cz

    1 credit

  • Vacancy published on Prace.cz

    1 credis

  • Show more
<div class="grid">
    <div class="col col-6--md">
        <ul class="timeline">
            <li class="timeline__item timeline__item--yellow timeline-event">
                <h4 class="timeline-event__title">Vacancy published on Jobs.cz</h4>
                <p class="timeline-event__body">1 credit</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">18. June 2016, 14:30</span>
                    Jakub Šikovný
                </p>
            </li>
            <li class="timeline__item timeline__item--green timeline-event">
                <h4 class="timeline-event__title">Vacancy published on Prace.cz</h4>
                <p class="timeline-event__body">1 credis</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">14. June 2016, 9:30</span>
                    Petr Mocný
                </p>
            </li>
            <li class="timeline__item timeline__item--more">
                <a href="#">Show more</a>
            </li>
        </ul>
    </div>
    <div class="col col-6--md">
        <ul class="timeline timeline--has-icons">
            <li class="timeline__item timeline__item--violet timeline-event">
                <div class="timeline-event__icon"><span class="icon icon--star" aria-hidden="true"></span></div>
                <h4 class="timeline-event__title">Vacancy published on Jobs.cz</h4>
                <p class="timeline-event__body">1 credit</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">18. June 2016, 14:30</span>
                    Jakub Šikovný
                </p>
            </li>
            <li class="timeline__item timeline__item--orange timeline-event">
                <div class="timeline-event__icon"><span class="icon icon--bubble-ok" aria-hidden="true"></span></div>
                <h4 class="timeline-event__title">Vacancy published on Prace.cz</h4>
                <p class="timeline-event__body">1 credis</p>
                <p class="timeline-event__footer">
                    <span class="offset-right--u-6">14. June 2016, 9:30</span>
                    Petr Mocný
                </p>
            </li>
            <li class="timeline__item timeline__item--more">
                <a href="#">Show more</a>
            </li>
        </ul>
    </div>
</div>

Progress Bar 4.56

Default styling

35/50 credits

<script>
    // Manually trigger animation of progress bars:
    // triggerProgressBarAnimation($('.progress'));
</script>
<p class="text-gray--light"><strong class="progress-label" data-progress-label="progress-bar">35</strong>/50 credits</p>
<span class="progress" data-slice="9" data-total="50" data-progress-id="progress-bar">
    <span class="progress__bar"></span>
</span>

Tick 4.57

Default styling

.tick--green

green

<span class="tick {$modifiers}">
    <span class="icon--tick" aria-hidden="true"></span>
</span>

Pills 4.58

Default styling

Petr Hruška Grafton Jan Novák Addecco Remove
<span class="pill">
    <span class="pill__body">
        <span class="text-teamio-pink offset-right--u-4">Petr Hruška</span>
        <span class="text-gray--light">Grafton</span>
    </span>
</span>
<span class="pill pill--dismissable">
    <span class="pill__body">
        <span class="text-teamio-pink offset-right--u-4">Jan Novák</span>
        <span class="text-gray--light">Addecco</span>
    </span>
    <a href="#" class="pill__close close">
        <span class="icon icon--close" aria-hidden="true"></span>
        <span class="visually-hidden">Remove</span>
    </a>
</span>

Lists 4.59

Icon List 4.59.1

Default styling

  • List item 1
  • List item 2
  • List item 3
  • List item 4
<ul class="icon-list">
    <li class="icon-list__item icon-list__item--plus text-green">List item 1</li>
    <li class="icon-list__item icon-list__item--plus text-green">List item 2</li>
    <li class="icon-list__item icon-list__item--minus text-gray--light">List item 3</li>
    <li class="icon-list__item icon-list__item--minus text-gray--light">List item 4</li>
</ul>

Progress list 4.59.2

List of tasks to be completed with state indicator (up to 10 items).

Default styling

  1. Great success
  2. Epic fail
  3. Processing now...
  4. This can wait
<ol class="progress-list">
    <li class="progress-list__item progress-list__item--success">Great success</li>
    <li class="progress-list__item progress-list__item--error">Epic fail</li>
    <li class="progress-list__item progress-list__item--active">Processing now...</li>
    <li class="progress-list__item">This can wait</li>
</ol>

Highlight 4.60

Default styling

This is important
<em class="highlight">This is important</em>

State 4.61

Default styling

State
.state--active

Active

State
.state--inactive

Inactive

State
.state--warning

Warning

State
.state--danger

Danger

State
<span class="state {$modifiers}">State</span>

Block link 4.62

Block link with fake links inside.

Default styling

<a href="#" class="block-link">
    <p>
        Aenean eu <span class="block-link__fake-link">nulla quis arcu</span> efficitur molestie mollis ut nibh. Nulla facilisi.
    </p>
</a>

Inbox 4.63

Inbox related components.

Inbox Row 4.63.1

Default styling

Fwd: Zájem o pozici HW Engineer Dobrý den, zaujala mě vaše nabídka práce na pozici HW Inženýr…

14:42

<div class="listing listing--has-actions listing--has-multiactions inbox-listing">
    <div class="listing__data">
        <div class="listing-row inbox-row offset-in-bottom--u-5" data-visited="false">
            <div class="listing-row__control">
                <input id="inbox-listing-check-row-1" type="checkbox" name="inbox-listing-check-row-1">
                <label for="inbox-listing-check-row-1" class="no-label"> </label>
            </div>
            <div class="listing-row__action-menu">
                <div class="dropdown">
                    <a href="#" id="inbox-dropdownLabel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle btn btn--link btn--no-border btn--circle">
                        <span class="icon icon--dots btn__icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Action Menu</span>
                    </a>
                    <div class="dropdown-menu" role="menu" aria-labelledby="inbox-dropdownLabel1">
                        <div class="arrow"></div>
                        <ul class="dropdown-menu__list">
                            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Delete</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="listing-row__body">
                <div class="grid">
                    <div class="col col-4--md col-3--lg">
                        <p class="text-break-word"><a href="#" class="inbox-name">Lukáš Nebudil</a></p>
                    </div>
                    <div class="col col-4--md col-6--lg">
                        <p class="mail-preview">
                            <span class="mail-preview__subject">Fwd: Zájem o pozici HW Engineer</span>
                            <span class="mail-preview__body text-gray--light">Dobrý den, zaujala mě vaše nabídka práce na pozici HW Inženýr…</span>
                        </p>
                    </div>
                    <div class="col col-4--md col-3--lg text-right">
                        <p class="pull-left text-left text-break-word inbox-from email">
                            <span class="email__name">From: Dana Malá</span><br>
                            <span class="email__address text-gray--light">maladana@lmc.cz</span>
                        </p>
                        <p class="inbox-date-time">14:42</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Frame 4.64

Just a frame.

Default styling

Vivamus sed tristique augue

Nam sed posuere ipsum, vel scelerisque massa. Etiam iaculis augue sed finibus dignissim. Phasellus sit amet dictum felis, at aliquet urna. Mauris scelerisque convallis tempus. Ut et nunc nec augue fringilla tristique sit amet at ipsum. Vestibulum molestie massa mauris, vel commodo augue ullamcorper non. Nullam enim velit, venenatis ut est vitae, vestibulum eleifend magna. Etiam id tellus vel est feugiat ullamcorper. Donec cursus tortor ac imperdiet vulputate. Vivamus eleifend, magna vitae laoreet facilisis, nisi ipsum iaculis purus, in scelerisque justo quam eget ipsum.

.frame--flat

Flat frame (no shadow, tiny border radius)

Vivamus sed tristique augue

Nam sed posuere ipsum, vel scelerisque massa. Etiam iaculis augue sed finibus dignissim. Phasellus sit amet dictum felis, at aliquet urna. Mauris scelerisque convallis tempus. Ut et nunc nec augue fringilla tristique sit amet at ipsum. Vestibulum molestie massa mauris, vel commodo augue ullamcorper non. Nullam enim velit, venenatis ut est vitae, vestibulum eleifend magna. Etiam id tellus vel est feugiat ullamcorper. Donec cursus tortor ac imperdiet vulputate. Vivamus eleifend, magna vitae laoreet facilisis, nisi ipsum iaculis purus, in scelerisque justo quam eget ipsum.

<div class="frame {$modifiers}">
    <h2>Vivamus sed tristique augue</h2>
    <p>Nam sed posuere ipsum, vel scelerisque massa. Etiam iaculis augue sed finibus dignissim. Phasellus sit amet dictum felis, at aliquet urna. Mauris scelerisque convallis tempus. Ut et nunc nec augue fringilla tristique sit amet at ipsum. Vestibulum molestie massa mauris, vel commodo augue ullamcorper non. Nullam enim velit, venenatis ut est vitae, vestibulum eleifend magna. Etiam id tellus vel est feugiat ullamcorper. Donec cursus tortor ac imperdiet vulputate. Vivamus eleifend, magna vitae laoreet facilisis, nisi ipsum iaculis purus, in scelerisque justo quam eget ipsum.</p>
</div>

File 4.65

File (attachment) displayed inline.

Default styling

My new CV – 2023.pdf 16. 2. 2016

<p class="file">
    <span class="icon icon--file-pdf" aria-hidden="true"></span>
    <span class="name">My new CV – 2023.pdf</span>
    <span class="status">16. 2. 2016</span>
</p>

Nav prev/next 4.66

Default styling

<div class="nav-prev-next" role="navigation">
    <button class="nav-prev-next__prev btn btn--circle">
        <span class="icon icon--arrow-left btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Prev</span>
    </button>
    <span class="nav-prev-next__count"><strong>15</strong> from 34</span>
    <button class="nav-prev-next__next btn btn--circle">
        <span class="icon icon--arrow-right btn__icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Tabs 4.67

Default styling

.tabs--large

Large version (only on desktop)

<ul role="tablist" class="tabs {$modifiers}">
    <li class="tabs__tab tabs__tab--active"><a href="#tab1" role="tab" aria-controls="tab1" class="tabs__tab-link">Tab 1</a></li>
    <li class="tabs__tab"><a href="#tab2" role="tab" aria-controls="tab2" class="tabs__tab-link">Tab 2</a></li>
    <li class="tabs__tab"><a href="#tab3" role="tab" aria-controls="tab3" class="tabs__tab-link">Tab 3</a></li>
    <li class="tabs__tab"><a href="#tab4" role="tab" aria-controls="tab4" class="tabs__tab-link">Tab 4<span class="label label--success ml--u-5 mr--u-0">New</span></a></li>
</ul>

Tooltips 4.68

Based on Tooltipster. See documentation for options etc.

Default styling

Morbi fringilla auctor neque, at molestie velit consequat quis.

Nullam efficitur leo sed porttitor fringilla. Sed in eros vel diam luctus luctus. Nunc at nisl orci. Aenean eu augue dignissim, tempor velit non, vestibulum lorem.

<script>
    $(function() {
        // Teamio UI defaults:
        //$('.tooltip').tooltipster({
        //    theme: 'tooltipster-borderless',
        //    delay: 100,
        //    animationDuration: 100,
        //    maxWidth: 240,
        //    trigger: 'custom',
        //    triggerOpen: {
        //        mouseenter: true,
        //        touchstart: true,
        //        tap: true
        //    },
        //    triggerClose: {
        //        mouseleave: true,
        //        originClick: true,
        //        touchleave: true,
        //        tap: true
        //    }
        //});
    });
</script>
<button class="btn tooltip" data-tooltip-content="#tooltip-content">Hover me</button>
<div class="tooltip-templates">
    <div id="tooltip-content">
        <p><strong>Morbi fringilla</strong> auctor neque, at molestie velit consequat quis.</p>
        <p>Nullam efficitur leo sed porttitor fringilla. Sed in eros vel diam luctus luctus. Nunc at nisl orci. Aenean eu augue dignissim, tempor velit non, vestibulum lorem.</p>
    </div>
</div>

Empty 4.69

Empty anything (listing, widget...).

Default styling

Well done.

<div class="empty">
    <span class="empty__icon icon icon--bubble-ok" aria-hidden="true"></span>
    <p class="empty__info">Well done.</p>
</div>

Boxes 4.70

Default styling

<div class="boxes">
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--key icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Password</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--candidate icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">My account</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--notification icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Notifications</p>
        </a>
    </div>
    <div class="boxes__item">
        <a href="#" class="boxes__item__body">
            <span class="boxes__item__icon icon icon--language icon--xlarge text-gray--light" aria-hidden="true"></span>
            <p class="boxes__item__title">Language</p>
        </a>
    </div>
</div>

Steps 4.71

Default styling

  1. 1 Rise
  2. 2 Shine
  3. 3 Fall
<div class="steps">
    <div class="steps__container">
        <ol class="steps__list list-unstyled">
            <li class="steps-item">
                <a href="#">
                  <span class="steps-item__body">
                      <span class="steps-item__order">1</span>
                      <span class="steps-item__title">Rise</span>
                  </span>
                </a>
            </li>
            <li class="steps-item steps-item--active">
                <strong class="steps-item__body">
                    <span class="steps-item__order">2</span>
                    <span class="steps-item__title">Shine</span>
                </strong>
            </li>
            <li class="steps-item">
                <span class="steps-item__body">
                    <span class="steps-item__order">3</span>
                    <span class="steps-item__title">Fall</span>
                </span>
            </li>
        </ol>
    </div>
</div>

Page loader 4.72

Loading indicator for entire page.

Defaults: duration 10 seconds, 4 steps + final state.

Default styling

Převádíme vaše pozice do Teamio Smart…

Bude to jen chvilka :-)

Převádíme vaše uchazeče do Teamio Smart…

Bude to jen chvilka :-)

Převádíme vaši historii do Teamio Smart…

Bude to jen chvilka :-)

A také všechno ostatní , na nic nezapomeneme.

Bude to jen chvilka :-)

Paráda, a je to hotovo!

Pokud máte nějaké otázky, napište nám na email@email.cz nebo zavolejte na +420 123 456 789.

<div class="page-loader">
    <div class="page-loader__header">
        <div class="page-loader__header-step page-loader__header-step--1">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaše pozice <span class="icon icon--documents" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--2">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaše uchazeče <span class="icon icon--candidates" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--3">
            <div class="page-loader__title">
                <h1>Převádíme <span class="text-teamio-pink">vaši historii <span class="icon icon--clock" aria-hidden="true"></span></span> do Teamio Smart…</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--4">
            <div class="page-loader__title">
                <h1>A také <span class="text-teamio-pink">všechno ostatní <span class="icon icon--attachment" aria-hidden="true"></span></span>, na nic nezapomeneme.</h1>
            </div>
            <div class="page-loader__subtitle">
                <p class="text-large">Bude to jen chvilka :-)</p>
            </div>
        </div>
        <div class="page-loader__header-step page-loader__header-step--final">
            <div class="page-loader__title">
                <h1><span class="icon icon--tick icon--left text-green" aria-hidden="true"></span> Paráda, a je to hotovo!</h1>
            </div>
            <div class="page-loader__subtitle">
                <p><a href="#" class="btn btn--success">Přejít do Teamio Smart</a></p>
            </div>
        </div>
    </div>
    <div class="page-loader__progress mb--u-7"></div>
    <p class="text-gray--light">Pokud máte nějaké otázky, napište nám na <a href="mailto:email@email.cz" class="link-secondary">email@email.cz</a> nebo zavolejte na <a href="tel:00420123456789" class="link-secondary">+420 123 456 789</a>.</p>
</div>

Offer 4.73

Offer boxes.

Default styling

Inzerát na Jobs.cz


7 900 Kc

Nabídka jen pro první nákup!

1x na Jobs.cz a 1x na Prace.cz

11 999 Kc
7 900 Kc

3 inzeráty na Jobs.cz

23 700 Kc
20 100 Kc

<div class="grid flex flex-wrap flex-nowrap-md offer">
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <h2 class="offer-box__title">Inzerát na Jobs.cz</h2>
            <p>
                <del class="text-large"></del><br>
                7 900 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn">Inzerovat</button>
            </p>
            <div class="offer-box__footer">
                <ul class="text-left text-gray--light mb--u-0">
                    <li>1 inzerát na Jobs.cz</li>
                    <li>Inzerát je vystaven na 30 dní</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <p class="offer-box__label"><span class="label label--danger text-uppercase">Nabídka jen pro první nákup!</span></p>
            <h2 class="offer-box__title">1x na Jobs.cz a 1x na Prace.cz</h2>
            <p>
                <del class="text-large">11 999 Kc</del><br>
                7 900 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn btn--primary">Inzerovat z balíčku</button>
            </p>
            <div class="offer-box__footer">
                <ul class=" text-left text-gray--light mb--u-0">
                    <li>1 inzerát na Jobs.cz a 1 inzerát na Prace.cz</li>
                    <li>Každý inzerát je vystaven na 30 dní</li>
                    <li>Celý balíček je možné vyčerpat do jednoho roku</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col col-4--md mb--u-7 mb--u-0-md">
        <div class="offer-box frame no-shadow text-center mw-400px mx--auto mb--u-0">
            <h2 class="offer-box__title">3 inzeráty na Jobs.cz</h2>
            <p>
                <del class="text-large">23 700 Kc</del><br>
                20 100 Kc
            </p>
            <p class="offer-box__action">
                <button type="button" class="btn">Inzerovat z balíčku</button>
            </p>
            <div class="offer-box__footer">
                <ul class="text-left text-gray--light mb--u-0">
                    <li>3 inzeráty na Jobs.cz</li>
                    <li>Každý inzerát je vystaven na 30 dní</li>
                    <li>Celý balíček je možné vyčerpat do jednoho roku</li>
                </ul>
            </div>
        </div>
    </div>
</div>

File upload 4.74

Default styling

Pobočka: LMC Polska

<div class="grid">
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <span class="icon icon--file-image text-gray--lighter file-upload__image-placeholder " aria-hidden="true"></span>
                </div>
            </div>
            <button class="btn file-upload__action">Nahrát logo</button>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <img src="dist/images/teamio-dark.png" alt="" class="file-upload__preview-image img-responsive">
                </div>
            </div>
            <a href="#" class="file-upload__action"><span class="icon icon--trash icon--middle icon--left" aria-hidden="true"></span>Odebrat logo</a>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <span class="icon icon--file-image text-gray--lighter file-upload__image-placeholder " aria-hidden="true"></span>
                </div>
                <div class="form-group">
                    <label for="pobocka" class="form-group__label">Pobočka</label>
                    <select id="pobocka" class="form-control">
                        <option>LMC</option>
                        <option>LMC Polska</option>
                    </select>
                </div>
            </div>
            <button class="btn file-upload__action">Nahrát logo</button>
        </div>
    </div>
    <div class="col col-6--md">
        <div class="file-upload mw-400px mb--u-6">
            <div class="file-upload__body">
                <div class="file-upload__preview">
                    <img src="dist/images/teamio-dark.png" alt="" class="file-upload__preview-image img-responsive">
                </div>
                <p class="form-group">
                    <strong>Pobočka:</strong>
                    LMC Polska
                </p>
            </div>
            <div class="file-upload__footer">
                <a href="#"><span class="icon icon--trash icon--middle icon--left" aria-hidden="true"></span>Odebrat logo</a>
            </div>
        </div>
    </div>
</div>

Job Board Row 4.75

Default styling

Práce za rohem


Najděte uchazeče, kteří chtějí pracovat právě ve vaší lokalitě. Práce za rohem nabízí uchazečům moderní mobilní aplikaci, s pomocí které snadno najdou práci svých snů.

Doba vystavení

30 dní
3 000 Kč

Zvýraznění inzerátu

Inzerát bude zvýrazněn po dobu 14 dní v relevantních výsledcích hledání v mobilní aplikaci Práce za Rohem. Získáte tak vyšší návštěvnost inzerátu.

1 800 Kč
<div class="listing listing--has-multiactions">
    <div class="listing-row job-board-row">
        <div class="listing-row__control">
            <input id="listing-check-row-1" type="checkbox" name="listing-check-row-1" checked="">
            <label for="listing-check-row-1" class="no-label"> </label>
        </div>
        <div class="listing-row__body">
            <div class="grid">
                <div class="col">
                    <div class="job-board-row__header flex">
                        <div class="flex-shrink-0 mr--u-6">
                            <img src="dist/images/jobboard-logo-pracezarohem.svg" width="50" height="50" alt="Práce za rohem">
                        </div>
                        <div class="job-board-row__option">
                            <p class="job-board-row__option-body mb--u-0">
                                <label for="listing-check-row-1"><strong>Práce za rohem - mobilní aplikace</strong></label><br>
                                <span>Najděte uchazeče, kteří chtějí pracovat právě ve vaší lokalitě. Práce za rohem nabízí uchazečům moderní mobilní aplikaci, s pomocí které snadno najdou práci svých snů.</span>
                            </p>
                            <div class="job-board-row__option-aside"></div>
                        </div>
                    </div>
                    <div class="job-board-row__body ml--logo-block-md mt--u-7">
                        <p class="form-group__label">Doba vystavení</p>
                        <div class="form-group mw-100">
                            <div class="job-board-row__option mb--u-6">
                                <div class="job-board-row__option-body">
                                    <span>30 dní</span>
                                </div>
                                <div class="job-board-row__option-aside ml--u-0"><strong>3 000 Kč</strong></div>
                            </div>
                        </div>
                        <hr>
                        <p class="form-group__label">Zvýraznění inzerátu</p>
                        <div class="form-group mw-100">
                            <div class="job-board-row__option mb--u-6">
                                <div class="job-board-row__option-body">
                                    <input id="zvyrazneni-1-pzr" type="checkbox">
                                    <label for="zvyrazneni-1-pzr">Zvýraznění inzerátu na Práce za Rohem</label>
                                    <p class="job-board-row__option-note">Inzerát bude zvýrazněn po dobu 14 dní v relevantních výsledcích hledání v mobilní aplikaci Práce za Rohem. Získáte tak vyšší návštěvnost inzerátu.</p>
                                </div>
                                <div class="job-board-row__option-aside"><strong>1 800 Kč</strong></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Phone frame 4.76

Mobile phone frame.

Default styling

<div class="phone-frame">
    <div class="phone-frame__body">
        <img src="https://lmcdev.cz/pub/pzr-ad-preview.png" alt="" class="img-responsive">
    </div>
</div>