Base

How to use

To use Heureka UI, you need to add the following into the head element of the template (note the version used):

Styles

The essentials.css contains all the necessary styles for rendering the elements of Heureka UI:

<link rel="stylesheet" href="https://im9.cz/ui/7.14.0/css/essentials.css">

Icons

The icons.js is a script for injecting the icon sprite into the document, making the icons available:

<script src="https://im9.cz/ui/7.14.0/js/icons.js" async></script>

Currently there are two types of sprite icons (default) and flags. Required type(s) can be specified by attribute data-sprite-types (value comma separated types) on script tag.

Variants:
  • use data-sprite-types="icons" or without attribute for classic icons sprite
  • use data-sprite-types="flags" just for flags sprite
  • use data-sprite-types="icons,flags" for both sprites
Example for both sprites:
<script src="https://im9.cz/ui/7.14.0/js/icons.js" data-sprite-types="icons,flags" async></script>

Components

The essentials.js script contains the code to run all the interactive components from Heureka UI:

<script src="https://im9.cz/ui/7.14.0/js/modules/essentials.js" type="module"></script>

Last, but most importantly, you have to add a HTML class scope-essentials-v7.14.0 to an element in the template, usually the body element. All styles in the essentials.css are scoped to this class and will not take effect outside of the element with the class.

Variables and mixins

To use Less/SCSS variables in your styles, install the @heureka/hasty package via NPM as a development dependency. Then, import all the necessary files into your Less stylesheet:

@import 'node_modules/@heureka/hasty/src/css/brand/heureka';
@import 'node_modules/@heureka/hasty/src/css/base/config.less';
@import 'node_modules/@heureka/hasty/src/css/base/functions.less';
or for SCSS
@import 'node_modules/@heureka/hasty/src/css/brand/heureka';
@import 'node_modules/@heureka/hasty/src/css/base/config';
@import 'node_modules/@heureka/hasty/src/css/base/functions';

React components

To use React components in your project, install the @heureka/hasty package via NPM as a production dependency. You can then import and use any available component in the following manner:

import { Button, ButtonVariant, Accordion } from '@heureka/hasty';

const MyComponent = () => (
<Accordion title="Lorem ipsum">
<Button variant={ButtonVariant.Simple} type="submit">Offblast</Button>
</Accordion>
);

How to contribute

First, clone the project Hasty at libs/frontend-libs/hasty and create a new branch of the origin/dev branch. Before doing anything else, make sure you update the version in the package.json file at the root of the project, to do that you can run:

  • npm version major|minor|patch --no-git-tag-version (it updates package-lock.json file too)
  • or you can use npm run generate-version, it interactively generates new version in package.json and package-lock.json files and optionally prepares entry to CHANGELOG.md

This will ensure that new version of styleguide is properly built and no previous version is overwritten. Hasty adheres to the Semantic Versioning specification, with major versions reserved for breaking changes, patch versions for various fixes, and minor versions for everything else.

Development

To start the development server, run docker-compose up to use a Docker container, or npm ci and than npm run develop to develop locally. Then, open http://localhost:8080. All source files are found in the src directory. To add a new piece of styleguide, you first have to decide what type it is. There are objects, elements, components, and utility classes. They are all described in the namespaces section. Then, add a new .less file with the name of the new module into the appropriate folder in the src/css directory. To show the new module in the styleguide, add a new .njk file into a folder with the same name as before, but this time in the src/styleguide directory. This is an example of part of the file that generates the button element:

Do not forget to write unit test for given React component. Create a directory `__tests__` inside the component folder and add test file with snapshots.

---
name: Button
desc: "Button can take either the form of a link or a clickable element. The basic variant should be used sparingly in a given view, as it represents a primary action, or a CTA. If more than one button is present at once, all secondary actions should use the simple modifier. In case the primary action is destructive and cannot be taken back (e.g. delete a review), the button must use the negative modifier class."
---

{% variant 'e-button' %}
<button class="e-button" type="button">Dolorum!</button>
{% endvariant %}

{% variant ['e-button', 'e-button--simple'] %}
<button class="e-button e-button--simple" type="button">Dolorum!</button>
{% endvariant %}

Changelog

Don't forget to update CHANGELOG.md by new version entry with your changes.

Publishing

To publish a new version of styleguide, make sure you have the right version in package.json. After merging your branch to the dev branch, a new styleguide is automatically deployed to heureka.cz.stage.heu.cz/ui. To deploy a production version, merge the dev branch into the master branch. Apart from deploying the styleguide to heureka.cz/ui, this ensures that the latest version of styleguide is published to a private NPM registry npm.heu.cz. The styleguide is then available under the package name of @heureka/hasty.

How to write components

There are many well known methods for building HTML and CSS components. We base ours on a set of recommendations called BEM, or Block, Element, Modifier, which rests on a simple, but hard rule. It forbids all selectors other than those targeting classes, like .foo, and prohibits selector chaining. Both, of course, with specific exceptions. If we comply, we avoid some of the biggest problems with specificity.

The abbreviation BEM hides another principle. A component represents a so-called block, which consists of several elements and may use modifiers. To distinguish them, each of these have a different naming convention. If you create a component (or block) with the name (class) block, then its inner element must be named something like block__element. We recognize modifiers because of their block--modifier class. Here is an example of specific component:

<nav class="breadcrumbs breadcrumbs--small">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="">Heureka.cz</a>
</li>
<li class="breadcrumbs__item">
<a class="breadcrumbs__link" href="">E-shops</a>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__link">Notino</span>
</li>
</ul>
</nav>

Using multiple __ to give an element its depth is a common mistake. Instead of the class breadcrumbs__link, we would have breadcrumbs__list__item__link. This is unnecessary — and ugly — and makes it harder to change the structure of a component.

Structure

We use the CSS preprocessor Less. Preprocessors give you the basic but important option to put each component in its own file, for example breadcrumbs.less:

.breadcrumbs {


&--small
{}
&--large {}
}

.breadcrumbs__list {


.breadcrumbs--small &
{}
}

.breadcrumbs__item {


@media (max-width: @lteLayout) {

}
}

.breadcrumbs__link {


&:not([href])
{}
}

The element selectors in the example are not chained with the block and thus remain simple. They are also indented to reflect the HTML structure of the component. This is a helpful practice that — as opposed to the multiple use of __ — is easy to maintain.

In contrast, modifiers are inserted directly into a block using the & parent selector. Modifiers usually change properties of blocks, but sometimes these changes apply directly to elements. That’s a good excuse to use chaining, like the .breadcrumbs--small & { … } in the element breadcrumbs__list. We treat @media blocks similarly and put them right where they belong.

The last interesting thing to point out is the selector &:not([href]) { … }. It goes against the principle of BEM. The correct way would be to create a new modifier, for example breadcrumbs__link--current. It's fine, though. Not everything should conform exactly to the BEM method and common sense sometimes leads you a little astray.

Composition

If we want to adjust the appearance or behavior of a component depending on the context or its location in the HTML document, we often stumble. For example, two components named article and category, which represent different sections of the site and define their layout, are two different contexts. How to proceed if the breadcrumbs component should look or behave differently in each section?

We might think of using the selectors .article .breadcrumbs { … } and .category .breadcrumbs { … }. That, however, would be an unwise choice. We would quickly find out that it’s not at all clear where to put these — into breadcrumbs.less or article.less? Either way is bad, because both create an unnecessary link between the components. That, in turn, would complicate future modifications and lead to trouble with specificity.

Depending on the amount and type of adjustments, we can make a better choice. If the changes are superficial, such as background color or text size, we make a modifier. These are best named in general way, like breadcrumbs--small or breadcrumbs--large. If we know these are specific and will not be used elsewhere, it’s fine to use names such as breadcrumbs--article and breadcrumbs--category.

When it comes to major changes — at the level of structure or layout — we need to think a little more. The goal is to build components that are manageable and reusable. A component (block) is defined by its structure and inner layout, and therefore it knows if, for example, it’s a flex or grid container, or whether its elements are block or inline. It shouldn’t, however, reason or know about its location in the external layout. If, for example, we declare the breadcrumbs component as position: absolute, it will unnecessarily limit its reusability. So, it’s better to leave such declarations to components that are designed to provide the overall page layout.

In our case, that’s the article and category components’ job. So, we create two new elements article__breadcrumbs and category__breadcrumbs, whose task is to place the breadcrumbs component within the section. Since the appearance and inner structure of the component are still handled by the breadcrumbs class, the result is a composition of classes: <nav class="breadcrumbs category__breadcrumbs">. Unlike the .category .breadcrumbs { … } solution, composition doesn’t create a strong link between components and avoids specificity.

Namespaces

