Components 4.0

Stand-alone UI components

Tags 4.1

Default styling

<ul class="list-inline">
    <li>
        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>&nbsp;
        <a class="tag" href="#">CSS</a>
    </li>
    <li>
        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>&nbsp;
        <a class="tag" href="#">PHP</a>
    </li>
    <li>
        <span class="icon icon--reorder tag__icon" aria-hidden="true"></span>&nbsp;
        <a class="tag" href="#">JavaScript</a>
    </li>
    <li>
        <span class="icon icon--reorder tag__icon tag__icon--large" aria-hidden="true"></span>&nbsp;
        <a class="tag" href="#">JavaScript</a>
    </li>
    <li>
        <span class="icon icon--reorder tag__icon tag__icon--ultra-large" aria-hidden="true"></span>&nbsp;
        <a class="tag" href="#">JavaScript</a>
    </li>
</ul>

Breadcrumbs 4.2

Displays a link with an optional figure and description

Default styling

Lyžaři Čenichu Trávy tanec padákům severu dne západu

<div class="breadcrumbs hidden--palm">
    <a href="/">Lyžaři</a>
    <span class="icon breadcrumbs__icon icon--angle-right"
          aria-hidden="true"></span>
    <a href="/">Čenichu</a>
    <span class="icon breadcrumbs__icon icon--angle-right"
          aria-hidden="true"></span>
    Trávy tanec padákům severu dne západu
</div>

Label 4.3

Displays an element as a label.

Add any of the below mentioned modifier classes to change the appearance of a label.

Default styling

malém půl

.label--important Used for example as sale label

malém půl

.label--warning Used for example as tip label

malém půl

.label--transparent Used for example as status label for position

malém půl

.label--new Used for example as status label of new created position

malém půl

.label--updated Used for example as status label of updated position

malém půl

.label--replied Used for example as status label of replied position

malém půl

.label--visited Used for example as status label of visited position

malém půl

.label--medium Used for example as label placed in heading where label should be smaller than heading's font

malém půl

.label--indented Used for example as label placed next to the other element where must be a space between them

malém půl

.label--success Used for example as salary label

malém půl

<span class="label [modifier class]">malém půl</span>

Glass 4.4

An area that appears to be on a glass panel placed above the underlying content.

Default styling

Vyhynul podíval květiny

<div class="glass">
    Vyhynul podíval květiny
</div>

Index card 4.5

Great for visually attractive lists items.

Default styling

Poměrně z stopa páté (3)

.index-card--naked No border, no stress (usually for the last item)

Poměrně z stopa páté (3)

.index-card--naked-palm No border for palm devices

Poměrně z stopa páté (3)

.index-card--naked-desk No border for desk devices

Poměrně z stopa páté (3)

.index-card--oneline Single line with eventual ellipsis

Poměrně z stopa páté (3)

.index-card--dark Darker border then standard index-card

Poměrně z stopa páté (3)

<div class="index-card [modifier class]">
    <a href="#">Poměrně z stopa páté</a> (3)
</div>

Image 4.6

Images that adjust to the width of the parent element and as a bonus are round.

Default styling

.image--round should be used only for images with aspect ratio 1:1

<div class="grid">
    <div class="grid__item e-4--palm e-6">
        <img class="image [modifier class]" src="public/images/viktor_logo.png" />
    </div>
</div>

Illustational cover 4.7

Illustational cover element, attribute style with background-image has to be set on .illustration-cover

Shouldn't be used with content.

Default styling

<div class="grid">
    <div class="grid__item e-16">
        <div class="illustration-cover"
             style="background-image:url('public/images/illustation-cover.jpg')"></div>
    </div>
</div>

Progress bar 4.8

Styles for progress bar

Default styling

21 %

<div class="grid">
    <div class="grid__item">
        <div class="progressbar">
            <div class="progressbar__progress" style="width: 21%"></div>
            <div class="progressbar__text">
                21&nbsp;%
            </div>
        </div>
    </div>
</div>

Signpost 4.9

Great for visually attractive mobile-friendly signpost as submenu.

Default styling

List of items

Actualities

Contact

<div class="signpost">
    <div class="signpost__item">
        <span class="icon icon--list signpost__icon"></span>
        <a href="#">List of items</a>
    </div>
    <div class="signpost__item">
        <span class="icon icon--clock signpost__icon"></span>
        <a href="#">Actualities</a>
    </div>
    <div class="signpost__item">
        <span class="icon icon--file-alt signpost__icon"></span>
        <a href="#">Contact</a>
    </div>
</div>

Overlay and scroll lock 4.10

Full-screen dark tint in the background. Should be only one on the page.

Add .scroll-lock or .scroll-lock--only-palm to body to disable scrolling under the overlay.

cf. Picker

Default styling

<div class="overlay" id="overlay"></div>

Sticker 4.11

Displays an element as a sticker with a little pipe in front of text.

Add any of the below mentioned modifier classes to change the appearance of a sticker.

Default styling

malém půl

.sticker--recommended Used for example as recommended sticker

malém půl

.sticker--emphasized Used for example as retraining sticker

malém půl

<div class="sticker [modifier class]">
    malém půl
</div>