Heureka Styleguide
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/9.4.0/css/essentials.css">Branding
In order to use different branding, use an alternative version of the essentials.css stylesheet, for example:
<link rel="stylesheet" href="https://im9.cz/ui/9.4.0/css/essentials--arukereso.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/9.4.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/9.4.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/9.4.0/js/modules/essentials.js" type="module"></script>Last, but most importantly, you have to add a HTML class scope-essentials-v9.4.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';@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|prerelease --no-git-tag-version(it updatespackage-lock.jsonfile too) -
or you can use
npm run generate-version, it interactively generates new version inpackage.jsonandpackage-lock.jsonfiles 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 a unit test for any new 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.
Alpha publishing
- Run
generate-versionscript with option 4 (prerelease) locally to generate new alpha version in package.json and lock file - It is built from current version and your current git branch name (
version-branchName-alpha.alphaVersion-7.20.1-resolve-alpha-publish-alpha.0) - Edit Changelog file
- Run
make buildtask after your changes - Push the branch
- Trigger Publish-review stage in pipeline manually to publish alpha version. New version should be visible then on URL
- If you want next version for another commit, you have to generate automatically the new version with increased number via
generate-version - Repeat all the steps
- Install package via command
npm install @heureka/hasty@versionin a project you want to use alpha version of Hasty (ex. @heureka/[email protected]) - You need to change a path to assets instead of im9 path in your project and version of Hasty too
Alpha unpublishing
- Delete folders with your alpha versions from public version
- Trigger Unpublish-review stage in pipeline manually to publish alpha version or it should be called after closing MR automatically
- It will delete all alpha versions for your alpha version
- Result should be visible then on URL
Approval
To release your contribution into production, it has to be reviewed and approved by at least two members of the front-end technical group. Afterwards, it can be merged into the dev branch, which automatically deploys the new version to heureka.cz.stage.heu.cz/ui, where it can be checked once again. Then, create a merge request from the dev branch to the master branch and wait for another approval (one is enough). If approved, you can finally push the update to the production (both to heureka.cz/ui and the private NPM registry) by merging the branch.
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
-
@fontSizeGigaLorem
-
@fontSizeMegaLorem
-
@fontSizeKiloLorem
-
@fontSizeAlphaLorem ipsum
-
@fontSizeBetaLorem ipsum
-
@fontSizeGammaLorem ipsum
-
@fontSizeDeltaLorem ipsum
-
@fontSizeEpsilonLorem ipsum
-
@fontSizeBaseLorem ipsum
-
@fontSizeMilliLorem ipsum
-
@fontSizeMicroLorem ipsum
-
@fontSizeNanoLorem 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. To set spacing, use 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
Base Colors
@colorBlack (#000)@colorWhite (#FFF)
Grey Scale Colors
@colorGrey--700 (#1A1A1A)@colorGrey--600 (#292929)@colorGrey--500 (#474747)@colorGrey--400 (#737373)@colorGrey--300 (#A3A3A3)@colorGrey--200 (#D1D1D1)@colorGrey--150 (#EBEBEB)@colorGrey--100 (#F4F4F4)
Blue Scale Colors (Branding Primary)
See the branding section of the use guide for an example of using a stylesheet with different branding.
@colorBrandPrimary--700 (#001524)@colorBrandPrimary--600 (#002A47)@colorBrandPrimary--500 (#00487A)@colorBrandPrimary--400 (#0096FF)@colorBrandPrimary--300 (#66C0FF)@colorBrandPrimary--200 (#99D5FF)@colorBrandPrimary--150 (#CCEAFF)@colorBrandPrimary--100 (#EBF7FF)
Orange Scale Colors (Branding Secondary)
See the branding section of the use guide for an example of using a stylesheet with different branding.
@colorBrandSecondary--700 (#240D00)@colorBrandSecondary--600 (#471B00)@colorBrandSecondary--500 (#7A2E00)@colorBrandSecondary--400 (#FF660A)@colorBrandSecondary--300 (#FF9F66)@colorBrandSecondary--200 (#FFBF99)@colorBrandSecondary--150 (#FFDFCC)@colorBrandSecondary--100 (#FFF2EB)
Green Scale Colors
@colorGreen--700 (#003313)@colorGreen--600 (#00521E)@colorGreen--500 (#008F34)@colorGreen--400 (#00E554)@colorGreen--300 (#47FF8B)@colorGreen--200 (#A3FFC5)@colorGreen--150 (#D7FFE6)@colorGreen--100 (#EBFFF2)
Red Scale Colors
@colorRed--700 (#330004)@colorRed--600 (#520007)@colorRed--500 (#8F000C)@colorRed--400 (#E50013)@colorRed--300 (#FF4757)@colorRed--200 (#FFA3AB)@colorRed--150 (#FFD7DA)@colorRed--100 (#FFEBEC)
Yellow Scale Colors
@colorYellow--700 (#332900)@colorYellow--600 (#524100)@colorYellow--500 (#8F7200)@colorYellow--400 (#E5B800)@colorYellow--300 (#FFDA47)@colorYellow--200 (#FFEDA3)@colorYellow--150 (#FFF7D7)@colorYellow--100 (#FFFBEB)
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@shadowHuge
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
<ul class="o-block-list">
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
o-block-list o-block-list--snug
<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
<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
<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
<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
<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
<ul class="o-inline-list">
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
o-inline-list o-inline-list--snug
<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
<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
<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
<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
<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
<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
<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
<div class="o-layout">
<div class="o-layout__item">…</div>
<div class="o-layout__item">…</div>
</div>
o-layout o-layout--equal
<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
<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
<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
<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.
<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.
<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.
<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
| 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 |
<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
<div class="o-wrapper u-normal-spacing">
<div>…</div>
<div class="o-wrapper__overflowing">…</div>
<div class="o-wrapper__overflowing@lteLine">…</div>
</div>
o-wrapper o-wrapper--line
<div class="o-wrapper o-wrapper--line">
<div>…</div>
</div>
o-wrapper o-wrapper--fill
<div class="o-wrapper o-wrapper--fill">
<div>…</div>
</div>
o-wrapper o-wrapper--fill-medium-margin
<div class="o-wrapper o-wrapper--fill-medium-margin">
<div>…</div>
</div>
o-wrapper o-wrapper--fill-large-margin
<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
<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
<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
<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 %
<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
<button class="e-button" type="button">Dolorum!</button>
e-button[disabled]
<button class="e-button" type="button" disabled>Dolorum!</button>
e-button e-button--fill
<button class="e-button e-button--fill" type="button">Dolorum!</button>
e-button e-button--simple
<button class="e-button e-button--simple" type="button">Dolorum!</button>
e-button e-button--positive
<button class="e-button e-button--positive" type="button">Dolorum!</button>
e-button e-button--highlight
<button class="e-button e-button--highlight" type="button">Dolorum!</button>
e-button e-button--negative
<button class="e-button e-button--negative" type="button">Dolorum!</button>
e-button e-button--facebook
<button class="e-button e-button--facebook" type="button">Dolorum!</button>Counter
e-counter
Minus accusamus
<h3 class="e-heading e-counter" data-count="345">Minus accusamus</h3>Energy label
Energy labels are dynamic. You can specify it by modifier in pattern 'e-energy-label--
A-G
A-E
A-E-BLUE
Heading
e-heading
Reprehenderit architecto
<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
<div class="u-normal-spacing">
<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>
</div>
e-icon e-icon--circle
<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
<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:
Sprite type flags contains:
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
<input type="text" class="e-input" value="Dolor cupiditate">
e-input[disabled]
<input type="text" class="e-input" value="Dolor cupiditate" disabled>
e-input[rows]
<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"]
<select class="e-input" type="select">
<option>Temporibus culpa</option>
<option>Nostrum dolore</option>
<option>Dolore incidunt</option>
</select>
e-input[type="checkbox"]
<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"]
<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
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.
<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
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.
<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
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.
<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
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.
<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
<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!
<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.
<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>
c-attributes-list c-attributes-list--circle 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!
<ul class="c-attributes-list c-attributes-list--circle 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--circle 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.
<ul class="c-attributes-list c-attributes-list--circle 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
<div class="c-banner">
<div id="div-gpt-ad-1536231556476-0" style="width: 500px; height: 175px;">…</div>
</div>
c-banner c-banner--sticky
<div class="c-banner c-banner--sticky">
<div id="div-gpt-ad-1536231556477-0" style="width: 250px; height: 300px;">…</div>
</div>Breadcrumbs
c-breadcrumbs
<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!
<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
<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
<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.
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.
- Lorem ipsum dolor sit amet.
- Minus ipsam, blanditiis minima porro?
- 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 |
<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>
<p>
<a style="display: block;" href="">Lorem ipsum, dolor.</a>
<a style="display: block;" href="">Lorem ipsum, dolor.</a>
<a style="display: block;" href="">Lorem ipsum, dolor.</a>
</p>
</div>Form cell
c-form-cell
Deserunt dicta tempore, sint nam.
<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
<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
<div class="u-normal-spacing">
<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>
</div>Modal
c-modal
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!
<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
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!
<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
Quos quam voluptate hic error in, iste, deserunt.
Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!
Inventore officia!
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 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
Rem tempora laudantium harum rerum suscipit debitis, distinctio quis ullam!
<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
Iusto recusandae nesciunt necessitatibus quidem!
<p class="c-notice c-notice--small" role="alert">Iusto recusandae nesciunt necessitatibus quidem!</p>
c-notice c-notice--error
Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!
<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
Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!
<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
Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!
<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--neutral
Corporis, fugit, distinctio! Quasi tempore enim, impedit ex!
<div class="c-notice c-notice--neutral" 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>
c-notice c-notice--point-top
Quos quam voluptate hic error in, iste, deserunt.
<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
Quos quam voluptate hic error in, iste, deserunt.
<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.
<div class="c-offscreen js-offscreen u-normal-spacing" 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 u-half-spacing">…</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 class="u-normal-spacing">
<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 u-half-spacing">…</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
<div class="c-pagination js-pagination u-half-spacing">
<div class="c-pagination__container js-pagination__container u-normal-spacing">…</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
<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
Post is used for displaying reviews by users. User can be verified or not. In case user is verified use check--fill svg in c-post__author after authors name.
c-post
zakoupeno v Notino.cz
Doporučuje produkt
Zboží dorazilo za 1 den
- 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!
<section class="c-post">
<div class="c-post__header">
<svg class="c-post__avatar e-user-avatar e-user-avatar--icon e-icon" aria-hidden="true"><use xlink:href="#avatar--simple"></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
<svg class="e-icon" aria-hidden="true"><use xlink:href="#check--fill"></use></svg>
</p>
<p class="c-post__time-shop">
<time class="c-post__publish-time" datetime="2018-10-09 13:00:57">přidáno 9. října 2018,</time>
<span class="c-post__shop-info">zakoupeno v <a href="#" class="c-post__shop-link">Notino.cz</a></span>
</p>
<div class="c-post__language">
<span class="c-post__language-caption">
Převzato z
</span>
<a
class="c-post__foreign-domain e-link"
href="https://www.heureka.sk/"
target="_blank"
rel="noopener noreferrer"
>
Heureka.sk
</a>
<svg class="e-icon" aria-hidden="true"><use xlink:href="#flag-sk"></use></svg>
</div>
</div>
</div>
<div class="c-post__content">
<div class="c-post__further-info">
<p class="c-post__recommendation">Doporučuje produkt</p>
<p class="c-rating-widget" data-rating="10">
<span class="c-rating-widget__value u-color-dark-grey">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>Zboží dorazilo za <span class="c-post__delivery-time">1 den</span></p>
</div>
<div class="c-post__attributes">
<ul class="c-attributes-list c-attributes-list--pros c-attributes-list--circle 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--circle 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>
</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.
<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 B"><use xlink:href="#energy-label--a"></use></svg>
</li>
<li>
<svg width="43" height="24" viewBox="0 0 43 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="c-product__energy-label c-product__energy-label--second e-energy-label e-energy-label--A-E-B" aria-labelledby="label-A-E-A"
area-hidden="true">
<title id="label-A-E-A">Energetický štítek B</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H31L43 12L31 24H0V0Z" class="e-energy-label__background"></path>
<rect width="8" height="22" transform="matrix(-1 0 0 1 9 1)" fill="white"></rect>
<text class="e-energy-label__value"><tspan x="16.0234" y="16.492">B</tspan></text>
<text class="e-energy-label__range"><tspan x="2.42041" y="9.1995">A</tspan></text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.35153 9.98621C5.2811 9.91504 5.18513 9.875 5.085 9.875C4.98487 9.875 4.8889 9.91504 4.81847 9.98621L3.23347 11.5877C3.08778 11.7349 3.08901 11.9723 3.23621 12.118C3.38341 12.2637 3.62085 12.2625 3.76653 12.1153L4.65039 11.2222L4.65039 13.525C4.65039 13.7321 4.81828 13.9 5.02539 13.9C5.2325 13.9 5.40039 13.7321 5.40039 13.525V11.1018L6.40347 12.1153C6.54915 12.2625 6.78659 12.2637 6.93379 12.118C7.08099 11.9723 7.08222 11.7349 6.93653 11.5877L5.35153 9.98621Z" fill="black"></path>
<text class="e-energy-label__range"><tspan x="2.13037" y="21.1995">E</tspan></text>
</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 333 – 14 352 Kč</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.
<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 333 – 14 352 Kč</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.
<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 333 Kč</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.
<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 333 Kč</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.
<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 333 Kč</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.
<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 333 – 14 352 Kč</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
<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--a"></use></svg>
</li>
<li>
<svg width="43" height="24" viewBox="0 0 43 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="c-product__energy-label c-product__energy-label--second e-energy-label e-energy-label--A-E-B" aria-labelledby="label-A-E-A"
area-hidden="true">
<title id="label-A-E-A">Energetický štítek B</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H31L43 12L31 24H0V0Z" class="e-energy-label__background"></path>
<rect width="8" height="22" transform="matrix(-1 0 0 1 9 1)" fill="white"></rect>
<text class="e-energy-label__value"><tspan x="16.0234" y="16.492">B</tspan></text>
<text class="e-energy-label__range"><tspan x="2.42041" y="9.1995">A</tspan></text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.35153 9.98621C5.2811 9.91504 5.18513 9.875 5.085 9.875C4.98487 9.875 4.8889 9.91504 4.81847 9.98621L3.23347 11.5877C3.08778 11.7349 3.08901 11.9723 3.23621 12.118C3.38341 12.2637 3.62085 12.2625 3.76653 12.1153L4.65039 11.2222L4.65039 13.525C4.65039 13.7321 4.81828 13.9 5.02539 13.9C5.2325 13.9 5.40039 13.7321 5.40039 13.525V11.1018L6.40347 12.1153C6.54915 12.2625 6.78659 12.2637 6.93379 12.118C7.08099 11.9723 7.08222 11.7349 6.93653 11.5877L5.35153 9.98621Z" fill="black"></path>
<text class="e-energy-label__range"><tspan x="2.13037" y="21.1995">E</tspan></text>
</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 333 – 14 352 Kč</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
<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 333 Kč</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
<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 333 Kč</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
<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 333 Kč</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
- Top 9
- Hit
Lenovo IdeaPad S145 81N300ALCK
Sponzorováno
<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 333 – 14 352 Kč</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
-
Umax VisionBook 14We Plus UMM23014E- Top 1
Umax VisionBook 14We Plus UMM23014E
- 14.1 palce
- 1920 x 1080
- Intel Atom
- 1 GHz
- 4 GB
- Integrovaná karta
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í...
-
Apple MacBook Air 2017 MQD32CZ/A- Top 2
Apple MacBook Air 2017 MQD32CZ/A
- 13.3 palce
- 1440 x 900
- Intel Core i5
- 1.8 GHz
- 8 GB
- Integrovaná karta
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.
-
Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A- Top 3
Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A
- 13.3 palce
- 2560 x 1600
- Intel Core i5
- 1.4 GHz
- 8 GB
- Integrovaná karta
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.
<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 990 – 6 031 Kč</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 621 – 32 599 Kč</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 998 – 40 996 Kč</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
-
Dámské domácí šaty s krátkým rukávem Proužek azurová tmavě modrá
-
Numoco dámské šaty 98-1 tmavě modrá
-
CityGoddess dámské šaty květinové Chloe DR1261 barevná šedá -
Kixmi dámské šaty Juditta tmavě modrá
-
Esmara midi šaty černá
-
Dámské košilové šaty SK28 ZOiO broskvováSponzorováno
-
Esmara dámské šaty celoplošný potisk růžová
-
Dámské maxi šaty s páskem 1548 cihlová červená
<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 Kč</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 090 Kč</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 320 Kč</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 Kč</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 Kč</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 Kč</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 Kč</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 Kč</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
<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 c-promo-area__media--image" 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
<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
<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.
<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>
</li>
<li class="c-section-list__item u-quarter-spacing">
<h5 class="e-heading">Ipsum, ea.</h5>
<p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
</li>
</ul>
c-section-list c-section-list--border-top
-
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.
<ul class="c-section-list c-section-list--border-top">
<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>
</li>
<li class="c-section-list__item u-quarter-spacing">
<h5 class="e-heading">Ipsum, ea.</h5>
<p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
</li>
</ul>
c-section-list c-section-list--border-bottom
-
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.
<ul class="c-section-list c-section-list--border-bottom">
<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>
</li>
<li class="c-section-list__item u-quarter-spacing">
<h5 class="e-heading">Ipsum, ea.</h5>
<p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
</li>
</ul>
c-section-list c-section-list--loose
-
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.
<ul class="c-section-list c-section-list--loose">
<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>
</li>
<li class="c-section-list__item u-quarter-spacing">
<h5 class="e-heading">Ipsum, ea.</h5>
<p>Quos quo odio hic nostrum dolore, nemo fugiat incidunt facilis laborum saepe dignissimos itaque esse rem odit dolorum distinctio est.</p>
</li>
</ul>Simple list
c-simple-list
- Huawei
- dotykové
- Android
- 2048 MB
- 8 GB
<ul class="c-simple-list">
<li class="c-simple-list__item">Huawei</li>
<li class="c-simple-list__item">dotykové</li>
<li class="c-simple-list__item">Android</li>
<li class="c-simple-list__item">2048 MB</li>
<li class="c-simple-list__item">8 GB</li>
</ul>Subtabs
Subtabs serve the purpose of a second level navigation element. They behave the same way as .c-tabs: a regular list of links (with or without URL anchors) when used without .c-subtabs__region elements and the .js-tabs module. Or, if the .js-tabs class hook (and all its respective subhooks) are applied, all the regions are identified, and the URLs start with an anchor, subtabs switch the respective regions into view.
c-subtabs
Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!
Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.
Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!
<div class="c-subtabs u-half-spacing js-tabs">
<nav class="c-subtabs__controls">
<h5 class="c-subtabs__heading e-heading">Zobrazit recenze</h5>
<ul class="c-subtabs__list js-tabs__list">
<li class="c-subtabs__item js-tabs__item">
<a href="#pozitivni" class="c-subtabs__link e-counter js-tabs__link" data-count="1 234">
Pozitivní
</a>
</li>
<li class="c-subtabs__item js-tabs__item is-active">
<a href="#negativni" class="c-subtabs__link e-counter js-tabs__link" data-count="345">
Negativní
</a>
</li>
<li class="c-subtabs__item js-tabs__item">
<a href="#vsechny" class="c-subtabs__link e-counter js-tabs__link" data-count="1 579">
Všechny
</a>
</li>
</ul>
</nav>
<div class="c-subtabs__region js-tabs__region e-anchor" id="pozitivni">
<p>Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!</p>
</div>
<div class="c-subtabs__region js-tabs__region is-active e-anchor" id="negativni">
<p>Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.</p>
</div>
<div class="c-subtabs__region js-tabs__region e-anchor" id="vsechny">
<p>Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!</p>
</div>
</div>
c-subtabs c-subtabs--top-borderless
Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!
Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.
Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!
<div class="c-subtabs c-subtabs--top-borderless u-half-spacing js-tabs">
<nav class="c-subtabs__controls">
<h5 class="c-subtabs__heading e-heading">Zobrazit recenze</h5>
<ul class="c-subtabs__list js-tabs__list">
<li class="c-subtabs__item js-tabs__item">
<a href="#pozitivni" class="c-subtabs__link e-counter js-tabs__link" data-count="1 234">
Pozitivní
</a>
</li>
<li class="c-subtabs__item js-tabs__item is-active">
<a href="#negativni" class="c-subtabs__link e-counter js-tabs__link" data-count="345">
Negativní
</a>
</li>
<li class="c-subtabs__item js-tabs__item">
<a href="#vsechny" class="c-subtabs__link e-counter js-tabs__link" data-count="1 579">
Všechny
</a>
</li>
</ul>
</nav>
<div class="c-subtabs__region js-tabs__region e-anchor" id="pozitivni">
<p>Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!</p>
</div>
<div class="c-subtabs__region js-tabs__region is-active e-anchor" id="negativni">
<p>Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.</p>
</div>
<div class="c-subtabs__region js-tabs__region e-anchor" id="vsechny">
<p>Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!</p>
</div>
</div>Tabs
c-tabs
Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!
Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.
Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!
<div class="c-tabs u-half-spacing js-tabs">
<div class="c-tabs__header-wrapper">
<div class="c-tabs__gradient c-tabs__gradient--start"></div>
<div class="c-tabs__gradient c-tabs__gradient--end"></div>
<ul class="c-tabs__list js-tabs__list">
<li class="c-tabs__item js-tabs__item">
<a href="#recenze" class="c-tabs__link js-tabs__link" aria-label="Recenze (1 234)">
Recenze
<span aria-label="Počet: 1234" class="c-tabs__count">1 234</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item is-active">
<a href="#vydejni-mista" class="c-tabs__link js-tabs__link" aria-label="Výdejní místa (345)">
Výdejní místa
<span aria-label="Počet: 345" class="c-tabs__count">345</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Diskuze (12)">
Diskuze
<span aria-label="Počet: 12" class="c-tabs__count">12</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="O obchodu">
O obchodu
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Specifikace (382)">
Specifikace
<span aria-label="Počet: 12" class="c-tabs__count">382</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Varianty (12)">
Varianty
<span aria-label="Počet: 12" class="c-tabs__count">12</span>
</a>
</li>
</ul>
</div>
<div class="c-tabs__region js-tabs__region e-anchor" id="recenze">
<p>Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!</p>
</div>
<div class="c-tabs__region js-tabs__region is-active e-anchor" id="vydejni-mista">
<p>Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.</p>
</div>
<div class="c-tabs__region js-tabs__region e-anchor" id="diskuze">
<p>Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!</p>
</div>
</div>
c-tabs c-tabs__header-wrapper c-tabs__header-wrapper--no-border
Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!
Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.
Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!
<div class="c-tabs u-half-spacing js-tabs">
<div class="c-tabs__header-wrapper c-tabs__header-wrapper--no-border">
<div class="c-tabs__gradient c-tabs__gradient--start"></div>
<div class="c-tabs__gradient c-tabs__gradient--end"></div>
<ul class="c-tabs__list js-tabs__list">
<li class="c-tabs__item js-tabs__item">
<a href="#recenze" class="c-tabs__link js-tabs__link" aria-label="Recenze (1 234)">
Recenze
<span aria-label="Počet: 1234" class="c-tabs__count">1 234</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item is-active">
<a href="#vydejni-mista" class="c-tabs__link js-tabs__link" aria-label="Výdejní místa (345)">
Výdejní místa
<span aria-label="Počet: 345" class="c-tabs__count">345</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Diskuze (12)">
Diskuze
<span aria-label="Počet: 12" class="c-tabs__count">12</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="O obchodu">
O obchodu
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Specifikace (382)">
Specifikace
<span aria-label="Počet: 12" class="c-tabs__count">382</span>
</a>
</li>
<li class="c-tabs__item js-tabs__item">
<a href="#diskuze" class="c-tabs__link js-tabs__link" aria-label="Varianty (12)">
Varianty
<span aria-label="Počet: 12" class="c-tabs__count">12</span>
</a>
</li>
</ul>
</div>
<div class="c-tabs__region js-tabs__region e-anchor" id="recenze">
<p>Veritatis quisquam debitis architecto laborum ratione ipsam maiores temporibus nostrum, dolorum possimus alias quis eligendi natus, in culpa, doloribus numquam reprehenderit ullam rem quas expedita repellendus suscipit neque itaque. Eveniet!</p>
</div>
<div class="c-tabs__region js-tabs__region is-active e-anchor" id="vydejni-mista">
<p>Delectus illum molestiae ea dolorem et vero autem ut architecto deleniti saepe, veniam cumque recusandae error id libero. Accusamus mollitia, non eveniet magnam iste nisi repellat. Ab quod veritatis provident.</p>
</div>
<div class="c-tabs__region js-tabs__region e-anchor" id="diskuze">
<p>Tenetur eum quasi vero eos facere. Veritatis excepturi id quo officiis hic reiciendis, ipsum ipsa cupiditate aperiam nihil architecto ipsam molestias maiores quasi nostrum minus dignissimos reprehenderit maxime, quibusdam. Rem!</p>
</div>
</div>Toggle list
c-toggle-list
- Apple
- Asus
- Acer
- Alcatel
- BlackBerry
- Huawei
- HTC
- Hyundai
- Microsoft
<div class="c-toggle-list js-toggle-list" data-togglelist-count="3" data-togglelist-label-hide="Skrýt další značky">
<ul class="c-bullet-list">
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Apple</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">Asus</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Acer</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Alcatel</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">BlackBerry</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Huawei</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">HTC</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Hyundai</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">Microsoft</li>
</ul>
<button type="button" class="c-toggle-list__button js-toggle-list__button">Zobrazit další značky</button>
</div>
c-toggle-list c-toggle-list@lteLine
- Apple
- Asus
- Acer
- Alcatel
- BlackBerry
- Huawei
- HTC
- Hyundai
- Microsoft
<div class="c-toggle-list c-toggle-list@lteLine js-toggle-list" data-togglelist-count="5" data-togglelist-label-hide="Skrýt další značky">
<ul class="c-bullet-list">
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">Apple</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Asus</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Acer</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Alcatel</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">BlackBerry</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Huawei</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">HTC</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item">Hyundai</li>
<li class="c-bullet-list__item c-toggle-list__item js-toggle-list__item is-preferred">Microsoft</li>
</ul>
<button type="button" class="c-toggle-list__button js-toggle-list__button">Zobrazit další značky</button>
</div>Utility
Utilities are single responsibility rules which have a very specific and targeted task. It is also quite common for these rules’ declarations to carry !important so as to guarantee they beat other less specific ones. They do one thing in a very heavy-handed and inelegant way. They are to be used when no other CSS hooks are available, or to tackle completely unique circumstances, for example using .u-align-center to centrally align one piece of text once and once only.
Alignment
Alignment utility classes are used to either align an element itself (with the class .u-center) or its immediate children and/or textual content.
u-center
<div class="u-center">…</div>
u-align-center
Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.
<div class="u-half-spacing">
<p class="u-align-center">Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.</p>
<ul class="o-inline-list u-align-center">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
u-align-center@lteLine
Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.
<div class="u-half-spacing">
<p class="u-align-center@lteLine">Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.</p>
<ul class="o-inline-list u-align-center@lteLine">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
u-align-center@lteLayout
Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.
<div class="u-half-spacing">
<p class="u-align-center@lteLayout">Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.</p>
<ul class="o-inline-list u-align-center@lteLayout">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
u-align-left
Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.
<div class="u-half-spacing">
<p class="u-align-left">Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.</p>
<ul class="o-inline-list u-align-left">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
u-align-right
Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.
<div class="u-half-spacing">
<p class="u-align-right">Laborum deserunt consequatur facilis totam ipsa in commodi, magnam alias accusamus vel dolores adipisci doloremque, sint temporibus architecto.</p>
<ul class="o-inline-list u-align-right">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>Color
Color utility classes alter an element's font color. Some have aliases that might better reflect the context of their use.
u-color-highlight
Accusantium consequatur, ipsam veritatis perspiciatis?
<p class="u-color-highlight">Accusantium consequatur, ipsam veritatis perspiciatis?</p>
u-color-success
Accusantium consequatur, ipsam veritatis perspiciatis?
<p class="u-color-success">Accusantium consequatur, ipsam veritatis perspiciatis?</p>
u-color-warning
Accusantium consequatur, ipsam veritatis perspiciatis?
<p class="u-color-warning">Accusantium consequatur, ipsam veritatis perspiciatis?</p>
u-color-error
Accusantium consequatur, ipsam veritatis perspiciatis?
<p class="u-color-error">Accusantium consequatur, ipsam veritatis perspiciatis?</p>
u-color-text-light
Accusantium consequatur, ipsam veritatis perspiciatis?
<p class="u-color-text-light">Accusantium consequatur, ipsam veritatis perspiciatis?</p>Display
Display utility classes serve the purpose of hiding content in two different ways. The first one, using the class .u-visually-hide, hides an element visually, maintaining its accessibility to assistive technologies like screen readers. The other makes an element disappear completely — at a given breakpoint (e.g. .u-hide@lteLine) or on a given condition (e.g. .u-hide-if-js).
u-visually-hide
I'm invisible, yet accessible!
<p class="u-visually-hide">I'm invisible, yet accessible!</p>
u-hide@lteLine
I don't exist at smaller screens!
<p class="u-hide@lteLine">I don't exist at smaller screens!</p>
u-hide@gtLine
I don't exist at larger screens!
<p class="u-hide@gtLine">I don't exist at larger screens!</p>
u-hide-if-js
<p class="u-hide-if-js">I don't exist if JavaScript is available!</p>Line height
u-line-height-normal
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Neque expedita numquam veniam recusandae aperiam obcaecati molestiae tempora architecto ducimus, culpa, laborum eos. Nisi libero molestiae dolorem aliquam cumque aliquid quaerat.
<p class="u-line-height-normal">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Neque expedita numquam veniam recusandae aperiam obcaecati molestiae tempora architecto ducimus, culpa, laborum eos. Nisi libero molestiae dolorem aliquam cumque aliquid quaerat.
</p>
u-line-height-reduced
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Neque expedita numquam veniam recusandae aperiam obcaecati molestiae tempora architecto ducimus, culpa, laborum eos. Nisi libero molestiae dolorem aliquam cumque aliquid quaerat.
<p class="u-line-height-reduced">
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Neque expedita numquam veniam recusandae aperiam obcaecati molestiae tempora architecto ducimus, culpa, laborum eos. Nisi libero molestiae dolorem aliquam cumque aliquid quaerat.
</p>Sizing
Sizing utility classes modify the font size — relative to the base — in a given context, using a predefined scale. Since all elements should, if possible, use font size related units (em or rem) for defining its structure, the classes can be used to scale any element (button, icon, tabs, etc.) as a whole. In order to maintain consistency, all decisions regarding sizing should be limited to choosing one of the available classes.
u-nano
Laboriosam, natus!
<p class="u-nano">Laboriosam, natus!</p>
u-micro
Laboriosam, natus!
<p class="u-micro">Laboriosam, natus!</p>
u-milli
Laboriosam, natus!
<p class="u-milli">Laboriosam, natus!</p>
u-base
Laboriosam, natus!
<p class="u-base">Laboriosam, natus!</p>
u-epsilon
Laboriosam, natus!
<p class="u-epsilon">Laboriosam, natus!</p>
u-delta
Laboriosam, natus!
<p class="u-delta">Laboriosam, natus!</p>
u-gamma
Laboriosam, natus!
<p class="u-gamma">Laboriosam, natus!</p>
u-beta
Laboriosam, natus!
<p class="u-beta">Laboriosam, natus!</p>
u-alpha
Laboriosam, natus!
<p class="u-alpha">Laboriosam, natus!</p>
u-kilo
Laboriosam, natus!
<p class="u-kilo">Laboriosam, natus!</p>
u-mega
Laboriosam, natus!
<p class="u-mega">Laboriosam, natus!</p>
u-giga
Laboriosam, natus!
<p class="u-giga">Laboriosam, natus!</p>Spacing
Spacing utility classes override the default gap of one line height between elements. Some are applied on parent elements but affect children (e.g. .u-quarter-spacing), others modify an element directly. The class .u-island-2 is an example of the latter — it ensures that the target element always has a gap of (at least) two line heights both above and below its contents.
u-no-spacing
<div class="u-no-spacing">…</div>
u-quarter-spacing
<div class="u-quarter-spacing">…</div>
u-half-spacing
<div class="u-half-spacing">…</div>
u-normal-spacing
<div class="u-normal-spacing">…</div>
u-island
<ul class="u-half-spacing">
<li>…</li>
<li class="u-island">…</li>
<li>…</li>
<li>…</li>
</ul>
u-island-2
<ul class="u-half-spacing">
<li>…</li>
<li class="u-island-2">…</li>
<li>…</li>
<li>…</li>
</ul>
u-island-3
<ul class="u-half-spacing">
<li>…</li>
<li class="u-island-3">…</li>
<li>…</li>
<li>…</li>
</ul>
u-tight
<ul class="u-normal-spacing">
<li>…</li>
<li class="u-tight">…</li>
<li>…</li>
<li>…</li>
</ul>
u-snug
<ul class="u-normal-spacing">
<li>…</li>
<li class="u-snug">…</li>
<li>…</li>
<li>…</li>
</ul>
u-out-of-flow
<div style="position: relative;" class="u-normal-spacing">
<div style="position: absolute; top: 0; right: 0" class="u-out-of-flow">…</div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>