The original purpose of BEM was to make developers’ work easier and help them code better. Because of its clear syntax, it enhances code readability and eases orientation. We immediately know what we’re dealing with, just by looking at the code. But can we make it even better?

Using the example of the breadcrumbs and category components, we see that the first one is a reusable component, while the other lays out a particular section. They’re entirely different beasts. If that’s not clear from the names, we’ll make it obvious and add a namespace to the classes. Breadcrumbs becomes c-breadcrumbs and category takes the name of l-category. The namespace c (component) suggests that a class is a component — a closed module with a clear, specific use that is always the same. On the other hand, l (layout) gives the hint that a class provides page layout.

We use three more namespaces. The first one, named e (element), is similar to c but used only on those components that don’t have an inner structure (therefore no BEM elements). A good example is the e-button element, e.g. <button class="e-button">Send</button>. These are the simplest components.

The namespace o (object) is more complicated, but also more valuable in its meaning. It suggests a class that’s in charge of the local structure and layout. The objects o-block-list and o-inline-list are good examples. The o in the title tells us that we’re dealing with a structural element, not a specific component like a bullet list (which would have the c-bullet-list class). The o-block-list lays out its elements (called o-block-list__item) under each other, while o-inline-list puts them side by side. Also, both have a bunch of modifiers (such as o-block-list--loose), which are used to modify the spacing between elements. As objects can be used in many places and for different purposes, you can’t predict where they end up, which means objects shouldn’t be edited casually, because any change can have far-reaching consequences. It’s better (and safer) to add new modifiers.

The last namespace is the utility class with the prefix u. These classes have only one specific purpose — which should be obvious from the name — such as u-align-left or u-visually-hide. However, they should be used sparingly. Unless we need the change only in one place or situation, it’s better to create a new component or modifier.

Layout

Widths

Layout width variables used for breakpoints. Viewports equal to or smaller than @lineLength are generally considered small, i.e. mobile.

@layoutUltraWideWidth
@layoutWideWidth
@layoutWidth (75em)
@lineLength (50em)
@columnWideWidth (26em)
@columnWidth (20.5em)

Breakpoints

Breakpoints are not based on arbitrary numbers such as a certain device resolution, but solely on the available layout widths. Each width variable has two corresponding breakpoints, prefixed either by gt or lte which translates to greater than and less than or equal, respectively.

The list of available breakpoints:
  • @gtLayoutWide
  • @lteLayoutWide
  • @gtLayout
  • @lteLayout
  • @gtLine
  • @lteLine
  • @gtColumnWide
  • @lteColumnWide
  • @gtColumn
  • @lteColumn

Typography

Sizes

  • @fontSizeGiga

    Lorem

  • @fontSizeMega

    Lorem

  • @fontSizeKilo

    Lorem

  • @fontSizeAlpha

    Lorem ipsum

  • @fontSizeBeta

    Lorem ipsum

  • @fontSizeGamma

    Lorem ipsum

  • @fontSizeDelta

    Lorem ipsum

  • @fontSizeEpsilon

    Lorem ipsum

  • @fontSizeBase

    Lorem ipsum

  • @fontSizeMilli

    Lorem ipsum

  • @fontSizeMicro

    Lorem ipsum

  • @fontSizeNano

    Lorem ipsum

Line height

By default, a line height of 1.5 is used. In some cases, like headings, or interface elements such as buttons — where no more than one or two lines of text are expected — it is possible to employ a reduced line height of 1.35.

@lineHeight (1.5)

Esse atque eaque earum minima laborum voluptatum error quisquam unde praesentium nemo, consectetur cum aspernatur hic! Voluptatem voluptatibus, maiores ullam obcaecati laudantium dolorum rerum consectetur doloremque maxime magni. Modi, perspiciatis? Voluptates libero harum eveniet. Ut quos laborum quo. Nobis pariatur, reiciendis minima saepe similique. In ipsam officia, cupiditate eum inventore, iste quaerat laborum necessitatibus voluptate dolorum delectus non. Culpa, animi.

@lineHeightReduced (1.35)

Esse atque eaque earum minima laborum voluptatum error quisquam unde praesentium nemo, consectetur cum aspernatur hic! Voluptatem voluptatibus, maiores ullam obcaecati laudantium dolorum rerum consectetur doloremque maxime magni. Modi, perspiciatis? Voluptates libero harum eveniet. Ut quos laborum quo. Nobis pariatur, reiciendis minima saepe similique. In ipsam officia, cupiditate eum inventore, iste quaerat laborum necessitatibus voluptate dolorum delectus non. Culpa, animi.

Flow

Flow represents the way elements are vertically positioned in relation to each other. Its essence is therefore white space — the empty space between elements — and vertical padding in the elements themselves. All such spaces should be rational multiples of the default line height in rem units, e.g. 1.5rem * @lineHeight. The result of this constraint is the so called vertical rhythm which, because of the consistency it produces, helps the eyes when scanning the content. By default, a gap of line height is placed between all elements. This can be easily altered using the function .v-spacing() or some of the utility spacing classes such as .u-no-spacing.

Consequatur necessitatibus, dolorum? Voluptate fugit possimus consequatur accusantium ex, perspiciatis harum dolor. Eaque est vitae qui quasi facilis sit neque officia, molestiae fuga quos labore a corporis similique modi, nihil.

Type

  • Source Sans Variable

    @fontWeightLight (300)
  • Source Sans Variable

    @fontWeightRegular (400)
  • Source Sans Variable

    @fontWeightBold (600)
  • Source Sans Variable

    @fontWeightExtraBold (700)

Colors

Brand

  • @colorBrandPrimary (#009cd3)
  • @colorBrandSecondary (#ef7001)

Text

  • @colorText (#000)
  • @colorTextMedium (#262626)
  • @colorTextLight (#525252)

States

Highlight
  • @colorHighlightDark (#007eaa)
  • @colorHighlightMedium (#008dbf)
  • @colorHighlight (#009cd3)
  • @colorHighlightLight (#e6f4fa)
Success
  • @colorSuccess (#1ab04c)
  • @colorSuccessLight (#e5ffee)
Warning
  • @colorWarning (#ef7001)
  • @colorWarningLight (#ffefe0)
Error
  • @colorError (#dc0030)
  • @colorErrorLight (#ffe2e9)

Greys

  • @colorShadeDark (#8d8d8d)
  • @colorShade (#c6c6c6)
  • @colorShadeMedium (#e0e0e0)
  • @colorShadeLight (#f4f4f4)
  • @colorBackground (#fff)

Product colors

  • @colorProductBlack (#333333)
  • @colorProductBlue (#008ffd)
  • @colorProductBrown (#893c00)
  • @colorProductGreen (#1bc300)
  • @colorProductGrey (#a8a8a8)
  • @colorProductOrange (#fe7600)
  • @colorProductPink (#ff3e98)
  • @colorProductPurple (#5500f5)
  • @colorProductRed (#e00029)
  • @colorProductTurquoise (#00dfc1)
  • @colorProductWhite (#ffffff)
  • @colorProductYellow (#ffd754)

External

  • @colorShopOfTheYear (#cdb586)
  • @colorProductOfTheYear (#374659)
  • @colorCashbackGuarantee (#f2c32d)
  • @colorFacebook (#44619d)

Appearance

  • @borderRadiusReduced
  • @borderRadius
  • @borderWidthReduced
  • @borderWidth
  • @shadow
  • @shadowLarge

Objects

Block list

Block list serves the purpose of laying elements underneath each other, with a predefined spacing between them. The spacing can be altered using modifier classes.

o-block-list

Code
<ul class="o-block-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-block-list o-block-list--snug

Code
<ul class="o-block-list o-block-list--snug">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-block-list o-block-list--tight

Code
<ul class="o-block-list o-block-list--tight">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-block-list o-block-list--loose

Code
<ul class="o-block-list o-block-list--loose">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grid

Grid creates a raster of elements that dynamically adjusts the number of items per row in relation to the screen width.

o-grid

Code
<div class="o-grid">
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
</div>

o-grid o-grid--continuous

Code
<div class="o-grid o-grid--continuous">
    <div class="o-grid__item o-grid__item--colspan-2"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
    <div class="o-grid__item"></div>
</div>

Inline list

Inline list serves the purpose of laying elements next to each other. The spacing and alignment between the elements can be altered using modifier classes.

o-inline-list

Code
<ul class="o-inline-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--snug

Code
<ul class="o-inline-list o-inline-list--snug">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--tight

Code
<ul class="o-inline-list o-inline-list--tight">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--loose

Code
<ul class="o-inline-list o-inline-list--loose">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--spread

Code
<ul class="o-inline-list o-inline-list--spread">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--fill

Code
<ul class="o-inline-list o-inline-list--fill">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--align-top

Code
<ul class="o-inline-list o-inline-list--align-top">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

o-inline-list o-inline-list--align-bottom

Code
<ul class="o-inline-list o-inline-list--align-bottom">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Layout

Layout represents a basic structure of two elements in relation to each other, where one has a width of two times the other. This relationship can be altered using modifier classes.

o-layout

Code
<div class="o-layout">
    <div class="o-layout__item"></div>
    <div class="o-layout__item"></div>
</div>

o-layout o-layout--equal

Code
<div class="o-layout o-layout--equal">
    <div class="o-layout__item"></div>
    <div class="o-layout__item"></div>
</div>

o-layout o-layout--inverse

Code
<div class="o-layout o-layout--inverse">
    <div class="o-layout__item"></div>
    <div class="o-layout__item"></div>
</div>

o-layout o-layout--v-tight

Code
<div class="o-layout o-layout--v-tight">
    <div class="o-layout__item"></div>
    <div class="o-layout__item"></div>
</div>

o-layout o-layout--v-snug

Code
<div class="o-layout o-layout--v-snug">
    <div class="o-layout__item"></div>
    <div class="o-layout__item"></div>
</div>

Line wrap

o-line-wrap

Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.

Code
<p class="o-line-wrap">
    Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.
</p>

o-line-wrap o-line-wrap--medium

Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.

Code
<p class="o-line-wrap o-line-wrap--medium">
    Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.
</p>

o-line-wrap o-line-wrap--short

Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.

Code
<p class="o-line-wrap o-line-wrap--short">
    Voluptas esse rem aspernatur quos amet sequi minus harum corporis illo eveniet iusto hic ab perferendis autem optio, beatae sint. Totam accusamus neque cumque, quidem, distinctio expedita eveniet autem quia.
</p>

Table

Responsible table width sticky head.

o-table

Who is the fastest?
Animal Max speed Class
Falcon 389 km/h Flight-diving
Golden eagle 320 km/h Flight-diving
Eurasian hobby 160 km/h Flight
Cheetah 109 km/h Land
Sailfish 109 km/h Flight-swimming
Pronghorn 88.5 km/h Land
Human (who needs to poo) 45 km/h Land
Code
<table class="o-table">
    <caption>Who is the fastest?</caption>
    <thead>
        <tr>
            <th>Animal</th>
            <th class="is-numeric">Max speed</th>
            <th class="is-centered">Class</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Falcon</td>
            <td data-label="Max speed" class="is-numeric">389 km/h</td>
            <td data-label="Class" class="is-centered">Flight-diving</td>
        </tr>
        <tr>
            <td>Golden eagle</td>
            <td data-label="Max speed" class="is-numeric">320 km/h</td>
            <td data-label="Class" class="is-centered">Flight-diving</td>
        </tr>
        <tr>
            <td>Eurasian hobby</td>
            <td data-label="Max speed" class="is-numeric">160 km/h</td>
            <td data-label="Class" class="is-centered">Flight</td>
        </tr>
        <tr>
            <td>Cheetah</td>
            <td data-label="Max speed" class="is-numeric">109 km/h</td>
            <td data-label="Class" class="is-centered">Land</td>
        </tr>
        <tr>
            <td>Sailfish</td>
            <td data-label="Max speed" class="is-numeric">109 km/h</td>
            <td data-label="Class" class="is-centered">Flight-swimming</td>
        </tr>
        <tr>
            <td>Pronghorn</td>
            <td data-label="Max speed" class="is-numeric">88.5 km/h</td>
            <td data-label="Class" class="is-centered">Land</td>
        </tr>
        <tr>
            <td>Human (who needs to poo)</td>
            <td data-label="Max speed" class="is-numeric">45 km/h</td>
            <td data-label="Class" class="is-centered">Land</td>
        </tr>
    </tbody>
</table>

Wrapper

Wrapper — unsurprisingly — “wraps” around its content, constraining it to a predefined optimal width, centering it on the screen, and adding fluid padding on both sides. The width of a wrapper can be altered using modifier classes.

o-wrapper

Code
<div class="o-wrapper">
    <div></div>
    <div class="o-wrapper__overflowing"></div>
    <div class="o-wrapper__overflowing@lteLine"></div>
</div>

o-wrapper o-wrapper--line

Code
<div class="o-wrapper o-wrapper--line">
    <div></div>
</div>

o-wrapper o-wrapper--fill

Code
<div class="o-wrapper o-wrapper--fill">
    <div></div>
</div>

o-wrapper o-wrapper--fill-medium-margin

Code
<div class="o-wrapper o-wrapper--fill-medium-margin">
    <div></div>
</div>

o-wrapper o-wrapper--fill-large-margin

Code
<div class="o-wrapper o-wrapper--fill-large-margin">
    <div></div>
</div>

Elements

Action

If less visual weight is desired, the action element can be used for secondary actions instead of buttons.

e-action

Code
<button type="button" class="e-action">
    <svg class="e-icon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
    <span>Lorem ipsum</span>
</button>

e-action e-action--subtle

Code
<button type="button" class="e-action e-action--subtle">
    <svg class="e-icon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
    <span>Lorem ipsum</span>
</button>

Anchor

Given an id, anchor pushes up the virtual top edge of an element without disrupting the flow of the document. This can be useful when the id is used in links, especially if sticky elements — such as floating header — are present.

e-anchor

Code
<div class="e-anchor" id="my-anchor">
    <a href="#my-anchor" class="sg-element__placeholder sg-element__placeholder--line sg-element__placeholder--tall"></a>
</div>

Badge

e-badge

  • Top 1
  • Hit
  • –20 %
Code
<ul class="o-inline-list o-inline-list--tight">
    <li class="o-inline-list__item"><span class="e-badge e-badge--top">Top 1</span></li>
    <li class="o-inline-list__item"><span class="e-badge e-badge--ad">Hit</span></li>
    <li class="o-inline-list__item"><span class="e-badge e-badge--sale">–20 %</span></li>
</ul>

Button

Button can take either the form of a link or a clickable element. The basic variant should be used sparingly in a given view, as it represents a primary action, or a CTA. If more than one button is present at once, all secondary actions should use the simple modifier. In case the primary action is destructive and cannot be taken back (e.g. delete a review), the button must use the negative modifier class.

e-button

Code
<button class="e-button" type="button">Dolorum!</button>

e-button[disabled]

Code
<button class="e-button" type="button" disabled>Dolorum!</button>

e-button e-button--fill

Code
<button class="e-button e-button--fill" type="button">Dolorum!</button>

e-button e-button--simple

Code
<button class="e-button e-button--simple" type="button">Dolorum!</button>

e-button e-button--positive

Code
<button class="e-button e-button--positive" type="button">Dolorum!</button>

e-button e-button--highlight

Code
<button class="e-button e-button--highlight" type="button">Dolorum!</button>

e-button e-button--negative

Code
<button class="e-button e-button--negative" type="button">Dolorum!</button>

e-button e-button--facebook

Code
<button class="e-button e-button--facebook" type="button">Dolorum!</button>

Counter

e-counter

Minus accusamus

Code
<h3 class="e-heading e-counter" data-count="345">Minus accusamus</h3>

Heading

e-heading

Reprehenderit architecto

Code
<h3 class="e-heading u-gamma">Reprehenderit architecto</h3>

Icon

Icons are sized and colored according to the inherited font size and color, which makes them automatically adjust to different contexts. Care should be given to always provide a label, either with an adjoining text node or using the attribute aria-label. Each case requires a different set of the attributes aria-label, aria-hidden and role, as can be seen in the examples below.

e-icon

Code
<button class="e-button e-button--medium" type="button">
    <span>Hledat</span>
    <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#loupe"></use></svg>
</button>

<button type="button">
    <svg class="e-icon u-beta" role="image" aria-label="Zavřít"><use xlink:href="#cross"></use></svg>
</button>

e-icon e-icon--circle

Code
<svg class="e-icon e-icon--circle u-alpha u-color-highlight" role="image" aria-label="Informace"><use xlink:href="#info"></use></svg>

e-icon e-icon--orb

Code
<svg class="e-icon e-icon--orb u-alpha u-color-success" aria-hidden="true"><use xlink:href="#success"></use></svg>

Sprite type icons contains:

  • #3d--thin
  • #3d
  • #arrow--down--thin
  • #arrow--down
  • #arrow--left--thin
  • #arrow--left
  • #arrow--right--thin
  • #arrow--right
  • #arrow--up--thin
  • #arrow--up
  • #avatar--simple--thin
  • #avatar--simple
  • #avatar
  • #book--fill
  • #book--thin
  • #book
  • #box--thin
  • #box
  • #bubble--thin
  • #bubble
  • #calendar--thin
  • #calendar
  • #cart--fill
  • #cart--thin
  • #cart
  • #check--thin
  • #check
  • #compare--fill
  • #compare--thin
  • #compare
  • #copy--fill
  • #copy--thin
  • #copy
  • #credit-card--thin
  • #credit-card
  • #cross--thin
  • #cross
  • #delivery--thin
  • #delivery
  • #drag-drop--thin
  • #drag-drop
  • #e-mail--fill
  • #e-mail--thin
  • #e-mail
  • #energy-label--a
  • #energy-label--b
  • #energy-label--c
  • #energy-label--d
  • #energy-label--e
  • #energy-label--f
  • #energy-label--g
  • #energy-label-old--a+++
  • #energy-label-old--a++
  • #energy-label-old--a+
  • #energy-label-old--a
  • #energy-label-old--b
  • #energy-label-old--c
  • #energy-label-old--d
  • #energy-label
  • #error
  • #exclamation--thin
  • #exclamation
  • #exit--fill
  • #exit--thin
  • #exit
  • #eye--fill
  • #eye--thin
  • #eye-close--thin
  • #eye-close
  • #eye
  • #facebook
  • #filters--thin
  • #filters
  • #gallery--fill
  • #gallery--thin
  • #gallery
  • #gear--fill
  • #gear--thin
  • #gear
  • #gift--fill
  • #gift--thin
  • #gift
  • #happy--fill
  • #happy--thin
  • #happy
  • #heart--fill
  • #heart--thin
  • #heart
  • #heureka
  • #history--thin
  • #history
  • #info--thin
  • #info
  • #instagram
  • #lifering--fill
  • #lifering--thin
  • #lifering
  • #linkedin
  • #location--fill
  • #location--thin
  • #location
  • #loupe--thin
  • #loupe
  • #menu--thin
  • #menu
  • #messenger
  • #minus--thin
  • #minus
  • #pencil--fill
  • #pencil--thin
  • #pencil
  • #phone--fill
  • #phone--thin
  • #phone
  • #placeholder--fill
  • #placeholder--thin
  • #placeholder
  • #play--fill
  • #play--thin
  • #play
  • #plus--thin
  • #plus
  • #price-graph--thin
  • #price-graph
  • #price-watch--fill
  • #price-watch--thin
  • #price-watch
  • #product-of-the-year-badge--small--thin
  • #product-of-the-year-badge--small
  • #products--thin
  • #products
  • #question--thin
  • #question
  • #questions--thin
  • #questions
  • #sad--fill
  • #sad--thin
  • #sad
  • #secure--fill
  • #secure--thin
  • #secure
  • #share--thin
  • #share
  • #shop-of-the-year-badge--small--thin
  • #shop-of-the-year-badge--small
  • #sort--thin
  • #sort
  • #star--fill
  • #star--thin
  • #star
  • #store--fill
  • #store--thin
  • #store-address--thin
  • #store-address
  • #store
  • #success
  • #twitter
  • #user
  • #verified-by-customers-badge--small--thin
  • #verified-by-customers-badge--small
  • #video
  • #warning
  • #wrench--fill
  • #wrench--thin
  • #wrench
  • #youtube--thin
  • #youtube

Sprite type flags contains:

  • #flag-ba
  • #flag-bg
  • #flag-cz
  • #flag-hr
  • #flag-hu
  • #flag-ro
  • #flag-rs
  • #flag-si
  • #flag-sk

Input

The class .e-input can be applied to any element meant for user input. Note that for the class to applied properly on some types of elements, several conditions have to be met. When applied on a textarea, the element must also define the  rows attribute. If used on a select element, the attribute type must be set to select. Last, due to the limitations of styling native inputs of the type checkbox and radio, an adjoining label element with the modifier faux must be created next to the regular input. The input element is then hidden while the label is styled in such a way as to substitute its function.

e-input

Code
<input type="text" class="e-input" value="Dolor cupiditate">

e-input[disabled]

Code
<input type="text" class="e-input" value="Dolor cupiditate" disabled>

e-input[rows]

Code
<textarea cols="30" rows="5" class="e-input">Adipisci earum eum cumque, voluptate at sequi architecto facilis vero a maxime ratione fugit possimus necessitatibus aliquid porro doloribus obcaecati provident assumenda facere quibusdam, saepe quod. Dolore earum vero ad.</textarea>

e-input[type="select"]

Code
<select class="e-input" type="select">
    <option>Temporibus culpa</option>
    <option>Nostrum dolore</option>
    <option>Dolore incidunt</option>
</select>

e-input[type="checkbox"]

Code
<input id="checkbox" type="checkbox" class="e-input">
<label for="checkbox" class="e-input e-input--faux" aria-hidden="true"></label>

e-input[type="radio"]

Code
<input id="radio" type="radio" class="e-input">
<label for="radio" class="e-input e-input--faux" aria-hidden="true"></label>

Components

Accordion

c-accordion

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code
<section class="c-accordion js-accordion" id="accordion-1">
    <a href="#accordion-1" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion is-active

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code
<section class="c-accordion js-accordion is-active" id="accordion-2">
    <a href="#accordion-2" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion c-accordion--no-arrow

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code
<section class="c-accordion c-accordion--no-arrow js-accordion" id="accordion-3">
    <a href="#accordion-3" class="c-accordion__button js-accordion__toggle e-button e-button--simple">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion c-accordion@lteLine

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code
<section class="c-accordion c-accordion@lteLine js-accordion" id="accordion-4">
    <a href="#accordion-4" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

Action list

c-action-list

Code
<section class="c-action-list">
    <button class="c-action-list__item e-button e-button--simple" type="button">
        <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#filters"></use></svg>
        <span>Filtrovat</span>
    </button>
    <button class="c-action-list__item e-button e-button--simple" type="button">
        <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#location"></use></svg>
        <span>Výdejní místa</span>
    </button>
    <button class="c-action-list__item e-button e-button--simple" type="button">
        <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#sort"></use></svg>
        <span>Seřadit</span>
    </button>
</section>

Attribute list

c-attributes-list c-attributes-list--pros

  • Natus impedit ducimus quis voluptates laborum distinctio ipsam esse atque possimus numquam.
  • Hic consectetur voluptas, distinctio blanditiis maiores.
  • Labore beatae impedit vel placeat eos maxime necessitatibus, cumque hic!
Code
<ul class="c-attributes-list c-attributes-list--pros o-block-list o-block-list--snug">
    <li class="c-attributes-list__item">Natus impedit ducimus quis voluptates laborum distinctio ipsam esse atque possimus numquam.</li>
    <li class="c-attributes-list__item">Hic consectetur voluptas, distinctio blanditiis maiores.</li>
    <li class="c-attributes-list__item">Labore beatae impedit vel placeat eos maxime necessitatibus, cumque hic!</li>
</ul>

c-attributes-list c-attributes-list--cons

  • Numquam ut cum accusantium, in, nulla molestias non nobis dolorum officiis corporis. Consequuntur, vitae, totam.
  • Sint voluptas nostrum quidem rem aliquam eveniet ipsum.
Code
<ul class="c-attributes-list c-attributes-list--cons o-block-list o-block-list--snug">
    <li class="c-attributes-list__item">Numquam ut cum accusantium, in, nulla molestias non nobis dolorum officiis corporis. Consequuntur, vitae, totam.</li>
    <li class="c-attributes-list__item">Sint voluptas nostrum quidem rem aliquam eveniet ipsum.</li>
</ul>

Banner

c-banner

Code
<div class="c-banner">
    <div id="div-gpt-ad-1536231556476-0" style="width: 500px; height: 175px;"></div>
</div>

c-banner c-banner--sticky

Code
<div class="c-banner c-banner--sticky">
    <div id="div-gpt-ad-1536231556477-0" style="width: 250px; height: 300px;"></div>
</div>

Breadcrumbs

c-breadcrumbs

Code
<nav class="c-breadcrumbs">
    <ul class="c-breadcrumbs__list">
        <li class="c-breadcrumbs__item">
            <a class="c-breadcrumbs__link" href="">Heureka.cz</a>
        </li>
        <li class="c-breadcrumbs__item">
            <a class="c-breadcrumbs__link" href="">Internetové obchody</a>
        </li>
        <li class="c-breadcrumbs__item">
            <span class="c-breadcrumbs__link">Notino</span>
        </li>
    </ul>
</nav>

Bullet list

c-bullet-list

  • Cumque est placeat corporis.
  • Libero sunt, omnis tempore.
  • Quasi praesentium veritatis ratione modi, aliquid aut voluptatem voluptatibus dolore optio impedit, consectetur animi porro nesciunt. Maiores dolorem corporis, ut totam.
  • Provident, minima itaque necessitatibus.
  • Iste, iusto.
  • Tempore, suscipit. Sapiente, quia.
  • Sit numquam, nisi saepe!
Code
<ul class="c-bullet-list">
    <li class="c-bullet-list__item">Cumque est placeat corporis.</li>
    <li class="c-bullet-list__item">Libero sunt, omnis tempore.</li>
    <li class="c-bullet-list__item">Quasi praesentium veritatis ratione modi, aliquid aut voluptatem voluptatibus dolore optio impedit, consectetur animi porro nesciunt. Maiores dolorem corporis, ut totam.</li>
    <li class="c-bullet-list__item">Provident, minima itaque necessitatibus.</li>
    <li class="c-bullet-list__item">Iste, iusto.</li>
    <li class="c-bullet-list__item">Tempore, suscipit. Sapiente, quia.</li>
    <li class="c-bullet-list__item">Sit numquam, nisi saepe!</li>
</ul>

Categories list

c-categories-list

Code
<ul class="c-categories-list">
    <li class="c-categories-list__item">
        <a class="c-categories-list__link" href="">
            <svg class="c-categories-list__image c-categories-list__image--icon e-icon" aria-hidden="true"><use xlink:href="#info"></use></svg>
            <span class="c-categories-list__title">Jak vybrat hobby?</span>
        </a>
    </li>
    <li class="c-categories-list__item">
        <a class="c-categories-list__link" href="">
        <img src="styleguide/img/categories-list/1513.png" aria-hidden="true" class="c-categories-list__image">
        <span class="c-categories-list__title e-counter" data-count="5 279">Hobby</span>
        </a>
    </li>
    <li class="c-categories-list__item">
        <a class="c-categories-list__link" href="">
            <img src="styleguide/img/categories-list/998.png" aria-hidden="true" class="c-categories-list__image">
            <span class="c-categories-list__title e-counter" data-count="6 278">Jídlo a nápoje</span>
        </a>
    </li>
    <li class="c-categories-list__item">
        <a class="c-categories-list__link" href="">
            <img src="styleguide/img/categories-list/975.png" aria-hidden="true" class="c-categories-list__image">
            <span class="c-categories-list__title e-counter" data-count="666">Sport</span>
        </a>
    </li>
    <li class="c-categories-list__item">
        <a class="c-categories-list__link" href="">
            <img src="styleguide/img/categories-list/2051.png" aria-hidden="true" class="c-categories-list__image">
            <span class="c-categories-list__title e-counter" data-count="1 234">Stavebniny</span>
        </a>
    </li>
</ul>

Chip

c-chip

Code
<a class="c-chip" href="#components:chip">
    <span class="c-chip__label">Intel Core i5</span>
    <svg class="c-chip__icon e-icon" aria-label="Zrušit filtr"><use xlink:href="#cross"></use></svg>
</a>

Editable content

c-editable-content

Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Modi maxime omnis, nobis ex numquam distinctio dolorum odio, reprehenderit temporibus aspernatur. Quod hic sunt, consequuntur omnis sint quam ratione, est facilis.

Lorem ipsum

  • Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  • Dolorum, accusantium? Quos cupiditate voluptatem perspiciatis perferendis explicabo.
  • Rerum tempora corrupti suscipit, consectetur id quisquam ex.
  • In recusandae deleniti molestias quam nam unde similique.
  • Deserunt, doloremque. Alias asperiores minus eius perferendis minima.
Thumb

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam iusto molestias modi itaque ab sed necessitatibus et officia eveniet iure, minima iste, aliquam optio autem provident ipsum sint ratione.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus incidunt cum sint, voluptatum, nesciunt facilis, vel ex molestiae eveniet nam quis eos optio. Repellendus magni pariatur quaerat ex, repellat earum.

Lorem, ipsum, dolor.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam iusto molestias modi itaque ab sed necessitatibus et officia eveniet iure, minima iste, aliquam optio autem provident ipsum sint ratione.

Thumb
  1. Lorem ipsum dolor sit amet.
  2. Minus ipsam, blanditiis minima porro?
  3. Veritatis nemo, vitae praesentium laborum.
Animal Max speed Class
Falcon 389 km/h Flight-diving
Golden eagle 320 km/h Flight-diving
Eurasian hobby 160 km/h Flight
Cheetah 109 km/h Land
Sailfish 109 km/h Flight-swimming
Pronghorn 88.5 km/h Land
Human (who needs to poo) 45 km/h Land
Code
<div class="c-editable-content">
    <p>Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Modi maxime omnis, nobis ex numquam distinctio dolorum odio, reprehenderit temporibus aspernatur. Quod hic sunt, consequuntur omnis sint quam ratione, est facilis.</p>

    <h3>Lorem ipsum</h3>

    <ul>
        <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</li>
        <li>Dolorum, accusantium? Quos cupiditate voluptatem perspiciatis perferendis explicabo.</li>
        <li>Rerum tempora corrupti suscipit, consectetur id quisquam ex.</li>
        <li>In recusandae deleniti molestias quam nam unde similique.</li>
        <li>Deserunt, doloremque. Alias asperiores minus eius perferendis minima.</li>
    </ul>

    <section class="c-article-spot">
        <div class="c-article-spot__image-container">
            <img class="c-article-spot__image c-article-spot__image--60" role="presentation" src="styleguide/img/article-content/thumb.jpg" alt="Thumb">
        </div>
        <div class="c-article-spot__content">
            <h2><a href="#">Lorem ipsum</a></h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam iusto molestias modi itaque ab sed necessitatibus et officia eveniet iure, minima iste, aliquam optio autem provident ipsum sint ratione.</p>
        </div>
    </section>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus incidunt cum sint, voluptatum, nesciunt facilis, vel ex molestiae eveniet nam quis eos optio. Repellendus magni pariatur quaerat ex, repellat earum.</p>

    <h4>Lorem, ipsum, dolor.</h4>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quisquam iusto molestias modi itaque ab sed necessitatibus et officia eveniet iure, minima iste, aliquam optio autem provident ipsum sint ratione.</p>

    <div class="c-article-image">
        <img class="c-article-image__image c-article-image__image--50" src="styleguide/img/article-content/thumb.jpg" alt="Thumb" title="Title">
    </div>

    <ol>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Minus ipsam, blanditiis minima porro?</li>
        <li>Veritatis nemo, vitae praesentium laborum.</li>
    </ol>

    <table>
        <thead>
            <tr>
                <th>Animal</th>
                <th>Max speed</th>
                <th class="is-centered">Class</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Falcon</td>
                <td>389 km/h</td>
                <td>Flight-diving</td>
            </tr>
            <tr>
                <td>Golden eagle</td>
                <td>320 km/h</td>
                <td>Flight-diving</td>
            </tr>
            <tr>
                <td>Eurasian hobby</td>
                <td>160 km/h</td>
                <td>Flight</td>
            </tr>
            <tr>
                <td>Cheetah</td>
                <td>109 km/h</td>
                <td>Land</td>
            </tr>
            <tr>
                <td>Sailfish</td>
                <td>109 km/h</td>
                <td>Flight-swimming</td>
            </tr>
            <tr>
                <td>Pronghorn</td>
                <td>88.5 km/h</td>
                <td>Land</td>
            </tr>
            <tr>
                <td>Human (who needs to poo)</td>
                <td>45 km/h</td>
                <td>Land</td>
            </tr>
        </tbody>
    </table>

    <div class="c-article-youtube">
        <iframe class="c-article-youtube__iframe" src="https://www.youtube.com/embed/ce7EXvherHU" frameborder="0"></iframe>
    </div>

</div>

Form cell

c-form-cell

Code
<div class="c-form-cell">
    <label for="c-form-cell__input-1" class="c-form-cell__label">Delectus in:</label>
    <div class="c-form-cell__error">
        <p class="c-notice c-notice--small c-notice--point-bottom c-notice--error" role="alert">Deserunt dicta tempore, sint nam.</p>
    </div>
    <input id="c-form-cell__input-1" type="text" class="c-form-cell__input e-input">
</div>

c-form-cell c-form-cell--disabled

Code
<div class="c-form-cell c-form-cell--disabled">
    <label for="c-form-cell__input-2" class="c-form-cell__label">Erectus out:</label>
    <input id="c-form-cell__input-2" type="text" class="c-form-cell__input e-input" disabled>
</div>

c-form-cell c-form-cell--inline

Code
<div class="c-form-cell c-form-cell--inline">
    <label for="c-form-cell__input-3" class="c-form-cell__label">Tempore:</label>
    <input id="c-form-cell__input-3" type="text" class="c-form-cell__input e-input e-input--small">
</div>

<div class="o-inline-list o-inline-list--loose">
    <div class="c-form-cell c-form-cell--inline">
        <input class="e-input" name="c-form-cell__input-4" id="c-form-cell__input-4a" type="radio" value="soluta">
        <label class="c-form-cell__input e-input--faux e-input" aria-hidden="true" for="c-form-cell__input-4a"></label>
        <label class="c-form-cell__label c-form-cell__label--subtle" for="c-form-cell__input-4a">Soluta</label>
    </div>
    <div class="c-form-cell c-form-cell--inline">
        <input class="e-input" name="c-form-cell__input-4" id="c-form-cell__input-4b" type="radio" value="suscipit">
        <label class="c-form-cell__input e-input--faux e-input" aria-hidden="true" for="c-form-cell__input-4b"></label>
        <label class="c-form-cell__label c-form-cell__label--subtle" for="c-form-cell__input-4b">Suscipit</label>
    </div>
</div>

<div class="c-form-cell c-form-cell--inline">
    <input class="e-input" name="c-form-cell__input-5" id="c-form-cell__input-5" type="checkbox">
    <label class="c-form-cell__input e-input--faux e-input" aria-hidden="true" for="c-form-cell__input-5"></label>
    <label class="c-form-cell__label c-form-cell__label--subtle" for="c-form-cell__input-5">Explicabo facilis, ipsa corrupti iure laudantium blanditiis fuga aliquam officia vel eos minima, ducimus veniam, aliquid laboriosam in voluptates numquam.</label>
</div>

Modal

c-modal

ShopRoku 2017

ShopRoku 2017

Ipsum repellendus sint in fugiat esse dolor ab debitis, qui neque aperiam minus tenetur, quaerat, eaque incidunt enim aliquam cum exercitationem non quo quis ea veritatis rerum, a quae. Ipsum!

Code
<div class="c-modal js-modal">
    <a class="c-modal__toggle js-modal__toggle e-action" href="https://www.shoproku.cz" target="_blank">ShopRoku 2017</a>
    <section class="c-modal__window js-modal__window">
        <button type="button" class="c-modal__close js-modal__close" aria-label="Zavřít"><svg class="e-icon e-icon--circle u-gamma" aria-hidden="true"><use xlink:href="#cross"></use></svg></button>
        <div class="c-modal__content">
            <h3 class="e-heading u-epsilon u-tight">ShopRoku 2017</h3>
            <p>Ipsum repellendus sint in fugiat esse dolor ab debitis, qui neque aperiam minus tenetur, quaerat, eaque incidunt enim aliquam cum exercitationem non quo quis ea veritatis rerum, a quae. Ipsum!</p>
            <footer class="u-align-right">
                <a href="https://www.shoproku.cz" class="e-action" target="_blank">Labore temporibus</a>
            </footer>
        </div>
    </section>
</div>

c-modal c-modal--blur

ShopRoku 2017

ShopRoku 2017

Ipsum repellendus sint in fugiat esse dolor ab debitis, qui neque aperiam minus tenetur, quaerat, eaque incidunt enim aliquam cum exercitationem non quo quis ea veritatis rerum, a quae. Ipsum!

Code
<div class="c-modal c-modal--blur js-modal">
    <a class="c-modal__toggle js-modal__toggle e-action" href="https://www.shoproku.cz" target="_blank">ShopRoku 2017</a>
    <section class="c-modal__window js-modal__window">
        <button type="button" class="c-modal__close js-modal__close" aria-label="Zavřít"><svg class="e-icon e-icon--circle u-gamma" aria-hidden="true"><use xlink:href="#cross"></use></svg></button>
        <div class="c-modal__content">
            <h3 class="e-heading u-epsilon u-tight">ShopRoku 2017</h3>
            <p>Ipsum repellendus sint in fugiat esse dolor ab debitis, qui neque aperiam minus tenetur, quaerat, eaque incidunt enim aliquam cum exercitationem non quo quis ea veritatis rerum, a quae. Ipsum!</p>
            <footer class="u-align-right">
                <a href="https://www.shoproku.cz" class="e-action" target="_blank">Labore temporibus</a>
            </footer>
        </div>
    </section>
</div>

Notice

c-notice

Code
<p class="c-notice" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>

<div class="c-notice" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#info"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

<section class="c-notice" role="alert">
    <svg class="c-notice__icon e-icon u-alpha" aria-hidden="true"><use xlink:href="#gear"></use></svg>
    <div class="c-notice__content">
        <h5 class="e-heading u-epsilon">Inventore officia!</h5>
        <p>Enim ducimus blanditiis, perferendis ipsa optio architecto reprehenderit pariatur dicta, doloribus voluptatibus error, illum culpa. Quidem qui illum quos consequatur assumenda voluptates aspernatur quas, rerum, omnis reiciendis. Quas, facilis, tenetur.</p>
    </div>
</section>

c-notice c-notice--medium

Code
<p class="c-notice c-notice--medium" role="alert">Rem tempora laudantium harum rerum suscipit debitis, distinctio quis ullam!</p>

c-notice c-notice--small

Code
<p class="c-notice c-notice--small" role="alert">Iusto recusandae nesciunt necessitatibus quidem!</p>

c-notice c-notice--error

Code
<div class="c-notice c-notice--error" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#error"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

c-notice c-notice--warning

Code
<div class="c-notice c-notice--warning" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#warning"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

c-notice c-notice--success

Code
<div class="c-notice c-notice--success" role="alert">
    <svg class="c-notice__icon e-icon e-icon--circle u-beta" aria-hidden="true"><use xlink:href="#success"></use></svg>
    <p class="c-notice__content">Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!</p>
</div>

c-notice c-notice--point-top

Code
<p class="c-notice c-notice--point-top c-notice--small c-notice--error" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>

c-notice c-notice--point-down

Code
<p class="c-notice c-notice--point-bottom c-notice--small c-notice--error" role="alert">Quos quam voluptate hic error in, iste, deserunt.</p>

Offscreen

c-offscreen

Ipsum itaque fuga sed fugiat eligendi optio perspiciatis placeat quod maxime consequuntur sit doloribus aperiam enim, quo magni asperiores eaque illum blanditiis! Eum pariatur deserunt dignissimos debitis, cupiditate cumque deleniti.

Lorem ipsum

Perferendis quo quibusdam quod, soluta facilis, incidunt. Nulla quo similique repudiandae odit mollitia earum voluptas, magni consectetur dolores esse et laborum dolore facilis dicta molestiae vero, nemo pariatur modi ducimus.

Modi adipisci nisi, eum debitis quasi reiciendis cum similique eligendi quos accusantium quas dicta omnis perspiciatis perferendis. Tempore aperiam doloribus, saepe laborum mollitia ut cupiditate vitae eos eaque. Molestiae, explicabo.

Code
<div class="c-offscreen js-offscreen" data-offscreen-gtm-category="Product detail" data-offscreen-id="offscreen-1">

    <ul class="c-action-list c-offscreen__toggle">
        <li class="c-action-list__item">
            <button class="c-action-list__action e-action js-offscreen__toggle" data-side="left" type="button">
                <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                <span>Filtrovat</span>
            </button>
        </li>
        <li class="c-action-list__item">
            <button class="c-action-list__action e-action js-offscreen__toggle" data-side="right" type="button">
                <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#sort"></use></svg>
                <span>Seřadit</span>
            </button>
        </li>
    </ul>

    <p>Ipsum itaque fuga sed fugiat eligendi optio perspiciatis placeat quod maxime consequuntur sit doloribus aperiam enim, quo magni asperiores eaque illum blanditiis! Eum pariatur deserunt dignissimos debitis, cupiditate cumque deleniti.</p>

    <aside class="c-offscreen__pane js-offscreen__pane" data-side="left" data-offscreen-gtm-label="Filter">
        <header class="c-offscreen__header">
            <h3 class="c-offscreen__heading u-epsilon">
                <svg class="e-icon" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                <span>Filtrovat</span>
            </h3>
            <button class="c-offscreen__close e-action js-offscreen__toggle" data-side="left" type="button">
                <svg class="e-icon e-icon--circle u-epsilon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
                <span>Zavřít</span>
            </button>
        </header>
        <div class="c-offscreen__content js-offscreen__content"></div>
        <footer class="c-offscreen__footer">
            <button class="c-offscreen__submit js-offscreen__toggle e-button e-button--fill" data-side="left" type="button">
                Zobrazit
            </button>
        </footer>
    </aside>

    <section>

        <h3 class="e-heading u-delta">Lorem ipsum</h3>

        <p>Perferendis quo quibusdam quod, soluta facilis, incidunt. Nulla quo similique repudiandae odit mollitia earum voluptas, magni consectetur dolores esse et laborum dolore facilis dicta molestiae vero, nemo pariatur modi ducimus.</p>

        <aside class="c-offscreen__pane js-offscreen__pane" data-side="right" data-offscreen-gtm-label="Sort">
            <header class="c-offscreen__header">
                <h3 class="c-offscreen__heading u-epsilon">
                    <svg class="e-icon" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                    <span>Seřadit</span>
                </h3>
                <button class="c-offscreen__close e-action js-offscreen__toggle" data-side="right" type="button">
                    <svg class="e-icon e-icon--circle u-epsilon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
                    <span>Zavřít</span>
                </button>
            </header>
            <div class="c-offscreen__content js-offscreen__content"></div>
            <footer class="c-offscreen__footer">
                <button class="c-offscreen__submit js-offscreen__toggle e-button e-button--fill" data-side="right" type="button">
                    Zobrazit
                </button>
            </footer>
        </aside>

        <p>Modi adipisci nisi, eum debitis quasi reiciendis cum similique eligendi quos accusantium quas dicta omnis perspiciatis perferendis. Tempore aperiam doloribus, saepe laborum mollitia ut cupiditate vitae eos eaque. Molestiae, explicabo.</p>

    </section>

</div>

Pagination

c-pagination

Code
<div class="c-pagination js-pagination">

    <div class="c-pagination__container js-pagination__container"></div>

    <nav class="c-pagination__controls js-pagination__controls">
        <a class="e-button e-button--medium e-button--simple c-pagination__button js-pagination__button" href="" rel="next">Zobrazit další recenze</a>
        <ol class="c-pagination__list o-inline-list">
            <li>
                <span class="c-pagination__link is-active">1</span>
            </li>
            <li>
                <a class="c-pagination__link" href="">2</a>
            </li>
            <li>
                <a class="c-pagination__link" href="">3</a>
            </li>
            <li>
                <a href="" class="c-pagination__controls" rel="next" aria-label="Další">
                    <svg class="e-icon" aria-hidden="true"><use xlink:href="#arrow--right"></use></svg>
                </a>
            </li>
        </ol>
    </nav>

</div>

Pipe list

c-pipe-list

  • Ab esse
  • Nisi facere
  • Molestias officia
  • Sagulum
  • Villosaque
  • Admodum
  • Femoralia
  • Coles
  • Sagulum
  • Villosaque
  • Admodum
  • Femoralia
  • Coles
Code
<ul class="c-pipe-list">
    <li class="c-pipe-list__item">Ab esse</li>
    <li class="c-pipe-list__item">Nisi facere</li>
    <li class="c-pipe-list__item">Molestias officia</li>
    <li class="c-pipe-list__item">Sagulum</li>
    <li class="c-pipe-list__item">Villosaque</li>
    <li class="c-pipe-list__item">Admodum</li>
    <li class="c-pipe-list__item">Femoralia</li>
    <li class="c-pipe-list__item">Coles</li>
    <li class="c-pipe-list__item">Sagulum</li>
    <li class="c-pipe-list__item">Villosaque</li>
    <li class="c-pipe-list__item">Admodum</li>
    <li class="c-pipe-list__item">Femoralia</li>
    <li class="c-pipe-list__item">Coles</li>
</ul>

Post

c-post

zakoupeno v Notino.cz

70 %

Zboží dorazilo za 1 den

Doporučuje produkt

  • Natus impedit ducimus quis voluptates laborum distinctio ipsam esse atque possimus numquam.
  • Hic consectetur voluptas, distinctio blanditiis maiores.
  • Labore beatae impedit vel placeat eos maxime necessitatibus, cumque hic!
  • Numquam ut cum accusantium, in, nulla molestias non nobis dolorum officiis corporis. Consequuntur, vitae, totam.
  • Sint voluptas nostrum quidem rem aliquam eveniet ipsum.

Sapiente maxime dolorem aliquid placeat praesentium nulla, quo voluptate error quos, aliquam, maiores similique? Veniam, eum quae esse deserunt sunt, placeat dignissimos praesentium repellat ad quibusdam facere maiores possimus neque eveniet illum atque impedit animi quidem consequuntur totam modi velit. Sapiente perspiciatis expedita alias cupiditate libero maxime? Eum optio explicabo possimus reiciendis iure consequuntur tenetur neque laboriosam natus, beatae dolorum?

Reakce obchodu Notino

Nobis id officia quaerat minima deleniti veniam, iste, voluptates quo labore quidem enim nostrum dolorem unde maiores aliquid ratione doloribus voluptatum deserunt minus magni sequi. Illum non aperiam, ad sunt!

Code
<section class="c-post">

    <p><time class="c-post__publish-time" datetime="2018-10-09 13:00:57">Přidáno: 9. října 2018</time></p>

    <div class="c-post__header">
        <svg class="c-post__avatar e-user-avatar c-post__avatar--certified e-user-avatar--icon e-icon u-gamma" aria-hidden="true"><use xlink:href="#user"></use></svg>
        <div class="c-post__basic-info o-block-list o-block-list--snug">
            <p class="c-post__author">Ověřený zákazník Alexa</p>
            <p>zakoupeno v <a href="#">Notino.cz</a></p>
        </div>
    </div>

    <div class="c-post__further-info c-pipe-list">
        <p class="c-pipe-list__item c-rating-widget u-color-highlight" data-rating="10">
            <span class="c-rating-widget__value">70 %</span>
            <svg class="c-rating c-rating-widget__stars u-color-highlight" aria-hidden="true">
                <g clip-path="url(#clips-rating)">
                    <rect class="c-rating__backdrop" width="100%" height="100%" />
                    <rect class="c-rating__value" width="70%" height="100%" />
                </g>
            </svg>
        </p>
        <p class="c-pipe-list__item">Zboží dorazilo za <span class="c-post__delivery-time">1 den</span></p>
    </div>

    <p class="u-color-success u-bold">Doporučuje produkt</p>

    <div class="c-post__attributes">

        <ul class="c-attributes-list c-attributes-list--pros o-block-list o-block-list--snug">
            <li class="c-attributes-list__item">Natus impedit ducimus quis voluptates laborum distinctio ipsam esse atque possimus numquam.</li>
            <li class="c-attributes-list__item">Hic consectetur voluptas, distinctio blanditiis maiores.</li>
            <li class="c-attributes-list__item">Labore beatae impedit vel placeat eos maxime necessitatibus, cumque hic!</li>
        </ul>

        <ul class="c-attributes-list c-attributes-list--cons o-block-list o-block-list--snug">
            <li class="c-attributes-list__item">Numquam ut cum accusantium, in, nulla molestias non nobis dolorum officiis corporis. Consequuntur, vitae, totam.</li>
            <li class="c-attributes-list__item">Sint voluptas nostrum quidem rem aliquam eveniet ipsum.</li>
        </ul>

    </div>

    <p class="c-post__summary">Sapiente maxime dolorem aliquid placeat praesentium nulla, quo voluptate error quos, aliquam, maiores similique? Veniam, eum quae esse deserunt sunt, placeat dignissimos praesentium repellat ad quibusdam facere maiores possimus neque eveniet illum atque impedit animi quidem consequuntur totam modi velit. Sapiente perspiciatis expedita alias cupiditate libero maxime? Eum optio explicabo possimus reiciendis iure consequuntur tenetur neque laboriosam natus, beatae dolorum?</p>

    <div class="c-post__response">
        <section class="c-post-response">

            <h3 class="c-post-response__heading e-heading">
                <img class="c-post-response__logo" src="https://im9.cz/iR/importobchod-orig/1154_logo--mm160x50.png" aria-hidden="true">
                <span>Reakce obchodu Notino</span>
            </h3>

            <p>Nobis id officia quaerat minima deleniti veniam, iste, voluptates quo labore quidem enim nostrum dolorem unde maiores aliquid ratione doloribus voluptatum deserunt minus magni sequi. Illum non aperiam, ad sunt!</p>

        </section>
    </div>

</section>

Product

Product card has several variants related to: the number of shops offering the product, whether it is a paid ad, or an unpaired product offer. A product card has various links that differ depending on the variant. The possible targets are identified here by the placeholders #review, #detail, #exit and #category.

c-product

  • Top 9

Lenovo IdeaPad S145 81N300ALCK

  • 15.6 palce
  • 1920 x 1080
  • AMD A6
  • 3 GHz
  • 8 GB
  • Integrovaná karta

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída A"><use xlink:href="#energy-label--a"></use></svg>
                    </li>
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--serp

  • Top 9

Lenovo IdeaPad S145 81N300ALCK

  • 15.6 palce
  • 1920 x 1080
  • AMD A6
  • 3 GHz
  • 8 GB
  • Integrovaná karta

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product c-product--serp">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__link" href="#category">Notebooky</a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída C"><use xlink:href="#energy-label--c"></use></svg>
                    </li>
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--single-shop

  • Top 9

Lenovo IdeaPad S145 81N300ALCK

  • 15.6 palce
  • 1920 x 1080
  • AMD A6
  • 3 GHz
  • 8 GB
  • Integrovaná karta

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product c-product--single-shop">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
                <a href="#detail" class="c-product__cta c-product__cta@lteLine e-button e-button--simple">Detail produktu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle is-active">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Odebrat z porovnání</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--single-shop-with-variants

  • Top 9

Lenovo IdeaPad S145 81N300ALCK

  • 15.6 palce
  • 1920 x 1080
  • AMD A6
  • 3 GHz
  • 8 GB
  • Integrovaná karta

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product c-product--single-shop-with-variants">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Vybrat variantu (5)</a>
                <a href="#detail" class="c-product__cta c-product__cta@lteLine e-button e-button--simple">Vybrat variantu (5)</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--offer

Lenovo IdeaPad S145 81N300ALCK

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product c-product--offer">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__params">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída F"><use xlink:href="#energy-label--f"></use></svg>
                    </li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--productad

  • Top 9
  • Hit

Lenovo IdeaPad S145 81N300ALCK

  • 15.6 palce
  • 1920 x 1080
  • AMD A6
  • 3 GHz
  • 8 GB
  • Integrovaná karta

Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.

Lenovo IdeaPad S145 81N300ALCK
Code
<section class="c-product c-product--productad">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                    <li class="e-badge e-badge--ad">Hit</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                <p class="c-product__sponsored">Sponzorováno</p>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--compact

Code
<section class="c-product c-product--compact o-line-wrap o-line-wrap--short u-center">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__params">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída B"><use xlink:href="#energy-label--b"></use></svg>
                    </li>
                </ul>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--compact c-product--single-shop

Code
<section class="c-product c-product--compact c-product--single-shop o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle is-active">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Odebrat z porovnání</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--compact c-product--single-shop-with-variants

Code
<section class="c-product c-product--compact c-product--single-shop-with-variants o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Vybrat variantu (5)</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--compact c-product--offer

Code
<section class="c-product c-product--compact c-product--offer o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

c-product c-product--compact c-product--productad

Code
<section class="c-product c-product--compact c-product--productad o-line-wrap o-line-wrap--short u-center">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                    <li class="e-badge e-badge--ad">Hit</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <p class="c-product__sponsored">Sponzorováno</p>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

Product list

c-product-list

Code
<div class="c-product-list">
    <ul class="c-product-list__items">
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb1.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 1</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Umax VisionBook 14We Plus UMM23014E</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">95 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="95%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">13 recenzí</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">14.1 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Atom</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">4 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Kompaktní notebook navržený pro cestování, práci i zábavu. 14.1 Full HD IPS displej s rozlišením 1920 x 1080 bodů, 4jádrový procesor Intel Atom x5 E8000 (1.04GHz), 4GB operační...</p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">4&nbsp;990 – 6&nbsp;031&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 4 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Umax VisionBook 14We Plus UMM23014E</a>
            </section>
        </li>
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb2.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 2</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Apple MacBook Air 2017 MQD32CZ/A</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">94 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="94%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">101 recenzí</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">13.3 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">1440 x 900</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Core i5</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1.8 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Zakuste pravou svobodu s hliníkovým notebookem disponujícím až 12hodinovou výdrží na jedno nabití. Přestože je tenký, lehký a úsporný, ukrývá dvoujádrový výkon a bleskový SSD disk.</p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">20&nbsp;621 – 32&nbsp;599&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 30 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Apple MacBook Air 2017 MQD32CZ/A</a>
            </section>
        </li>
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb3.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 3</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">100 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="100%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">3 recenze</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">13.3 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">2560 x 1600</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Core i5</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1.4 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Ať už máte na svůj notebook jakékoliv požadavky, MacBook Pro z ročníku 2019 předčí všechna očekávání a svými neuvěřitelnými schopnostmi vás bude zas a znovu překvapovat. </p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">30&nbsp;998 – 40&nbsp;996&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 43 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A</a>
            </section>
        </li>
    </ul>
</div>

c-product-list c-product-list--grid

Code
<div class="c-product-list c-product-list--grid">
    <ul class="c-product-list__items o-grid o-grid--continuous">
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb4.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 1</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské domácí šaty s krátkým rukávem Proužek azurová tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">259 – 373&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 43 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské domácí šaty s krátkým rukávem Proužek azurová tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb5.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 2</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Numoco dámské šaty 98-1 tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">749 – 1&nbsp;090&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 3 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Numoco dámské šaty 98-1 tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#exit" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb6.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 3</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#exit">CityGoddess dámské šaty květinové Chloe DR1261 barevná šedá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">1&nbsp;320&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#exit">v stensport.cz</a>
                            </div>
                            <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#exit" class="c-product__overlay-link">CityGoddess dámské šaty květinové Chloe DR1261 barevná šedá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb7.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Kixmi dámské šaty Juditta tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">528&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 13 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Kixmi dámské šaty Juditta tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb8.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Esmara midi šaty černá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">249&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 12 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Esmara midi šaty černá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb9.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--ad">Hit</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské košilové šaty SK28 ZOiO broskvová</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">522 – 626&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">v 7 obchodech</a>
                            </div>
                            <p class="c-product__sponsored">Sponzorováno</p>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské košilové šaty SK28 ZOiO broskvová</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb10.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Esmara dámské šaty celoplošný potisk růžová</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">249&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 2 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Esmara dámské šaty celoplošný potisk růžová</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb11.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 8</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské maxi šaty s páskem 1548 cihlová červená</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">149 – 179&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 4 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské maxi šaty s páskem 1548 cihlová červená</a>
            </section>
        </li>
    </ul>
</div>

Promo area

c-promo-area

Code
<section class="c-promo-area">
    <ul class="c-promo-area__list">
        <li class="c-promo-area__item">
            <img src="https://via.placeholder.com/580x380" class="c-promo-area__media" srcset="https://via.placeholder.com/580x380, https://via.placeholder.com/1160x760 2x" role="presentation">
            <a href="#" class="c-promo-area__link">
                <span class="c-promo-area__text">Lorem, ipsum dolor sit amet, consectetur adipisicing elit.</span>
            </a>
        </li>
        <li class="c-promo-area__item">
            <iframe title="Offblast!" class="c-promo-area__media" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/MNyG-xu-7SQ" frameborder="0"></iframe>
        </li>
        <li class="c-promo-area__item">
            <img src="https://via.placeholder.com/580x380" class="c-promo-area__media" srcset="https://via.placeholder.com/580x380, https://via.placeholder.com/1160x760 2x" role="presentation">
            <a href="#" class="c-promo-area__link">
                <span class="c-promo-area__text">Quod repellat libero maxime culpa ducimus ea fuga, consectet…</span>
            </a>
        </li>
    </ul>
</section>

Rating

Rating prints five stars, filled according to the width attribute of the .c-rating__value element. It can be sized and colored by applying text modifiers such as .u-gamma or .u-color-highlight.

c-rating

Code
<svg class="c-rating u-gamma u-color-highlight">
    <!-- clip-path must be included as an attribute because of WebKit -->
    <g clip-path="url(#clips-rating)">
        <!-- Dimensions must be included as attributes because of Firefox -->
        <rect class="c-rating__backdrop" width="100%" height="100%" />
        <rect class="c-rating__value" width="73%" height="100%" />
    </g>
</svg>

Rating widget

c-rating-widget

93 %
Code
<div class="c-rating-widget u-color-highlight">
    <span class="c-rating-widget__value">93 %</span>
    <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
        <g clip-path="url(#clips-rating)">
            <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
            <rect class="c-rating__value" width="93%" height="100%"></rect>
        </g>
    </svg>
</div>

Section list

c-section-list

  • Quia, voluptas?

    Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.

  • Consequatur, ratione.

    Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.

  • Commodi, blanditiis!

    Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.

  • Ipsum, ea.

    Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.

Code
<ul class="c-section-list">
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Quia, voluptas?</h5>
        <p>Unde atque in eveniet voluptate excepturi alias deleniti aut magnam sequi, ea doloremque dolores aspernatur voluptatibus facere ratione dolore qui.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Consequatur, ratione.</h5>
        <p>Molestias nulla, eius autem ad voluptatum temporibus in et assumenda. Quisquam fugiat laboriosam iusto facilis quam molestiae repellat, omnis eaque.</p>
    </li>
    <li class="c-section-list__item u-quarter-spacing">
        <h5 class="e-heading">Commodi, blanditiis!</h5>
        <p>Soluta commodi dolorem placeat molestias fugit nam provident, id, minima dolor sunt explicabo atque ratione fugiat dolorum, quae, nulla in.</p</