Skip to content

Instantly share code, notes, and snippets.

@fabriciohendrix

fabriciohendrix/styleguide-code.isml

Created November 14, 2018 09:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fabriciohendrix/6e35dad96222a4783b41f3467448d987 to your computer and use it in GitHub Desktop.
Save fabriciohendrix/6e35dad96222a4783b41f3467448d987 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
styleguide-code.isml
<iscontent type="text/html" charset="UTF-8" compact="true" />
<isinclude template="util/modules" />
<isdecorate template="pagetypes/pt_styleguide">
<div class="styleguide">
<ol class="styleguide-list">
<!--- Navigation --->
<div class="styleguide-nav-ctr">
<div class="toggle">
Navigation
</div>
<div class="toggle-content">
<ul class="styleguide-navlist">
<li>
<a href="${'#'}general" class="smooth-scrolling">General</a>
<ul>
<li>
<a href="${'#'}general-hints" class="smooth-scrolling">Hints</a>
</li>
<li>
<a href="${'#'}general-breakpoints" class="smooth-scrolling">Media Queries /
Breakpoints</a>
</li>
<li>
<a href="${'#'}general-include-exclude" class="smooth-scrolling">Include / Exclude
Elements for several Screen Widths</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}grid-system" class="smooth-scrolling">Grid System</a>
<ul>
<li>
<a href="${'#'}grid-intro" class="smooth-scrolling">Introduction</a>
</li>
<li>
<a href="${'#'}grid-options" class="smooth-scrolling">Grid Options</a>
</li>
<li>
<a href="${'#'}grid-example-1" class="smooth-scrolling">Example:
Stacked-to-horizontal</a>
</li>
<li>
<a href="${'#'}grid-example-2" class="smooth-scrolling">Example: X-Small and Small</a>
</li>
<li>
<a href="${'#'}grid-example-3" class="smooth-scrolling">Example: X-Small, Small and
Medium</a>
</li>
<li>
<a href="${'#'}grid-wrapping" class="smooth-scrolling">Example: Column Wrapping</a>
</li>
<li>
<a href="${'#'}grid-offsetting" class="smooth-scrolling">Offsetting Columns</a>
</li>
<li>
<a href="${'#'}grid-nesting" class="smooth-scrolling">Nesting Columns</a>
</li>
<li>
<a href="${'#'}grid-ordering" class="smooth-scrolling">Column Ordering</a>
</li>
<li>
<a href="${'#'}grid-remove-gutter" class="smooth-scrolling">Remove Gutter</a>
</li>
<li>
<a href="${'#'}grid-remove-exdention" class="smooth-scrolling">Remove Grid
Exdention</a>
</li>
<li>
<a href="${'#'}grid-full-height" class="smooth-scrolling">Full Height Column</a>
</li>
<li>
<a href="${'#'}grid-remove-spacing" class="smooth-scrolling">Remove Spacing</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}extended-content" class="smooth-scrolling">Extended Content</a>
</li>
<li>
<a href="${'#'}colors" class="smooth-scrolling">Colors</a>
</li>
<li>
<a href="${'#'}text-fonts" class="smooth-scrolling">Text &amp; Fonts</a>
<ul>
<li>
<a href="${'#'}font-text" class="smooth-scrolling">Text</a>
</li>
<li>
<a href="${'#'}font-headlines" class="smooth-scrolling">Headlines</a>
</li>
<li>
<a href="${'#'}font-links" class="smooth-scrolling">Links</a>
</li>
<li>
<a href="${'#'}svg-icons" class="smooth-scrolling">Icons</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}forms" class="smooth-scrolling">Forms</a>
<ul>
<li>
<a href="${'#'}form-buttons" class="smooth-scrolling">Buttons</a>
</li>
<li>
<a href="${'#'}form-input-default" class="smooth-scrolling">Default Inputfields</a>
</li>
<li>
<a href="${'#'}form-input-normal" class="smooth-scrolling">Normal Inputfields</a>
</li>
<li>
<a href="${'#'}form-input-primaryfield" class="smooth-scrolling">Primary
Inputfields</a>
</li>
<li>
<a href="${'#'}form-input-secondaryfield" class="smooth-scrolling">Secondary
Inputfields</a>
</li>
<li>
<a href="${'#'}form-input-large" class="smooth-scrolling">Large Inputfields</a>
</li>
<li>
<a href="${'#'}form-input-inline" class="smooth-scrolling">Inputfields with
Inline-Label</a>
</li>
<li>
<a href="${'#'}form-error" class="smooth-scrolling">Validation Error</a>
</li>
<li>
<a href="${'#'}form-options" class="smooth-scrolling">Form Row Options</a>
</li>
<li>
<a href="${'#'}form-groups" class="smooth-scrolling">Input Groups</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}carousels" class="smooth-scrolling">Carousels</a>
<ul>
<li>
<a href="${'#'}carousel-visible-tiles" class="smooth-scrolling">Control the number
of visible tiles</a>
</li>
<li>
<a href="${'#'}carousel-bubbles" class="smooth-scrolling">Show navigation bubbles</a>
</li>
<li>
<a href="${'#'}carousel-hide-arrows" class="smooth-scrolling">Hide navigation
arrows</a>
</li>
<li>
<a href="${'#'}carousel-hide-disabled-arrows" class="smooth-scrolling">Hide
disabled navigation arrows</a>
</li>
<li>
<a href="${'#'}carousel-disable-infinite-rotation" class="smooth-scrolling">Disable
infinite rotation</a>
</li>
<li>
<a href="${'#'}carousel-enable-autorotation" class="smooth-scrolling">Enable auto
rotation</a>
</li>
<li>
<a href="${'#'}carousel-indented-arrows" class="smooth-scrolling">Indented
navigation arrows</a>
</li>
<li>
<a href="${'#'}carousel-white-nav" class="smooth-scrolling">White navigation</a>
</li>
<li>
<a href="${'#'}carousel-black-nav" class="smooth-scrolling">Black navigation</a>
</li>
<li>
<a href="${'#'}carousel-text-nav" class="smooth-scrolling">Text navigation</a>
</li>
<li>
<a href="${'#'}carousel-brands" class="smooth-scrolling">Brands</a>
</li>
<li>
<a href="${'#'}carousel-shopbenefits" class="smooth-scrolling">Shop Benefits</a>
</li>
<li>
<a href="${'#'}carousel-teasers" class="smooth-scrolling">Teasers</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}banners" class="smooth-scrolling">Banners</a>
<ul>
<li>
<a href="${'#'}banner-hint" class="smooth-scrolling">Hints</a>
</li>
<li>
<a href="${'#'}banner-examples" class="smooth-scrolling">Banner Examples</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}teasers" class="smooth-scrolling">Teasers</a>
<ul>
<li>
<a href="${'#'}teaser-text" class="smooth-scrolling">Default</a>
</li>
<li>
<a href="${'#'}teaser-text-black" class="smooth-scrolling">Black Text</a>
</li>
<li>
<a href="${'#'}teaser-not-linked" class="smooth-scrolling">Not linked</a>
</li>
<li>
<a href="${'#'}teaser-text-black" class="smooth-scrolling">Black Text</a>
</li>
<li>
<a href="${'#'}teaser-image-only" class="smooth-scrolling">Image only</a>
</li>
<li>
<a href="${'#'}teaser-image-dark-25" class="smooth-scrolling">Darker Image (25%)</a>
</li>
<li>
<a href="${'#'}teaser-image-dark-33" class="smooth-scrolling">Darker Image (33%)</a>
</li>
<li>
<a href="${'#'}teaser-image-dark-50" class="smooth-scrolling">Darker Image (50%)</a>
</li>
<li>
<a href="${'#'}teaser-text-alignment" class="smooth-scrolling">Text Alignment in
Teasers</a>
</li>
<li>
<a href="${'#'}teaser-grid-hint" class="smooth-scrolling">Teaser Grid Hints</a>
</li>
<li>
<a href="${'#'}teaser-grid-examples" class="smooth-scrolling">Teaser Grid Examples</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}content-sections" class="smooth-scrolling">Content Sections</a>
<ul>
<li>
<a href="${'#'}content-section-default" class="smooth-scrolling">Default Content
Section</a>
</li>
<li>
<a href="${'#'}content-section-grey" class="smooth-scrolling">Grey Content Section</a>
</li>
<li>
<a href="${'#'}content-section-textured-light" class="smooth-scrolling">Light
textured Content Section</a>
</li>
<li>
<a href="${'#'}content-section-textured-medium" class="smooth-scrolling">Medium
textured Content Section</a>
</li>
<li>
<a href="${'#'}content-section-textured-dark" class="smooth-scrolling">Dark
textured Content Section</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}extended-content" class="smooth-scrolling">Extended content</a>
<ul>
<li>
<a href="${'#'}exdent-hd" class="smooth-scrolling">Extended content to Full-HD
width (1920px)</a>
</li>
<li>
<a href="${'#'}exdent-hd-2" class="smooth-scrolling">Extended content to Full-HD
width (1920px) - no indent</a>
</li>
<li>
<a href="${'#'}exdent-max" class="smooth-scrolling">Extended content to the max</a>
</li>
<li>
<a href="${'#'}exdent-max-2" class="smooth-scrolling">Extended content to the max -
no indent</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}productinclude" class="smooth-scrolling">Productincludes</a>
<ul>
<li>
<a href="${'#'}productinclude-single" class="smooth-scrolling">Single Producttile
Include</a>
</li>
<li>
<a href="${'#'}productinclude-carousel" class="smooth-scrolling">Producttile
Carousel Include</a>
</li>
</ul>
</li>
<li>
<a href="${'#'}misc" class="smooth-scrolling">Miscellaneous layout elements</a>
<ul>
<li>
<a href="${'#'}misc-price" class="smooth-scrolling">Prices</a>
</li>
<li>
<a href="${'#'}misc-swatches" class="smooth-scrolling">Swatches</a>
</li>
<li>
<a href="${'#'}misc-badges" class="smooth-scrolling">Badges</a>
</li>
<li>
<a href="${'#'}misc-flags" class="smooth-scrolling">Flags</a>
</li>
<li>
<a href="${'#'}misc-messages" class="smooth-scrolling">Messages</a>
</li>
<li>
<a href="${'#'}misc-tabs" class="smooth-scrolling">Tabs</a>
</li>
<li>
<a href="${'#'}misc-accordion" class="smooth-scrolling">Accordion</a>
</li>
<li>
<a href="${'#'}misc-toggle" class="smooth-scrolling">Toggle</a>
</li>
<li>
<a href="${'#'}misc-lists" class="smooth-scrolling">Lists</a>
</li>
<li>
<a href="${'#'}misc-loading-indicator" class="smooth-scrolling">Loading Indicator</a>
</li>
<li>
<a href="${'#'}misc-smooth-scrolling" class="smooth-scrolling">Smooth scrolling to
an content anchor</a>
</li>
<li>
<a href="${'#'}misc-image-rounded" class="smooth-scrolling">Images with rounded
borders</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--- GENERAL --->
<li class="styleguide-section" id="general">
<div class="styleguide-headline">
General
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="general-hints">
<div class="styleguide-headline">
Hints
</div>
<div class="styleguide-content">
<ul class="bullet-list">
<li>
Please try to avoid using of FLOAT ${'<'}div$ {'>'}s and use FLEX instead. For
further information please click <a class="link-colored" href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">here</a>.
</li>
<li>
We use the 'Border-Box'-boxmodel (box-sizing: border-box;) for all elements on this
page. This means that e.g. paddings and borders are part of the defined size of a
container. For further information please click <a class="link-colored" href="https://css-tricks.com/box-sizing/">here</a>.
</li>
<li>
Try to use the grid system wherever it make sense to control the width of page
components. For further information please click <a class="link-colored smooth-scrolling"
href="${'#'}grid-system">here</a>.
</li>
<li>
Keep the CSS/LESS clean, simple and modular. Please try to make components reusable
in varying context.
</li>
<li>
We should strongly try to avoid duplicated styles. Please <i>always</i> verify if
the element you want to style (or parts of it) are not styled already, or if it's
possible to reuse some elements. Please also have a look into the cartridges,
because not every single element is part of the styleguide. <i>If you are not sure
please feel always free to ask.</i>
</li>
<li>
Collect less-variables on a central place: '_variables.less'
</li>
<li>
We use fixed PX-values to define elements (except percentage-values for widths).
It's just easier to maintain in the future. So please don't use relative values
like EM if it's not necessary.
</li>
</ul>
</div>
</li>
<li class="styleguide-section" id="general-breakpoints">
<div class="styleguide-headline">
Media Queries / Breakpoints
</div>
<div class="styleguide-content">
<p>
X-Small screens (Max): 479 pixels <span class="styleguide-desc">// Variable:
<code>@xs-max</code>
</span>
</p>
<p>
Small screens (Min): 480 pixels <span class="styleguide-desc">// Variable:
<code>@sm-min</code>
</span>
</p>
<p>
Small screens (Max): 767 pixels <span class="styleguide-desc">// Variable:
<code>@sm-max</code>
</span>
</p>
<p>
Medium screens (Min): 768 pixels <span class="styleguide-desc">// Variable:
<code>@md-min</code>
</span>
</p>
<p>
Medium screens (Max): 991 pixels <span class="styleguide-desc">// Variable:
<code>@md-max</code>
</span>
</p>
<p>
Large screens (Min): 992 pixels <span class="styleguide-desc">// Variable:
<code>@lg-min</code>
</span>
</p>
<p>
Large screens (Max): 1239 pixels <span class="styleguide-desc">// Variable:
<code>@lg-max</code>
</span>
</p>
<p>
X-Large screens (Min): 1240 pixels <span class="styleguide-desc">// Variable:
<code>@xl-min</code>
</span>
</p>
<p>
&nbsp;
</p>
<p>
Minimum page width: 320 pixels <span class="styleguide-desc">// Variable:
<code>@page-min</code>
</span> >>> Minimim inner content width: 290 pixels (320 - (2 * 15))
</p>
<p>
Maximum page width: 1240 pixels <span class="styleguide-desc">// Variable:
<code>@page-max</code>
</span> >>> Maximum inner content width: 1200 pixels (1240 - (2 * 20))
</p>
</div>
</li>
<li class="styleguide-section" id="general-include-exclude">
<div class="styleguide-headline">
Include / Exclude Elements for several Screen Widths
</div>
<div class="styleguide-content">
<p>
Only visible on x-small screens (0 - 479) <span class="styleguide-desc">// Class
<code>.only-on-xs</code>
</span>
<span class="only-on-xs">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible on small screens (480 - 767) <span class="styleguide-desc">// Class
<code>.only-on-sm</code>
</span>
<span class="only-on-sm">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible on medium screens (768 - 991) <span class="styleguide-desc">// Class
<code>.only-on-md</code>
</span>
<span class="only-on-md">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible on large screens (992 - 1239) <span class="styleguide-desc">// Class
<code>.only-on-lg</code>
</span>
<span class="only-on-lg">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible on x-large screens (1240+) <span class="styleguide-desc">// Class
<code>.only-on-xl</code>
</span>
<span class="only-on-xl">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
&nbsp;
</p>
<p>
Only visible up from small screens (480+) <span class="styleguide-desc">// Class
<code>.only-from-sm</code>
</span>
<span class="only-from-sm">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible up from medium screens (768+) <span class="styleguide-desc">// Class
<code>.only-from-md</code>
</span>
<span class="only-from-md">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible up from large screens (992+) <span class="styleguide-desc">// Class
<code>.only-from-lg</code>
</span>
<span class="only-from-lg">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Only visible up from x-large screens (1240+) <span class="styleguide-desc">// Class
<code>.only-from-xl</code>
</span>
<span class="only-from-xl">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
&nbsp;
</p>
<p>
Not visible on x-small screens (0 - 479) <span class="styleguide-desc">// Class
<code>.hide-on-xs</code>
</span>
<span class="hide-on-xs">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible on small screens (480 - 767) <span class="styleguide-desc">// Class
<code>.hide-on-sm</code>
</span>
<span class="hide-on-sm">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible on medium screens (768 - 991) <span class="styleguide-desc">// Class
<code>.hide-on-md</code>
</span>
<span class="hide-on-md">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible on large screens (992 - 1239) <span class="styleguide-desc">// Class
<code>.hide-on-lg</code>
</span>
<span class="hide-on-lg">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible on x-large screens (1240+) <span class="styleguide-desc">// Class
<code>.hide-on-xl</code>
</span>
<span class="hide-on-xl">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
&nbsp;
</p>
<p>
Not visible up from small screens (480+) <span class="styleguide-desc">// Class
<code>.hide-from-sm</code>
</span>
<span class="hide-from-sm">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible up from medium screens (768+) <span class="styleguide-desc">// Class
<code>.hide-from-md</code>
</span>
<span class="hide-from-md">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible up from large screens (992+) <span class="styleguide-desc">// Class
<code>.hide-from-lg</code>
</span>
<span class="hide-from-lg">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
<p>
Not visible up from x-large screens (992+) <span class="styleguide-desc">// Class
<code>.hide-from-xl</code>
</span>
<span class="hide-from-xl">
<i class="icon icon-checked">
<!-- icon -->
</i>
</span>
</p>
</div>
</li>
</li>
</ol>
</li>
<!--- Grid System --->
<li class="styleguide-section" id="grid-system">
<div class="styleguide-headline">
Grid System
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="grid-intro">
<div class="styleguide-headline">
Introduction
</div>
<div class="styleguide-content">
<p>
We use a responsive, mobile first fluid grid system that appropriately scales up to 12
columns as the device or viewport size increases. It includes predefined classes for easy
layout options, as well as specific classes for more detailed layouts at breakpoints and
for column positioning and altering.
</p>
<p>
Grid systems are used for creating page layouts through a series of rows and columns that
house your content. We use
<code>components_shared/scaffold.less</code> that lays out all columns and breakpoints.
</p>
<p>
This is how our grid system works:
</p>
<ul class="bullet-list">
<li>Use rows to create horizontal groups of columns.</li>
<li>Content should be placed within columns, and only columns may be immediate children of
rows.</li>
<li>Predefined grid classes like
<code>.grid-row</code> and
<code>.col-md-4</code> are available for quickly making grid layouts. Our other classes
can also be used for more semantic layouts.</li>
<li>Columns create gutters (gaps between column content) via
<code>padding</code>.</li>
<li>Grid columns are created by specifying the number of twelve available columns you wish
to span. For example, three equal columns would use three
<code>.col-md-4</code>.</li>
<li>If more than 12 columns are placed within a single row, each group of extra columns
will, as one unit, wrap onto a new line.</li>
<li>Grid classes apply to devices with screen widths greater than or equal to the
breakpoint sizes, and override grid classes targeted at smaller devices. Therefore,
e.g. applying any
<code>.col-sm-*</code> class to an element will not only affect its styling on medium
devices but also on large devices if a
<code>.col-md-*</code> class is not present.</li>
</ul>
</div>
</li>
<li class="styleguide-section" id="grid-options">
<div class="styleguide-headline">
Grid Options
</div>
<div class="styleguide-content">
<p>
See how aspects of how the grid system work across multiple devices with a handy table.
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>
X-Small screens
<small>( <480 )</small> </th> <th>
Small screens
<small>( ≥480px )</small>
</th>
<th>
Medium screens
<small>( ≥768 )</small>
</th>
<th>
Large screens
<small>( ≥992 )</small>
</th>
<th>
Large screens
<small>( ≥1240 )</small>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
<td>
<code>.col-xs-*</code>
</td>
<td>
<code>.col-sm-*</code>
</td>
<td>
<code>.col-md-*</code>
</td>
<td>
<code>.col-lg-*</code>
</td>
<td>
<code>.col-xl-*</code>
</td>
</tr>
<tr>
<th class="text-nowrap" scope="row"># of columns</th>
<td colspan="5">12</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="5">
X-Small and Small screens > 10px (5px on each side of a column)
<br />
Medium and Large screens > 20px (10px on each side of a column)
</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Offsets</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="5">Yes</td>
</tr>
</tbody>
</table>
</div>
</li>
<li class="styleguide-section" id="grid-example-1">
<div class="styleguide-headline">
Example: Stacked-to-horizontal
</div>
<div class="styleguide-content">
<p>Using a single set of
<code>.col-md-*</code> grid classes, you can create a basic grid system that starts out
stacked on mobile devices (the x-small to small range) before becoming horizontal on
tablets (medium) devices. Place grid columns in any
<code>.grid-row</code>.</p>
<div class="grid-row show-grid">
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
<div class="col-md-1">
<div class="col-inner">
<code>.col-md-1</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-md-8">
<div class="col-inner">
<code>.col-md-8</code>
</div>
</div>
<div class="col-md-4">
<div class="col-inner">
<code>.col-md-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-md-4">
<div class="col-inner">
<code>.col-md-4</code>
</div>
</div>
<div class="col-md-4">
<div class="col-inner">
<code>.col-md-4</code>
</div>
</div>
<div class="col-md-4">
<div class="col-inner">
<code>.col-md-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-md-6">
<div class="col-inner">
<code>.col-md-6</code>
</div>
</div>
<div class="col-md-6">
<div class="col-inner">
<code>.col-md-6</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-example-2">
<div class="styleguide-headline">
Example: X-Small and Small
</div>
<div class="styleguide-content">
<p>Don't want your columns to simply stack in smaller devices? Use the x-small and small device
grid classes by adding
<code>.col-xs-*</code>
<code>.col-sm-*</code> to your columns. See the example below for a better idea of how it
all works.</p>
<div class="grid-row show-grid">
<div class="col-xs-12 col-sm-8">
<div class="col-inner">
<code>.col-xs-12</code>
<code>.col-sm-8</code>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-sm-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-xs-6 col-sm-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-sm-4</code>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-sm-4</code>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-sm-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-xs-6">
<div class="col-inner">
<code>.col-xs-6</code>
</div>
</div>
<div class="col-xs-6">
<div class="col-inner">
<code>.col-xs-6</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-example-3">
<div class="styleguide-headline">
Example: X-Small, Small and Medium
</div>
<div class="styleguide-content">
<p>Build on the previous example by creating even more dynamic and powerful layouts with
'Medium' classes
<code>.col-md-*</code>
</p>
<div class="grid-row show-grid">
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="col-inner">
<code>.col-xs-12</code>
<code>.col-sm-6</code>
<code>.col-md-8</code>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-md-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-xs-6 col-md-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-md-4</code>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-md-4</code>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="col-inner">
<code>.col-xs-6</code>
<code>.col-md-4</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-wrapping">
<div class="styleguide-headline">
Example: Column Wrapping
</div>
<div class="styleguide-content">
<p>If more than 12 columns are placed within a single row, each group of extra columns will, as
one unit, wrap onto a new line.</p>
<div class="grid-row show-grid">
<div class="col-xs-9">
<div class="col-inner">
<code>.col-xs-9</code>
</div>
</div>
<div class="col-xs-4">
<div class="col-inner">
<code>.col-xs-4</code>
<br>
<small>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new
line as one contiguous unit.</small>
</div>
</div>
<div class="col-xs-6">
<div class="col-inner">
<code>.col-xs-6</code>
<br>
<small>Subsequent columns continue along the new line.</small>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-offsetting">
<div class="styleguide-headline">
Offsetting Columns
</div>
<div class="styleguide-content">
<p>Move columns to the right using
<code>.col-md-offset-*</code> classes. These classes increase the left margin of a column
by
<code>*</code> columns. For example,
<code>.col-md-offset-4</code> moves
<code>.col-md-4</code> over four columns.</p>
<div class="grid-row show-grid">
<div class="col-md-4">
<div class="col-inner">
<code>.col-md-4</code>
</div>
</div>
<div class="col-md-4 col-md-offset-4">
<div class="col-inner">
<code>.col-md-4</code>
<code>.col-md-offset-4</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-md-3 col-md-offset-3">
<div class="col-inner">
<code>.col-md-3</code>
<code>.col-md-offset-3</code>
</div>
</div>
<div class="col-md-3 col-md-offset-3">
<div class="col-inner">
<code>.col-md-3</code>
<code>.col-md-offset-3</code>
</div>
</div>
</div>
<div class="grid-row show-grid">
<div class="col-md-6 col-md-offset-3">
<div class="col-inner">
<code>.col-md-6</code>
<code>.col-md-offset-3</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-nesting">
<div class="styleguide-headline">
Nesting Columns
</div>
<div class="styleguide-content">
<p>To nest your content with the default grid, add a new
<code>.grid-row</code> and set of
<code>.col-sm-*</code> columns within an existing
<code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to
12 or fewer (it is not required that you use all 12 available columns).</p>
<div class="grid-row show-grid">
<div class="col-sm-12">
<div class="col-inner">
<code>.col-sm-9</code>
<small>Level 1</small>
<br>
<br>
<div class="grid-row">
<div class="col-sm-8 col-md-6">
<div class="col-inner">
<code>.col-sm-8</code>
<code>.col-md-6</code>
<small>Level 2</small>
</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="col-inner">
<code>.col-sm-4</code>
<code>.col-md-6</code>
<small>Level 2</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-ordering">
<div class="styleguide-headline">
Column Ordering
</div>
<div class="styleguide-content">
<p>Here's an example how to re-order columns by using order-attribute:
<code>order:xy</code>.</p>
<div class="grid-row show-grid">
<div class="col-xs-4 col-test-1">
<div class="col-inner">
<small>Col 1</small>
</div>
</div>
<div class="col-xs-4 col-test-2">
<div class="col-inner">
<small>Col 2</small>
</div>
</div>
<div class="col-xs-4 col-test-3">
<div class="col-inner">
<small>Col 3</small>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-remove-gutter">
<div class="styleguide-headline">
Remove Gutter
</div>
<div class="styleguide-content">
<p>You can easily remove the gutter on columns by using the class of
<code>.no-gutter</code>. Add this to each column you wish to remove the left and right
padding from.</p>
<div class="grid-row show-grid">
<div class="col-md-9 no-gutter">
<div class="col-inner">
<code>.col-md-9</code>
<code>.no-gutter</code>
</div>
</div>
<div class="col-md-3 no-gutter">
<div class="col-inner">
<code>.col-md-3</code>
<code>.no-gutter</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-remove-exdention">
<div class="styleguide-headline">
Remove Grid Exdention
</div>
<div class="styleguide-content">
<p>If you use grid tiles without gutters, it could make sense to remove the grid extension too.
Just add
<code>.no-exdent</code> to
<code>.grid-row</code> to do this.</p>
<div class="grid-row no-exdent show-grid">
<div class="col-md-9 no-gutter">
<div class="col-inner">
<code>.col-md-9</code>
<code>.no-gutter</code>
</div>
</div>
<div class="col-md-3 no-gutter">
<div class="col-inner">
<code>.col-md-3</code>
<code>.no-gutter</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-full-height">
<div class="styleguide-headline">
Full Height Column
</div>
<div class="styleguide-content">
<p>You can easily remove the top and bottom padding on columns by using the class of
<code>.full-height</code>. Add this to each column you wish to remove the top and bottom
padding from.</p>
<div class="grid-row show-grid">
<div class="col-md-9 full-height">
<div class="col-inner">
<code>.col-md-9</code>
<code>.full-height</code>
</div>
</div>
<div class="col-md-3 full-height">
<div class="col-inner">
<code>.col-md-3</code>
<code>.full-height</code>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="grid-remove-spacing">
<div class="styleguide-headline">
Remove Spacing
</div>
<div class="styleguide-content">
<p>You can easily remove the side paddings on columns by using the classes
<code>.no-spacing-top</code>
<code>.no-spacing-bottom</code>
<code>.no-spacing-left</code>
<code>.no-spacing-right</code>
</p>
<div class="grid-row show-grid">
<div class="col-md-3 no-spacing-top">
<div class="col-inner" style="min-height: 5em;">
<code>.col-md-3</code>
<code>.no-spacing-top</code>
</div>
</div>
<div class="col-md-3 no-spacing-right">
<div class="col-inner">
<code>.col-md-3</code>
<code>.no-spacing-right</code>
</div>
</div>
<div class="col-md-3 no-spacing-bottom">
<div class="col-inner" style="min-height: 5em;">
<code>.col-md-3</code>
<code>.no-spacing-bottom</code>
</div>
</div>
<div class="col-md-3 no-spacing-left">
<div class="col-inner">
<code>.col-md-3</code>
<code>.no-spacing-left</code>
</div>
</div>
</div>
</div>
</li>
</ol>
</li>
<!--- EXTENDED CONTENT --->
<li class="styleguide-section" id="extended-content">
<div class="styleguide-headline">
Extended content
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="exdent-hd">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) <span class="styleguide-desc">// Class:
<code>.extended-hd</code> // Mixin:
<code>.extended-hd()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the normal page
width.
</p>
<div class="styleguide-content">
<div class="extended-hd styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-hd-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-hd-2">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) - no indent <span class="styleguide-desc">// Class:
<code>.extended-hd-no-indent</code> // Mixin:
<code>.extended-hd-no-indent()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the full width of
the container.
</p>
<div class="styleguide-content">
<div class="extended-hd-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-hd-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-max">
<div class="styleguide-headline">
Extended content to the max <span class="styleguide-desc">// Class:
<code>.extended-max</code> // Mixin:
<code>.extended-max()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content will use the
normal page width.
</p>
<div class="styleguide-content">
<div class="extended-max styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-max"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-max-2">
<div class="styleguide-headline">
Extended content to the max - no indent <span class="styleguide-desc">// Class:
<code>.extended-max-no-indent</code> // Mixin:
<code>.extended-max-no-indent()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content will use the
full width of the container.
</p>
<div class="styleguide-content">
<div class="extended-max-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-max-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div> <li class="styleguide-section" id="extended-content">
<div class="styleguide-headline">
Extended content
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="exdent-hd">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) <span class="styleguide-desc">// Class:
<code>.extended-hd</code> // Mixin:
<code>.extended-hd()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the
normal page width.
</p>
<div class="styleguide-content">
<div class="extended-hd styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-hd-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-hd-2">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) - no indent <span class="styleguide-desc">//
Class:
<code>.extended-hd-no-indent</code> // Mixin:
<code>.extended-hd-no-indent()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the
full width of the container.
</p>
<div class="styleguide-content">
<div class="extended-hd-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-hd-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-max">
<div class="styleguide-headline">
Extended content to the max <span class="styleguide-desc">// Class:
<code>.extended-max</code> // Mixin:
<code>.extended-max()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content
will use the normal page width.
</p>
<div class="styleguide-content">
<div class="extended-max styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-max"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
<li class="styleguide-section" id="exdent-max-2">
<div class="styleguide-headline">
Extended content to the max - no indent <span class="styleguide-desc">// Class:
<code>.extended-max-no-indent</code> // Mixin:
<code>.extended-max-no-indent()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content
will use the full width of the container.
</p>
<div class="styleguide-content">
<div class="extended-max-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="extended-max-no-indent"&gt;
&lt;!-- CONTENT HERE --&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</li>
</ol>
</li>
</li>
</ol>
</li>
<!--- COLORS --->
<li class="styleguide-section" id="colors">
<div class="styleguide-headline">
Colors
</div>
<div class="styleguide-content">
<ul class="testcontent-color-list">
<li class="testcontent-color">
<div class="testcontent-color-bar black">${'#'}000000</div>
<div class="styleguide-desc"> // Variable:
<code>@black</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-highdarkest">${'#'}333</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-highdarkest</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-darkest">${'#'}303030</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-darkest</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-dark">${'#'}555</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-dark</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-darker">${'#'}666</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-darker</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey">${'#'}999</div>
<div class="styleguide-desc"> // Variable:
<code>@grey</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey2">${'#'}808080</div>
<div class="styleguide-desc"> // Variable:
<code>@grey2</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey3">${'#'}bdbdbd</div>
<div class="styleguide-desc"> // Variable:
<code>@grey3</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-lighter">${'#'}ccc</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-lighter</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-highlighter">${'#'}dedede</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-highlighter</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-light">${'#'}eee</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-light</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-light1">${'#'}e0e0e0</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-light1</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-light2">${'#'}e1e1e1</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-light2</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-lightest">${'#'}f3f3f3</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-lightest</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar grey-highlightest">${'#'}f5f5f5</div>
<div class="styleguide-desc"> // Variable:
<code>@grey-highlightest</code>
</div>
</li>
<!--<li class="testcontent-color"><div class="testcontent-color-bar grey-70">hsla(0, 0%, 100%, 0.7)</div><div class="styleguide-desc"> // Variable: <code>@grey-70</code></div></li>-->
<li class="testcontent-color">
<div class="testcontent-color-bar white-1">${'#'}fafafa</div>
<div class="styleguide-desc"> // Variable:
<code>@white-1</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar white">${'#'}ffffff</div>
<div class="styleguide-desc"> // Variable:
<code>@white</code>
</div>
</li>
<!--<li class="testcontent-color"><div class="testcontent-color-bar white-0">rgba(255, 255, 255, 0)</div><div class="styleguide-desc"> // Variable: <code>@white-0</code></div></li>-->
<li class="testcontent-color">
<div class="testcontent-color-bar black-07">rgba(0, 0, 0, 0.07)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-07</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-10">rgba(0, 0, 0, 0.1)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-10</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-12">rgba(0, 0, 0, 0.12)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-12</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-15">rgba(0, 0, 0, 0.15)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-15</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-20">rgba(0, 0, 0, 0.2)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-20</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-24">rgba(0, 0, 0, 0.24)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-24</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-25">rgba(0, 0, 0, 0.25)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-25</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-30">rgba(0, 0, 0, 0.30)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-30</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-38">rgba(0, 0, 0, 0.38)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-38</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-40">rgba(0, 0, 0, 0.40)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-40</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-50">rgba(0, 0, 0, 0.50)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-50</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-54">rgba(0, 0, 0, 0.54)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-54</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-60">rgba(0, 0, 0, 0.60)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-60</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-70">rgba(0, 0, 0, 0.70)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-70</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-80">rgba(0, 0, 0, 0.80)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-80</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar black-87">rgba(0, 0, 0, 0.87)</div>
<div class="styleguide-desc"> // Variable:
<code>@black-87</code>
</div>
</li>
<li>&nbsp;</li>
<li class="testcontent-color">
<div class="testcontent-color-bar red">${'#'}f5003c</div>
<div class="styleguide-desc"> // Variable:
<code>@red</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar red-darker">${'#'}cb0132</div>
<div class="styleguide-desc"> // Variable:
<code>@red-darker</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar red-light">${'#'}ffe7e8</div>
<div class="styleguide-desc"> // Variable:
<code>@red-light</code>
</div>
</li>
<li>&nbsp;</li>
<li class="testcontent-color">
<div class="testcontent-color-bar green">${'#'}28a750</div>
<div class="styleguide-desc"> // Variable:
<code>@green</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar green-darker">${'#'}208540</div>
<div class="styleguide-desc"> // Variable:
<code>@green-darker</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar green-light">${'#'}defce8</div>
<div class="styleguide-desc"> // Variable:
<code>@green-light</code>
</div>
</li>
<li>&nbsp;</li>
<li class="testcontent-color">
<div class="testcontent-color-bar blue">${'#'}0b79a5</div>
<div class="styleguide-desc"> // Variable:
<code>@blue</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar blue-darkest">${'#'}0046aa</div>
<div class="styleguide-desc"> // Variable:
<code>@blue-darkest</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar blue-darker">${'#'}096286</div>
<div class="styleguide-desc"> // Variable:
<code>@blue-darker</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar blue-light">${'#'}e7f7fd</div>
<div class="styleguide-desc"> // Variable:
<code>@blue-light</code>
</div>
</li>
<li>&nbsp;</li>
<li class="testcontent-color">
<div class="testcontent-color-bar orange">${'#'}ff6200</div>
<div class="styleguide-desc"> // Variable:
<code>@orange</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar orange-darker">${'#'}dd5501</div>
<div class="styleguide-desc"> // Variable:
<code>@orange-darker</code>
</div>
</li>
<li class="testcontent-color">
<div class="testcontent-color-bar orange-light">${'#'}ffe9dc</div>
<div class="styleguide-desc"> // Variable:
<code>@orange-light</code>
</div>
</li>
</ul>
</div>
</li>
<!--- TEXT & FONTS --->
<li class="styleguide-section" id="text-fonts">
<div class="styleguide-headline">
Text & Fonts
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="font-text">
<div class="styleguide-headline">
Text
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Size: Medium (Default) <span class="styleguide-desc">// Class:
<code>.text-md</code> // Mixin:
<code>.text-md()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-md">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Size: Small <span class="styleguide-desc">// Class:
<code>.text-sm</code> // Mixin:
<code>.text-sm()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-sm">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Size: Small <span class="styleguide-desc">// Class:
<code>.text-sm2</code> // Mixin:
<code>.text-sm2()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-sm2">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Size: X-Small <span class="styleguide-desc">// Class:
<code>.text-xs</code> // Mixin:
<code>.text-xs()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-xs">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Weight: Normal (400) (Default) <span class="styleguide-desc">// Class:
<code>.text-normal</code> // Mixin:
<code>.text-normal()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-normal">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Weight: Semibold (600) <span class="styleguide-desc">// Class:
<code>.text-semibold</code> // Mixin:
<code>.text-semibold()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-semibold">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Weight: Bold (700) <span class="styleguide-desc">// Class:
<code>.text-bold</code> // Mixin:
<code>.text-bold()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-bold">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Style: Italic <span class="styleguide-desc">// Class:
<code>.text-italic</code> // Mixin:
<code>.text-italic()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-italic">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Style: Uppercase <span class="styleguide-desc">// Class:
<code>.text-uppercase</code> // Mixin:
<code>.text-uppercase()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-uppercase">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Style: Underlined <span class="styleguide-desc">// Class:
<code>.text-underlined</code> // Mixin:
<code>.text-underlined()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-underlined">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Style: Muted <span class="styleguide-desc">// Class:
<code>.text-muted</code> // Mixin:
<code>.text-muted()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-muted">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Alignment: Left (Default) <span class="styleguide-desc">// Class:
<code>.text-left</code> // Mixin:
<code>.text-left()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-left">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Alignment: Center <span class="styleguide-desc">// Class:
<code>.text-center</code> // Mixin:
<code>.text-center()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-center">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Alignment: Right <span class="styleguide-desc">// Class:
<code>.text-right</code> // Mixin:
<code>.text-right()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-right">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Alignment: Justify <span class="styleguide-desc">// Class:
<code>.text-justify</code> // Mixin:
<code>.text-justify()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text-justify">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="font-headlines">
<div class="styleguide-headline">
Headlines
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 1 <span class="styleguide-desc">// Class:
<code>.heading-1</code> // Mixin:
<code>.heading-1()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-1">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 2 <span class="styleguide-desc">// Class:
<code>.heading-2</code> // Mixin:
<code>.heading-2()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-2">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 3 <span class="styleguide-desc">// Class:
<code>.heading-3</code> // Mixin:
<code>.heading-3()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-3">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 4 <span class="styleguide-desc">// Class:
<code>.heading-4</code> // Mixin:
<code>.heading-4()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-4">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 5 <span class="styleguide-desc">// Class:
<code>.heading-5</code> // Mixin:
<code>.heading-5()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-5">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Heading 6 <span class="styleguide-desc">// Class:
<code>.heading-6</code> // Mixin:
<code>.heading-6()</code>
</span>
</div>
<div class="styleguide-content">
<div class="heading-6">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Subheading <span class="styleguide-desc">// Class:
<code>.subheading</code> // Mixin:
<code>.subheading()</code>
</span>
</div>
<div class="styleguide-content">
<div class="subheading">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Headline with border <span class="styleguide-desc">// Class:
<code>.headline-with-border</code> // Mixin:
<code>.headline-with-border()</code>
</span>
</div>
<div class="styleguide-content">
<div class="headline-with-border">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
text_disabled <span class="styleguide-desc">// Class:
<code>.text_disabled</code> // Mixin:
<code>.text_disabled()</code>
</span>
</div>
<div class="styleguide-content">
<div class="text_disabled">
Lorem ipsum dolor sit amet
</div>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="font-links">
<div class="styleguide-headline">
Links
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Default
</div>
<div class="styleguide-content">
<a href="${'#'}">Lorem ipsum dolor sit amet</a>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Colored <span class="styleguide-desc">// Class:
<code>.link-colored</code>
</span>
</div>
<div class="styleguide-content">
<a class="link-colored" href="${'#'}">Lorem ipsum dolor sit amet</a>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Highlighted <span class="styleguide-desc">// Class:
<code>.link-highlighted</code>
</span>
</div>
<div class="styleguide-content">
<a class="link-highlighted" href="${'#'}">Lorem ipsum dolor sit amet</a>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Underlined <span class="styleguide-desc">// Class:
<code>.link-underlined</code>
</span>
</div>
<div class="styleguide-content">
<a class="link-underlined" href="${'#'}">Lorem ipsum dolor sit amet</a>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="svg-icons">
<div class="styleguide-headline">
SVGicons
</div>
<div class="styleguide-content">
<p>The following icons are defined using SVG's. Whenever an icon should be included use one of
the following methods, depending on the context:</p>
<isscript>
var icons = require('*/cartridge/static/default/svg/svgIcons');
</isscript>
<ul class="styleguide-fonticon-list">
<isloop items="${Object.keys(icons)}" var="iconKey">
<isset name="icon" value="${icons[iconKey]}" scope="page" />
<isif condition="${empty(icon.viewbox) || empty(icon.svg)}">
<iscontinue/>
</isif>
<li class="svg-item">
<div class="styleguide__icon">
<issvgicon iconid="${iconKey}" title="" classname="" />
</div>
<div class="styleguide__desc">
// Icon ID
<code>${iconKey}</code>
</div>
</li>
</isloop>
</ul>
</div>
</li>
</ol>
</li>
<!--- FORMS --->
<li class="styleguide-section" id="forms">
<div class="styleguide-headline">
Forms
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="form-buttons">
<div class="styleguide-headline">
Buttons
</div>
<ol class="styleguide-list">
<iscomment>
<li class="styleguide-section">
<div class="styleguide-headline">
Default Button <span class="styleguide-desc">// Class:
<code>.button</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button">Lorem ipsum</button>
</p>
<p>
<button class="button">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
</iscomment>
<li class="styleguide-section">
<div class="styleguide-headline">
button-black-text Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-black-text</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-black-text">Lorem ipsum</button>
</p>
<p>
<button class="button button-black-text">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-black-text" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-light-text Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-light-text</code>
</span>
</div>
<div class="styleguide-content styleguide-dark-content">
<p>
<button class="button button-light-text">Lorem ipsum</button>
</p>
<p>
<button class="button button-light-text">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-light-text" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-grey Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-grey</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-grey">Lorem ipsum</button>
</p>
<p>
<button class="button button-grey">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-grey" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-black Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-black</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-black">Lorem ipsum</button>
</p>
<p>
<button class="button button-black">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-black" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-icon Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-icon</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-icon">
<issvgicon iconid="wishlist" />
</button>
</p>
<p>
<button class="button button-icon" disabled>
<issvgicon iconid="wishlist" />
</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-light-icon Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-icon</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-light-icon">
<issvgicon iconid="add-to-wishlist" />
</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-grey-cart Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-grey-cart</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-grey-cart">Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-teaser Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-teaser</code>
</span>
</div>
<div class="styleguide-content">
<p class="teaser-container">
<button class="button button-teaser">Lorem ipsum</button>
</p>
<p class="teaser-container">
<button class="button button-teaser">
<issvgicon iconid="wishlist" />Lorem ipsum</button>
</p>
<p class="teaser-container">
<button class="button button-teaser" disabled>
<issvgicon iconid="wishlist" />Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-blue Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-blue</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-blue">Lorem ipsum</button>
</p>
<p>
<button class="button button-blue">
<issvgicon iconid="wishlist" />Lorem ipsum</button>
</p>
<p>
<button class="button button-blue" disabled>
<issvgicon iconid="wishlist" />Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-disabled Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-blue</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-disabled">Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
button-transparent-blue Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-transparent-blue</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-transparent-blue">Lorem ipsum</button>
</p>
<p>
<button class="button button-transparent-blue">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-transparent-blue" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
newsletterbottom-button Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.newsletterbottom-button</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button newsletterbottom-button">Lorem ipsum</button>
</p>
</div>
</li>
<iscomment>
<li class="styleguide-section">
<div class="styleguide-headline">
Secondary Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-secondary</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-secondary">Lorem ipsum</button>
</p>
<p>
<button class="button button-secondary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-secondary" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Tertiary Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-tertiary</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-tertiary">Lorem ipsum</button>
</p>
<p>
<button class="button button-tertiary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-tertiary" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Quaternary Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-quaternary</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-quaternary">Lorem ipsum</button>
</p>
<p>
<button class="button button-quaternary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-quaternary" disabled>
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Large Button <span class="styleguide-desc">// Class:
<code>.button .button-large</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-large">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-large button-secondary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-large button-tertiary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
<p>
<button class="button button-large button-quaternary">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Slanted Button <span class="styleguide-desc">// Class:
<code>.button .button-slanted</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-slanted">Lorem ipsum</button>
</p>
<p>
<button class="button button-slanted button-secondary">Lorem ipsum</button>
</p>
<p>
<button class="button button-slanted button-tertiary">Lorem ipsum</button>
</p>
<p>
<button class="button button-slanted button-quaternary">Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Inline Button <span class="styleguide-desc">// Class:
<code>.button-inline</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-inline">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
<button class="button button-inline">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
<button class="button button-inline">
<issvgicon iconid="wishlist" /> Lorem ipsum</button>
</p>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Text Button <span class="styleguide-desc">// Class:
<code>.button</code>
<code>.button-text</code>
</span>
</div>
<div class="styleguide-content">
<p>
<button class="button button-text">Lorem ipsum</button>
</p>
</div>
</li>
</ol>
</li>
</iscomment>
<li class="styleguide-section" id="form-input-default">
<div class="styleguide-headline">
Default Inputfields
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputpalceholder}" type="text"
placeholder="Placeholder" />
<isinputfield formfield="${pdict.CurrentForms.test.inputpassword}" type="password" />
<isinputfield formfield="${pdict.CurrentForms.test.inputmandatory}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputcaption}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea}" type="textarea" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard}" type="select" />
<isinputfield formfield="${pdict.CurrentForms.test.radiostandard}" type="radio" />
<isinputfield formfield="${pdict.CurrentForms.test.checkboxstandard}" type="checkbox" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-input-primaryfield">
<div class="styleguide-headline">
.primaryfield Inputfields
</div>
<div class="styleguide-content primaryfield">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard_label_inline}"
rowclass="label-inline" type="select" />
<isinputfield formfield="${pdict.CurrentForms.test.inputpalceholder}" type="text"
placeholder="Placeholder" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea}" type="textarea" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-input-secondaryfield">
<div class="styleguide-headline">
.secondaryfield Inputfields
</div>
<div class="styleguide-content secondaryfield">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputpalceholder}" type="text"
placeholder="Placeholder" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea}" type="textarea" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-input-default">
<div class="styleguide-headline">
.textfield Inputfields
</div>
<div class="styleguide-content textfield">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputpalceholder}" type="text"
placeholder="Placeholder" />
<isinputfield formfield="${pdict.CurrentForms.test.inputmandatory}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputcaption}" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea}" type="textarea" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-input-search">
<div class="styleguide-headline">
.searchfield Inputfields
</div>
<div class="styleguide-content searchfield">
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard}" type="text" />
</div>
</li>
<li class="styleguide-section" id="form-input-large">
<div class="styleguide-headline">
Large Inputfields <span class="styleguide-desc">// Class:
<code>.form-row</code>
<code>.form-row-large</code>
</span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard_large}" rowclass="form-row-large"
type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard_large}" rowclass="form-row-large"
type="select" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-input-inline-label">
<div class="styleguide-headline">
Inputfields with Inline-Label <span class="styleguide-desc">// Class:
<code>.form-row</code>
<code>.label-inline</code>
</span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard_label_inline}"
rowclass="label-inline" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard_label_inline}"
rowclass="label-inline" type="select" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea_label_inline}"
rowclass="label-inline" type="textarea" />
</fieldset>
</form>
</div>
</li>
<!---
<li class="styleguide-section" id="form-input-large-input-label">
<div class="styleguide-headline">
Inputfields (Large Fields & Inline Label) <span class="styleguide-desc">// Class: <code>.form-row</code> <code>.form-row-large</code> <code>.label-inline</code></span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard_large_label_inline}" rowclass="form-row-large label-inline" type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard_large_label_inline}" rowclass="form-row-large label-inline" type="select" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea_large_label_inline}" rowclass="form-row-large label-inline" type="textarea" />
</fieldset>
</form>
</div>
</li>
--->
<li class="styleguide-section" id="form-error">
<div class="styleguide-headline">
Validation Error <span class="styleguide-desc">// Class:
<code>.form-row</code>
<code>.validation-error</code>
</span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.inputstandard_error}" rowclass="validation-error"
type="text" />
<isinputfield formfield="${pdict.CurrentForms.test.inputtextarea_error}" rowclass="validation-error"
type="textarea" />
<isinputfield formfield="${pdict.CurrentForms.test.selectstandard_error}" rowclass="validation-error"
type="select" />
<isinputfield formfield="${pdict.CurrentForms.test.radiostandard_error}" rowclass="validation-error"
type="radio" />
<isinputfield formfield="${pdict.CurrentForms.test.checkboxstandard_error}" rowclass="validation-error"
type="checkbox" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section" id="form-options">
<div class="styleguide-headline">
Form Row Options
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
No Margin <span class="styleguide-desc">// Class:
<code>.form-row</code>
<code>.form-row-no-margin</code>
</span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.formoption_nomargin}" type="text"
rowclass="form-row-no-margin" placeholder="No Margin" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
No Label <span class="styleguide-desc">// Class:
<code>.form-row</code>
<code>.form-row-no-label</code>
</span>
</div>
<div class="styleguide-content">
<form>
<fieldset>
<isinputfield formfield="${pdict.CurrentForms.test.formoption_nolabel}" type="text"
rowclass="form-row-no-label" placeholder="No Label" />
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Restricted Width
</div>
<p>
Please use the grid system to restrict the width of form elements. You can find some
examples below.
</p>
<div class="styleguide-content">
<form>
<fieldset>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_75}" type="text"
rowclass="col-md-9" placeholder="75%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_66}" type="text"
rowclass="col-md-8" placeholder="66%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_50}" type="text"
rowclass="col-md-6" placeholder="50%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_33}" type="text"
rowclass="col-md-4" placeholder="33%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_25}" type="text"
rowclass="col-md-3" placeholder="25%" />
</div>
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Multipe Inputs in a Row
</div>
<p>
You can also use the grid system to show multiple form-elements in a row. You can find
some examples below.
</p>
<div class="styleguide-content">
<form>
<fieldset>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_50}" type="text"
rowclass="col-md-6 full-height" placeholder="50%" />
<isinputfield formfield="${pdict.CurrentForms.test.formoption_50}" type="text"
rowclass="col-md-6 full-height" placeholder="50%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_33}" type="text"
rowclass="col-md-4 full-height" placeholder="33%" />
<isinputfield formfield="${pdict.CurrentForms.test.formoption_33}" type="text"
rowclass="col-md-4 full-height" placeholder="33%" />
<isinputfield formfield="${pdict.CurrentForms.test.formoption_33}" type="text"
rowclass="col-md-4 full-height" placeholder="33%" />
</div>
<div class="grid-row">
<isinputfield formfield="${pdict.CurrentForms.test.formoption_25}" type="text"
rowclass="col-md-3 full-height" placeholder="25%" />
<isinputfield formfield="${pdict.CurrentForms.test.formoption_50}" type="text"
rowclass="col-md-6 full-height" placeholder="50%" />
<isinputfield formfield="${pdict.CurrentForms.test.formoption_25}" type="text"
rowclass="col-md-3 full-height" placeholder="25%" />
</div>
</fieldset>
</form>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Multipe Inputs in a Row and inline Label
</div>
<div class="styleguide-content">
<form>
<fieldset>
<div class="grid-row input-row">
<div class="col-xs-6 col-lg-8 full-height">
<isinputfield formfield="${pdict.CurrentForms.billing.paymentMethods.klarna.birthday.year}"
rowclass="label-inline form-row-margin" type="select" />
</div>
<div class="col-xs-3 col-lg-2 full-height">
<isinputfield formfield="${pdict.CurrentForms.billing.paymentMethods.klarna.birthday.month}"
rowclass="form-row-margin" type="select" label="false" />
</div>
<div class="col-xs-3 col-lg-2 full-height">
<isinputfield formfield="${pdict.CurrentForms.billing.paymentMethods.klarna.birthday.day}"
rowclass="form-row-margin" type="select" label="false" />
</div>
</div>
</fieldset>
</form>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="form-groups">
<div class="styleguide-headline">
Input Groups <span class="styleguide-desc">// Class:
<code>.input-group</code>
</span>
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="form-groups">
<div class="styleguide-headline">
Button <span class="styleguide-desc">// Class:
<code>.input-group-btn</code>
</span>
</div>
<div class="styleguide-content">
<div class="form-row">
<div class="input-group">
<input type="text" class="input-text" placeholder="Placeholder">
<span class="input-group-btn">
<button class="button button-icon" type="button">Go</button>
</span>
</div>
</div>
<div class="form-row">
<div class="input-group">
<span class="input-group-btn">
<button class="button button-icon" type="button">Go</button>
</span>
<input type="text" class="input-text" placeholder="Placeholder">
</div>
</div>
<div class="form-row">
<div class="input-group">
<span class="input-group-btn">
<button class="button button-icon" type="button">Go</button>
</span>
<input type="text" class="input-text" placeholder="Placeholder">
<span class="input-group-btn">
<button class="button button-icon" type="button">Go</button>
</span>
</div>
</div>
</div>
</li>
</ol>
<ol class="styleguide-list">
<li class="styleguide-section" id="form-groups">
<div class="styleguide-headline">
Addon <span class="styleguide-desc">// Class:
<code>.input-group-btn</code>
</span>
</div>
<div class="styleguide-content">
<div class="form-row">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="icon icon-search">
<!-- icon -->
</i>
</span>
<input type="text" class="input-text" placeholder="Placeholder">
</div>
</div>
<div class="form-row">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">
<i class="icon icon-search">
<!-- icon -->
</i>
</span>
<span class="input-group-addon" id="basic-addon1">What are you looking for?</span>
<input type="text" class="input-text" placeholder="Placeholder">
</div>
</div>
<div class="form-row">
<div class="input-group">
<input type="text" class="input-text" placeholder="Placeholder">
<span class="input-group-addon" id="basic-addon1">
<i class="icon icon-search">
<!-- icon -->
</i>
</span>
</div>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
<!--- CAROUSELS --->
<li class="styleguide-section" id="carousels">
<div class="styleguide-headline">
Carousels
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="carousel-visible-tiles">
<div class="styleguide-headline">
Control the number of visible tiles
</div>
<p>
Please use the grid system to control the number of visible carousel-tiles on several devices.
You can find some examples below.
</p>
<div class="styleguide-content">
<div class="carousel-container">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
<div class="carousel-container">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
<div class="carousel-container">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-6 col-md-4 col-lg-2 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-bubbles">
<div class="styleguide-headline">
Show navigation bubbles <span class="styleguide-desc">// Class:
<code>.show-nav-bubbles</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container show-nav-bubbles">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container show-nav-bubbles"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-hide-arrows">
<div class="styleguide-headline">
Hide navigation arrows <span class="styleguide-desc">// Class:
<code>.hide-nav-arrows</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container hide-nav-arrows">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container hide-nav-arrows"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-hide-disabled-arrows">
<div class="styleguide-headline">
Hide disabled navigation arrows <span class="styleguide-desc">// Class:
<code>.hide-disabled-nav-arrows</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container hide-disabled-nav-arrows">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container hide-disabled-nav-arrows"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 col-md-4 col-lg-3 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-disable-infinite-rotation">
<div class="styleguide-headline">
Disable infinite rotation <span class="styleguide-desc">// Class:
<code>.no-infinite-rotation</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container no-infinite-rotation">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container no-infinite-rotation"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-enable-autorotation">
<div class="styleguide-headline">
Enable auto rotation <span class="styleguide-desc">// Class:
<code>.auto-rotation</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container auto-rotation">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container auto-rotation"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-indented-arrows">
<div class="styleguide-headline">
Indented navigation arrows <span class="styleguide-desc">// Class:
<code>.indented-nav-arrows</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container indented-nav-arrows">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container indented-nav-arrows"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-white-nav">
<div class="styleguide-headline">
White navigation <span class="styleguide-desc">// Class:
<code>.white-nav</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container white-nav show-nav-bubbles indented-nav-arrows">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container white-nav show-nav-bubbles indented-nav-arrows"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-black-nav">
<div class="styleguide-headline">
Black navigation <span class="styleguide-desc">// Class:
<code>.black-nav</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container black-nav show-nav-bubbles">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
1
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
2
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
4
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container black-nav show-nav-bubbles"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-text-nav">
<div class="styleguide-headline">
Text navigation <span class="styleguide-desc">// Class:
<code>.nav-text</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container nav-text show-nav-bubbles">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height" data-label="A">
<div class="styleguide-carousel-tile">
A
</div>
</li>
<li class="carousel-tile col-sm-12 full-height" data-label="B">
<div class="styleguide-carousel-tile">
B
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
3
</div>
</li>
<li class="carousel-tile col-sm-12 full-height" data-label="D">
<div class="styleguide-carousel-tile">
D
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
5
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
6
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
7
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
8
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
9
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile">
10
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container nav-text show-nav-bubbles"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile col-sm-12 full-height" data-label="A"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
A
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height" data-label="B"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
B
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
1
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile col-sm-12 full-height"&gt;
&lt;div class="styleguide-carousel-tile"&gt;
2
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
<p>Per default, the numbers 1 - X are used as labels, if you like to override this with custom
labels, you can use the
<code>data-label</code> attribute at the
<code>.carousel-tile</code> elements.</p>
</li>
<li class="styleguide-section" id="carousel-brands">
<div class="styleguide-headline">
Top Brands <span class="styleguide-desc">// Class:
<code>.carousel-brands</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container carousel-brands">
<div class="carousel-container-inner">
<ul class="carousel">
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
<li>
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name">
</a>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container carousel-brands"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="${'#'}"&gt;
&lt;img src="${URLUtils.staticURL('/images/test/temp-brand-carousel.png')}"
alt="Brand Name"&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-shopbenefits">
<div class="styleguide-headline">
Shop Benefits <span class="styleguide-desc">// Class:
<code>.carousel-shopbenefits</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container carousel-shopbenefits show-nav-bubbles hide-disabled-nav-arrows"
id="carousel-shopbenefits">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile grid-tile col-xs-12 full-height">
<div class="carousel-tile-inner">
<a href="" class="button button-secondary">
Weiter
</a>
<i class="icon icon-clock">
<!-- icon -->
</i>
<h3 class="heading-1">
Versand mit DHL -
<br />
innerhalb von 24 Stunden
</h3>
<p class="subheading">
Bestellungen bis 15 Uhr (Mo-Fr) und samstags bis 12 Uhr versenden wir
nach Zahlungseingang noch am selben Tag.
</p>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 full-height">
<div class="carousel-tile-inner">
<a href="" class="button button-secondary">
Weiter
</a>
<i class="icon icon-secure-payment">
<!-- icon -->
</i>
<h3 class="heading-1">
Immer die passende Zahlungsart -
<br />
gebührenfrei und sicher
</h3>
<p class="subheading">
Du hast die Wahl: Zahle ganz bequem auf Rechnung, via PayPal Express,
Amazon Pay, Kreditkarte oder per Vorauskasse.
</p>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 full-height">
<div class="carousel-tile-inner">
<a href="" class="button button-secondary">
Weiter
</a>
<i class="icon icon-delivery">
<!-- icon -->
</i>
<h3 class="heading-1">
Versandkostenfrei
<br />
ab 30 €
</h3>
<p class="subheading">
Der Rückversand geht natürlich aufs Haus.
</p>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 full-height">
<div class="carousel-tile-inner">
<a href="" class="button button-secondary">
Weiter
</a>
<i class="icon icon-lock">
<!-- icon -->
</i>
<h3 class="heading-1">
Ein Konto,
<br />
viele Vorteile
</h3>
<p class="subheading">
Mit einem Kundenkonto bei bikester profitierst du gleich mehrfach:
</p>
<div class="grid-row">
<div class="col-md-6 full-height">
<ul>
<li>Aktueller Bestellstatus</li>
<li>Detaillierte Bestellhistorie</li>
<li>Bequeme Adressverwaltung</li>
</ul>
</div>
<div class="col-md-6 full-height">
<ul>
<li>Persönliche Wunschliste</li>
<li>Newsletter-Verwaltung</li>
<li>Sonder- und Rabattaktionen</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container carousel-shopbenefits show-nav-bubbles
hide-disabled-nav-arrows"
id="carousel-shopbenefits"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 full-height"&gt;
&lt;div class="carousel-tile-inner"&gt;
&lt;a href="" class="button button-secondary"&gt;
Weiter
&lt;/a&gt;
&lt;i class="icon icon-clock"&gt;
&lt;!-- icon --&gt;
&lt;/i&gt;
&lt;h3 class="heading-1"&gt;
Versand mit DHL -
&lt;br /&gt;
innerhalb von 24 Stunden
&lt;/h3&gt;
&lt;p class="subheading"&gt;
Bestellungen bis 15 Uhr (Mo-Fr) und samstags bis 12 Uhr versenden wir
nach Zahlungseingang noch am selben Tag.
&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 full-height"&gt;
&lt;div class="carousel-tile-inner"&gt;
&lt;a href="" class="button button-secondary"&gt;
Weiter
&lt;/a&gt;
&lt;i class="icon icon-secure-payment"&gt;
&lt;!-- icon --&gt;
&lt;/i&gt;
&lt;h3 class="heading-1"&gt;
Immer die passende Zahlungsart -
&lt;br /&gt;
gebührenfrei und sicher
&lt;/h3&gt;
&lt;p class="subheading"&gt;
Du hast die Wahl: Zahle ganz bequem auf Rechnung, via PayPal Express,
Amazon Pay, Kreditkarte oder per Vorauskasse.
&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 full-height"&gt;
&lt;div class="carousel-tile-inner"&gt;
&lt;a href="" class="button button-secondary"&gt;
Weiter
&lt;/a&gt;
&lt;i class="icon icon-delivery"&gt;
&lt;!-- icon --&gt;
&lt;/i&gt;
&lt;h3 class="heading-1"&gt;
Versandkostenfrei
&lt;br /&gt;
ab 30 €
&lt;/h3&gt;
&lt;p class="subheading"&gt;
Der Rückversand geht natürlich aufs Haus.
&lt;/p&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 full-height"&gt;
&lt;div class="carousel-tile-inner"&gt;
&lt;a href="" class="button button-secondary"&gt;
Weiter
&lt;/a&gt;
&lt;i class="icon icon-lock"&gt;
&lt;!-- icon --&gt;
&lt;/i&gt;
&lt;h3 class="heading-1"&gt;
Ein Konto,
&lt;br /&gt;
viele Vorteile
&lt;/h3&gt;
&lt;p class="subheading"&gt;
Mit einem Kundenkonto bei bikester profitierst du gleich mehrfach:
&lt;/p&gt;
&lt;div class="grid-row"&gt;
&lt;div class="col-md-6 full-height"&gt;
&lt;ul&gt;
&lt;li&gt;Aktueller Bestellstatus&lt;/li&gt;
&lt;li&gt;Detaillierte Bestellhistorie&lt;/li&gt;
&lt;li&gt;Bequeme Adressverwaltung&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class="col-md-6 full-height"&gt;
&lt;ul&gt;
&lt;li&gt;Persönliche Wunschliste&lt;/li&gt;
&lt;li&gt;Newsletter-Verwaltung&lt;/li&gt;
&lt;li&gt;Sonder- und Rabattaktionen&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
<li class="styleguide-section" id="carousel-teasers">
<div class="styleguide-headline">
Teasers <span class="styleguide-desc">// Class:
<code>.carousel-teasers</code>
</span>
</div>
<div class="styleguide-content">
<div class="carousel-container carousel-teasers show-nav-bubbles hide-disabled-nav-arrows" id="carousel-shopbenefits">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height">
<div class="teaser">
<a class="teaser-content" href="${'#'}">
<!-- Link -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height">
<div class="teaser">
<a class="teaser-content" href="${'#'}">
<!-- Link -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height">
<div class="teaser">
<a class="teaser-content" href="${'#'}">
<!-- Link -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height">
<div class="teaser">
<a class="teaser-content" href="${'#'}">
<!-- Link -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</li>
<li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height">
<div class="teaser">
<a class="teaser-content" href="${'#'}">
<!-- Link -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</li>
</ul>
</div>
</div>
<div class="grid-row">
<code class="col-md-12">
<pre>
&lt;div class="carousel-container carousel-teasers show-nav-bubbles
hide-disabled-nav-arrows" id="carousel-shopbenefits"&gt;
&lt;div class="carousel-container-inner"&gt;
&lt;ul class="carousel"&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="teaser"&gt;
&lt;a class="teaser-content" href="${'#'}"&gt;
&lt;!-- Link --&gt;
&lt;/a&gt;
&lt;picture&gt;
&lt;source media="(min-width: 1240px)"
srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" /&gt;
&lt;source media="(min-width: 992px)"
srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" /&gt;
&lt;source media="(min-width: 768px)"
srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" /&gt;
&lt;source media="(min-width: 480px)"
srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" /&gt;
&lt;img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" /&gt;
&lt;/picture&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="teaser"&gt;
&lt;a class="teaser-content" href="${'#'}"&gt;
&lt;!-- Link --&gt;
&lt;/a&gt;
&lt;picture&gt;
&lt;source media="(min-width: 1240px)"
srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" /&gt;
&lt;source media="(min-width: 992px)"
srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" /&gt;
&lt;source media="(min-width: 768px)"
srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" /&gt;
&lt;source media="(min-width: 480px)"
srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" /&gt;
&lt;img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" /&gt;
&lt;/picture&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="teaser"&gt;
&lt;a class="teaser-content" href="${'#'}"&gt;
&lt;!-- Link --&gt;
&lt;/a&gt;
&lt;picture&gt;
&lt;source media="(min-width: 1240px)"
srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" /&gt;
&lt;source media="(min-width: 992px)"
srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" /&gt;
&lt;source media="(min-width: 768px)"
srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" /&gt;
&lt;source media="(min-width: 480px)"
srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" /&gt;
&lt;img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" /&gt;
&lt;/picture&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="teaser"&gt;
&lt;a class="teaser-content" href="${'#'}"&gt;
&lt;!-- Link --&gt;
&lt;/a&gt;
&lt;picture&gt;
&lt;source media="(min-width: 1240px)"
srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" /&gt;
&lt;source media="(min-width: 992px)"
srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" /&gt;
&lt;source media="(min-width: 768px)"
srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" /&gt;
&lt;source media="(min-width: 480px)"
srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" /&gt;
&lt;img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" /&gt;
&lt;/picture&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class="carousel-tile grid-tile col-xs-12 col-md-6 col-lg-4 full-height"&gt;
&lt;div class="teaser"&gt;
&lt;a class="teaser-content" href="${'#'}"&gt;
&lt;!-- Link --&gt;
&lt;/a&gt;
&lt;picture&gt;
&lt;source media="(min-width: 1240px)"
srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" /&gt;
&lt;source media="(min-width: 992px)"
srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" /&gt;
&lt;source media="(min-width: 768px)"
srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" /&gt;
&lt;source media="(min-width: 480px)"
srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" /&gt;
&lt;img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" /&gt;
&lt;/picture&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</code>
</div>
</div>
</li>
</ol>
</li>
<!--- BANNERS --->
<li class="styleguide-section" id="banners">
<div class="styleguide-headline">
Banners
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="banner-hint">
<div class="styleguide-headline">
Hints
</div>
<div class="styleguide-content">
<ul class="bullet-list">
<li>
To realize differing banner images on several viewport sizes, you can use the
<code>picture</code> tag. This is usefull to keep the loading time fast and implement
banner images with differing height-width-ratios. <a class="link-highlighted" href="https://www.w3schools.com/tags/tag_picture.asp">Here</a>
is a short explaination how the picture-tag works.
</li>
<li>
Please use our predefined <a href="#general-breakpoints" class="link-highlighted smooth-scrolling">breakpoints</a>
(480px, 768px, 992px, 1240px) to define image sources in the
<code>picture</code> tag.
</li>
<li>
Following the predefined <a href="#general-breakpoints" class="link-highlighted smooth-scrolling">breakpoints</a>
and the spacing on the left/right side of the page, these should be the widths of your
banner images:
<ul class="bullet-list">
<li class="text-bold">
X-Small screens (320 - 479px): <span class="text-normal">450px</span>
</li>
<li class="text-bold">
Small screens (480 - 767px): <span class="text-normal">728px</span>
</li>
<li class="text-bold">
Medium screens (768 - 991px): <span class="text-normal">952px</span>
</li>
<li class="text-bold">
Large screens (992 - 1239px): <span class="text-normal">1200px</span>
</li>
<li class="text-bold">
X-Large screens (1240px and higher): <span class="text-normal">1200px</span>
</li>
</ul>
</li>
<li>
The height is flexible. But please make sure that banner images always use the same
height on several viewport sizes, if you place them in a carousel.
</li>
<li>
For a better understanding you can find some <a class="link-highlighted smooth-scrolling"
href="#banner-examples">examples</a> below.
</li>
</ul>
</div>
</li>
<li class="styleguide-section" id="banner-examples">
<div class="styleguide-headline">
Examples
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Single Banner
</div>
<div class="styleguide-content">
<div class="banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Banner Carousel
</div>
<div class="styleguide-content">
<div class="carousel-container indented-nav-arrows auto-rotation show-nav-bubbles white-nav hide-disabled-nav-arrows">
<div class="carousel-container-inner">
<ul class="carousel">
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</li>
<li class="carousel-tile col-sm-12 full-height">
<div class="styleguide-carousel-tile banner">
<a href="${'#'}">
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/banner/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/banner/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/banner/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/banner/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/banner/xs-12.png')}" />
</picture>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
<!--- TEASERS --->
<li class="styleguide-section" id="teasers">
<div class="styleguide-headline">
Teasers
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="teaser-text">
<div class="styleguide-headline">
Default <span class="styleguide-desc">// Class:
<code>.teaser</code>
</span>
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<button class="button button-teaser">Lorem ipsum dolor</button>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-not-linked">
<div class="styleguide-headline">
Not linked
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser">
<div class="teaser-content">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<button class="button button-teaser">Lorem ipsum dolor</button>
</div>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-image-only">
<div class="styleguide-headline">
Image only
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser">
<a class="teaser-content" href="${'#'}">
<!-- empty -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-image-dark-25">
<div class="styleguide-headline">
Darker Image (25%) <span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.teaser-image-dark-25</code>
</span>
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser teaser-image-dark-25">
<a class="teaser-content" href="${'#'}">
<!-- empty -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-image-dark-33">
<div class="styleguide-headline">
Darker Image (33%) <span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.teaser-image-dark-33</code>
</span>
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser teaser-image-dark-33">
<a class="teaser-content" href="${'#'}">
<!-- empty -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-image-dark-50">
<div class="styleguide-headline">
Darker Image (50%) <span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.teaser-image-dark-50</code>
</span>
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser teaser-image-dark-50">
<a class="teaser-content" href="${'#'}">
<!-- empty -->
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-text-alignment">
<div class="styleguide-headline">
Text Alignment
</div>
<div class="styleguide-content">
<ul class="bullet-list">
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.h-align-left</code>
</span> > Horizontal alignment > Left
</li>
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.h-align-center</code>
</span> > Horizontal alignment > Center
</li>
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.h-align-right</code>
</span> > Horizontal alignment > Right
</li>
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.v-align-top</code>
</span> > Vertical alignment > Top
</li>
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.v-align-center</code>
</span> > Vertical alignment > Center
</li>
<li>
<span class="styleguide-desc">// Class:
<code>.teaser</code> +
<code>.v-align-bottom</code>
</span> > Vertical alignment > Bottom
</li>
</ul>
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-top h-align-left">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-top h-align-center">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-top h-align-right">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-center h-align-left">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-center h-align-center">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-center h-align-right">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-bottom h-align-left">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-bottom h-align-center">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser v-align-bottom h-align-right">
<a class="teaser-content" href="${'#'}">
<span class="teaser-heading">Lorem ipsum dolor</span>
<span class="teaser-subheading">Sit amet, consetetur sadipscing elitr, sed diam
nonumy</span>
<span class="button-teaser">Lorem ipsum dolor</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid-hint">
<div class="styleguide-headline">
Teaser Grid Hints
</div>
<div class="styleguide-content">
<ul class="bullet-list">
<li>
To create a teaser grid place the grid system
<code>.grid-row</code> inside a container with class
<code>.teaser-ctr</code>. This removes the horizontal and vertical spacing between the
grid cells. Otherwise the teaser image wouldn't scale proportionally, because the width
is a persentage value and the spacing is a fixed pixel value.
</li>
<li>
Additionally you need to add class
<code>.teaser</code> to the column container
<code>.col-*</code>.
</li>
<li>
To fake the spacing between the teasers, a border was added to
<code>.teaser</code> and placed over the teaser. It's important to know that this
border hides the teaser image on top, bottom, left and right side by 3 pixels (on
viewports to 767px ) or 5 pixels (from 768px and higher). At the end it looks like
there is a border of 6px (on viewports to 767px ) or 10px (from 768px and higher).
</li>
<li>
The mentioned border has the same color as the background and looks like a spacings
around the teasers. But, as noted, there is no real spacing and the images can scale
proportionally.
</li>
<li>
It is veeeeeery important that teaser images in the same row (on the same viewport
size) has the same height! Feel free to use differing heights, but please use the same
height in the same row.
</li>
<li>
To realize differing teaser images on several viewport sizes, you can use the
<code>picture</code> tag. This is usefull to keep the loading time fast and implement
teaser images with differing height-width-ratios. <a class="link-highlighted" href="https://www.w3schools.com/tags/tag_picture.asp">Here</a>
is a short explaination how the picture-tag works.
</li>
<li>
Please use our predefined <a href="#general-breakpoints" class="link-highlighted smooth-scrolling">breakpoints</a>
(480px, 768px, 992px, 1240px) to define image sources in the
<code>picture</code> tag.
</li>
<li>
Following the predefined <a href="#general-breakpoints" class="link-highlighted smooth-scrolling">breakpoints</a>,
the spacing on the left/right side of the page and the teaser grid spacing, these
should be the widths of your teaser images:
<ul class="bullet-list">
<li class="text-bold">
X-Small screens (320 - 479px):
<ul class="bullet-list text-normal">
<li>
100% > 12 cols > 456px
</li>
<li>
50% > 6 cols > 228px
</li>
</ul>
</li>
<li class="text-bold">
Small screens (480 - 767px):
<ul class="bullet-list text-normal">
<li>
100% > 12 cols > 744px
</li>
<li>
75% > 9 cols > 558px
</li>
<li>
66.6% > 8 cols > 496px
</li>
<li>
50% > 6 cols > 372px
</li>
<li>
33.3% > 4 cols > 248px
</li>
<li>
25% > 3 cols > 186px
</li>
</ul>
</li>
<li class="text-bold">
Medium screens (768 - 991px):
<ul class="bullet-list text-normal">
<li>
100% > 12 cols > 962px
</li>
<li>
75% > 9 cols > 722px
</li>
<li>
66.6% > 8 cols > 641px
</li>
<li>
50% > 6 cols > 481px
</li>
<li>
33.3% > 4 cols > 321px
</li>
<li>
25% > 3 cols > 241px
</li>
</ul>
</li>
<li class="text-bold">
Large screens (992 - 1239px):
<ul class="bullet-list text-normal">
<li>
100% > 12 cols > 1210px
</li>
<li>
75% > 9 cols > 908px
</li>
<li>
66.6% > 8 cols > 807px
</li>
<li>
50% > 6 cols > 605px
</li>
<li>
33.3% > 4 cols > 403px
</li>
<li>
25% > 3 cols > 303px
</li>
</ul>
</li>
<li class="text-bold">
X-Large screens (1240px and higher):
<ul class="bullet-list text-normal">
<li>
100% > 12 cols > 1210px
</li>
<li>
75% > 9 cols > 908px
</li>
<li>
66.6% > 8 cols > 807px
</li>
<li>
50% > 6 cols > 605px
</li>
<li>
33.3% > 4 cols > 403px
</li>
<li>
25% > 3 cols > 303px
</li>
</ul>
</li>
</ul>
</li>
<li>
The height is flexible. But again, please make sure that teaser images in the same row
always have the same height on several viewport sizes.
</li>
<li>
For a better understanding you can find some <a class="link-highlighted smooth-scrolling"
href="#teaser-grid-examples">examples</a> below.
</li>
</ul>
</div>
</li>
<li class="styleguide-section" id="teaser-grid-examples">
<div class="styleguide-headline">
Teaser Grid Examples
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
100
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-12.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-12.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
50-50
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-6.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-6.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-6.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-6.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
25-25-25-25
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-3">
<span>3</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-4">
<span>4</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
25-25-50
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-3">
<span>3</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-6.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-6.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
33-66
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-4.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-8 col-xl-8 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-8.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-8.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-8.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
25-75
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-3.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-4.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 col-xl-9 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-9.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-9.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-9.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-8.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
Multiple rows
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-4.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-6 col-md-8 col-lg-6 col-xl-6 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-6.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-6.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-8.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-3 col-xl-3 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-3">
<span>3</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-4.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-4.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4 col-xl-4 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-4">
<span>4</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-4.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-8.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-8 col-xl-8 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-5">
<span>5</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-8.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-8.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-4.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
Nested rows
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-8.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-8.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-8.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-8.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-6.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-3">
<span>3</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4-2.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4-2.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="teaser-grid">
<div class="styleguide-headline">
Nested rows - even more complex
</div>
<div class="styleguide-content">
<div class="teaser-ctr">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 col-xl-4">
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-1">
<span>1</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4-3.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4-3.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-2">
<span>2</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-12.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8">
<div class="grid-row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-6 col-xl-6 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-3">
<span>3</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4-2.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4-2.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-3.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-4">
<span>4</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-3.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-5">
<span>5</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-4.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-4.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-3.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-6.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-12 col-xl-12 teaser">
<a href="${'#'}" class="teaser-content styleguide-teaser-link styleguide-teaser-link-6">
<span>6</span>
</a>
<picture>
<source media="(min-width: 1240px)" srcset="${URLUtils.staticURL('/images/test/teaser/xl-8-2.png')}" />
<source media="(min-width: 992px)" srcset="${URLUtils.staticURL('/images/test/teaser/lg-8-2.png')}" />
<source media="(min-width: 768px)" srcset="${URLUtils.staticURL('/images/test/teaser/md-3.png')}" />
<source media="(min-width: 480px)" srcset="${URLUtils.staticURL('/images/test/teaser/sm-12.png')}" />
<img alt="" srcset="${URLUtils.staticURL('/images/test/teaser/xs-12.png')}" />
</picture>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ol>
</li>
</ol>
</li>
<!--- Content Sections --->
<li class="styleguide-section" id="content-sections">
<div class="styleguide-headline">
Content Sections
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="content-section-default">
<div class="styleguide-headline">
Default Content Section <span class="styleguide-desc">// Class:
<code>.content-section</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section">
<h2 class="content-section-heading">
Default
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="content-section-default">
<div class="styleguide-headline">
Content Section with small Headline <span class="styleguide-desc">// Class:
<code>.content-section-heading-small</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section">
<h2 class="content-section-heading content-section-heading-small">
Small Headline
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="content-section-grey">
<div class="styleguide-headline">
Grey Content Section <span class="styleguide-desc">// Class:
<code>.content-section</code> +
<code>.content-section-grey</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section content-section-grey">
<h2 class="content-section-heading">
Grey
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="content-section-textured-light">
<div class="styleguide-headline">
Light textured Content Section <span class="styleguide-desc">// Class:
<code>.content-section</code> +
<code>.content-section-texture-light</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section content-section-texture-light">
<h2 class="content-section-heading">
Light textured
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="content-section-textured-medium">
<div class="styleguide-headline">
Medium textured Content Section <span class="styleguide-desc">// Class:
<code>.content-section</code> +
<code>.content-section-texture-medium</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section content-section-texture-medium">
<h2 class="content-section-heading">
Medium textured
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="content-section-textured-dark">
<div class="styleguide-headline">
Dark textured Content Section <span class="styleguide-desc">// Class:
<code>.content-section</code> +
<code>.content-section-texture-dark</code>
</span>
</div>
<div class="styleguide-content">
<div class="content-section content-section-texture-dark">
<h2 class="content-section-heading">
Dark textured
</h2>
<h3 class="content-section-subheading">
Subheading
</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
</div>
</li>
</ol>
</li>
<!--- EXTENDED CONTENT --->
<li class="styleguide-section" id="extended-content">
<div class="styleguide-headline">
Extended content
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="exdent-hd">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) <span class="styleguide-desc">// Class:
<code>.extended-hd</code> // Mixin:
<code>.extended-hd()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the normal page
width.
</p>
<div class="styleguide-content">
<div class="extended-hd styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="exdent-hd-2">
<div class="styleguide-headline">
Extended content to Full-HD width (1920px) - no indent <span class="styleguide-desc">// Class:
<code>.extended-hd-no-indent</code> // Mixin:
<code>.extended-hd-no-indent()</code>
</span>
</div>
<p>
Extends the container to a width of 1920 pixels. The inner content will use the full width of
the container.
</p>
<div class="styleguide-content">
<div class="extended-hd-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="exdent-max">
<div class="styleguide-headline">
Extended content to the max <span class="styleguide-desc">// Class:
<code>.extended-max</code> // Mixin:
<code>.extended-max()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content will use the
normal page width.
</p>
<div class="styleguide-content">
<div class="extended-max styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="exdent-max-2">
<div class="styleguide-headline">
Extended content to the max - no indent <span class="styleguide-desc">// Class:
<code>.extended-max-no-indent</code> // Mixin:
<code>.extended-max-no-indent()</code>
</span>
</div>
<p>
Extends the container 5000 pixels on the left and right side. The inner content will use the
full width of the container.
</p>
<div class="styleguide-content">
<div class="extended-max-no-indent styleguide-extended-ctr">
<div class="styleguide-extended-ctr-inner">
&nbsp;
</div>
</div>
</div>
</li>
</ol>
</li>
<!--- PRODUCT INCLUDE --->
<li class="styleguide-section" id="productinclude">
<div class="styleguide-headline">
Product include
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="productinclude-single">
<div class="styleguide-headline">
Single Producttile Include
</div>
<div class="styleguide-content">
<div class="text-bold">Controller</div>
<ul class="bullet-list">
<li>Content-Product</li>
</ul>
<div class="text-bold">Include Parameters</div>
<ul class="bullet-list">
<li>pid : the product id render the tile for</li>
<li>show_gender : check, whether to render the gender (default is true)</li>
<li>show_pricing : check, whether to render the price (default is true)</li>
<li>show_name : check, whether to render the productname (default is true)</li>
<li>show_brand : check, whether to render the brand-logo and -name (default is true)</li>
<li>show_badge : check, whether to render the badge (default is true)</li>
<li>show_promotion : check, whether to render the promotion (default is true)</li>
<li>show_button : check, whether to render a details-button (default is false)</li>
</ul>
<div class="text-bold">Examples of usage in an asset or slot (type HTML)</div>
<ul class="bullet-list">
<li>$include('Content-Product', pid, producMastertId)$</li>
</ul>
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 full-height">
<isinclude url="${URLUtils.url('Content-Product', 'pid', '571718')}">
</div>
</div>
<ul class="bullet-list">
<li>$include('Content-Product', pids, producMastertId, show_gender, false, show_pricing,
false, show_name, false, show_button, true, show_brand, false, show_badge, false,
show_promotion, false)$</li>
</ul>
<div class="grid-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 full-height">
<isinclude url="${URLUtils.url('Content-Product', 'pid', '741269', 'show_gender', false, 'show_pricing', false, 'show_name', false,
'show_button', true, 'show_hover', false, 'show_brand', false, 'show_badge', false, 'show_promotion', false)}">
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="productinclude-carousel">
<div class="styleguide-headline">
Producttile Carousel Include
</div>
<div class="styleguide-content">
<div class="text-bold">Controller</div>
<ul class="bullet-list">
<li>Content-Products</li>
</ul>
<div class="text-bold">Include Parameters</div>
<ul class="bullet-list">
<li>pids : defines the listed products</li>
<li>show_gender : check, whether to render the gender (default is true)</li>
<li>show_pricing : check, whether to render the price (default is true)</li>
<li>show_name : check, whether to render the productname (default is true)</li>
<li>show_brand : check, whether to render the brand-logo and -name (default is true)</li>
<li>show_badge : check, whether to render the badge (default is true)</li>
<li>show_promotion : check, whether to render the promotion (default is true)</li>
<li>show_button : check, whether to render a details-button (default is false)</li>
</ul>
<div class="text-bold">Examples of usage in an asset or slot (type HTML)</div>
<ul class="bullet-list">
<li>$include('Content-Products', pids, producMastertId1;productMasterId2;etc)$</li>
</ul>
<isinclude url="${URLUtils.url('Content-Products', 'pids',
'701642873228;701642873228;701642873228;701642873228;701642873228;701642873228;701642873228')}">
<ul class="bullet-list">
<li>$include('Content-Products', pids, producMastertId1;productMasterId2;etc,
show_gender, false, show_pricing, false, show_name, false, show_button, true,
show_brand, false, show_badge, false, show_promotion, false)$</li>
</ul>
<isinclude url="${URLUtils.url('Content-Products', 'pids',
'701642873228;701642873228;701642873228;701642873228;701642873228;701642873228;701642873228', 'show_gender',
false, 'show_pricing', false, 'show_name', false, 'show_button', true, 'show_hover', false, 'show_brand', false,
'show_badge', false, 'show_promotion', false)}">
</div>
</li>
</ol>
</li>
<!--- MISC --->
<li class="styleguide-section" id="misc">
<div class="styleguide-headline">
Miscellaneous layout elements
</div>
<ol class="styleguide-list">
<li class="styleguide-section" id="misc-price">
<div class="styleguide-headline">
Prices
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Default Price <span class="styleguide-desc">// Class:
<code>.product-price</code>
</span>
</div>
<div class="styleguide-content">
<div class="product-price">
<div>
<span class="price-sales">99,99 &euro;</span>
</div>
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Promo Price <span class="styleguide-desc">// Class:
<code>.has-promo-price</code>
</span>
</div>
<div class="styleguide-content">
<div class="product-price">
<div class="has-promo-price">
<span class="price-sales">189,99 &euro;</span>
<span class="price-standard">199,99 &euro;</span>
</div>
</div>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="misc-swatches">
<div class="styleguide-headline">
Swatches
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Default Swatches <span class="styleguide-desc">// Class:
<code>.swatches</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches">
<li class="swatch selected">
<a href="${'#'}">S</a>
</li>
<li class="swatch">
<a href="${'#'}">M</a>
</li>
<li class="swatch">
<a href="${'#'}">L</a>
</li>
<li class="swatch">
<a href="${'#'}">XL</a>
</li>
<li class="swatch">
<a href="${'#'}">XXL</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Color Swatches <span class="styleguide-desc">// Class:
<code>.color-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches">
<li class="color-swatch swatch-blue selected">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Default swatches containing images <span class="styleguide-desc">// Class:
<code>.image-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches">
<li class="swatch image-swatch selected">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Large Swatches <span class="styleguide-desc">// Class:
<code>.swatches</code>
<code>.swatches-lg</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-lg">
<li class="swatch selected">
<a href="${'#'}">S</a>
</li>
<li class="swatch">
<a href="${'#'}">M</a>
</li>
<li class="swatch">
<a href="${'#'}">L</a>
</li>
<li class="swatch">
<a href="${'#'}">XL</a>
</li>
<li class="swatch">
<a href="${'#'}">XXL</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Large Color Swatches <span class="styleguide-desc">// Class:
<code>.color-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-lg">
<li class="color-swatch swatch-blue selected">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Large Swatches containing Images <span class="styleguide-desc">// Class:
<code>.image-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-lg">
<li class="swatch image-swatch selected">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
X-Large Swatches <span class="styleguide-desc">// Class:
<code>.swatches</code>
<code>.swatches-xl</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-xl">
<li class="swatch selected">
<a href="${'#'}">S</a>
</li>
<li class="swatch">
<a href="${'#'}">M</a>
</li>
<li class="swatch">
<a href="${'#'}">L</a>
</li>
<li class="swatch">
<a href="${'#'}">XL</a>
</li>
<li class="swatch">
<a href="${'#'}">XXL</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
X-Large Color Swatches <span class="styleguide-desc">// Class:
<code>.color-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-xl">
<li class="color-swatch swatch-blue selected">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
<li class="color-swatch swatch-blue">
<a href="${'#'}">
<!-- Swatch -->
</a>
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
X-Large Swatches containing Images <span class="styleguide-desc">// Class:
<code>.image-swatch</code>
</span>
</div>
<div class="styleguide-content">
<ul class="swatches swatches-xl">
<li class="swatch image-swatch selected">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
<li class="swatch image-swatch">
<a href="${'#'}">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="">
</a>
</li>
</ul>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="misc-badges">
<div class="styleguide-headline">
Badges
</div>
<div class="styleguide-content">
<div class="product-badges">
<div class="product-badge product-badge-new">
New
</div>
<div class="product-badge product-badge-sale">
Sale %
</div>
<div class="product-badge product-badge-preview">
Preview
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="misc-flags">
<div class="styleguide-headline">
Flags
</div>
<div class="styleguide-content">
<div class="product-badges">
<p>
<i class="flag flag-de">
<!-- flag -->
</i>
</p>
<p>
<i class="flag flag-at">
<!-- flag -->
</i>
</p>
</div>
</div>
</li>
<li class="styleguide-section" id="misc-messages">
<div class="styleguide-headline">
Messages
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Error Message <span class="styleguide-desc">// Class:
<code>.error-message</code>
<code>.error-form</code>
</span>
</div>
<div class="styleguide-content">
<div class="error-message">
Error Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Warning Message <span class="styleguide-desc">// Class:
<code>.warning-message</code>
<code>.warning-form</code>
</span>
</div>
<div class="styleguide-content">
<div class="warning-message">
Warning Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Success Message <span class="styleguide-desc">// Class:
<code>.success-message</code>
<code>.success-form</code>
</span>
</div>
<div class="styleguide-content">
<div class="success-message">
Success Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Info Message <span class="styleguide-desc">// Class:
<code>.info-message</code>
<code>.info-form</code>
</span>
</div>
<div class="styleguide-content">
<div class="info-message">
Info Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Simple Error Message <span class="styleguide-desc">// Class:
<code>.error-message-simple</code>
<code>.error-form-simple</code>
</span>
</div>
<div class="styleguide-content">
<div class="error-message-simple">
Simple Error Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Simple Warning Message <span class="styleguide-desc">// Class:
<code>.warning-message-simple</code>
<code>.warning-form-simple</code>
</span>
</div>
<div class="styleguide-content">
<div class="warning-message-simple">
Simple Warning Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Simple Success Message <span class="styleguide-desc">// Class:
<code>.success-message-simple</code>
<code>.success-form-simple</code>
</span>
</div>
<div class="styleguide-content">
<div class="success-message-simple">
Simple Success Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Simple Info Message <span class="styleguide-desc">// Class:
<code>.info-message-simple</code>
<code>.info-form-simple</code>
</span>
</div>
<div class="styleguide-content">
<div class="info-message-simple">
Simple Info Message
</div>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Simple Info Message (Clean) <span class="styleguide-desc">// Class:
<code>.info-message-simple-clean</code>
<code>.info-form-simple-clean</code>
</span>
</div>
<div class="styleguide-content">
<div class="info-message-simple-clean">
Simple Info Message
</div>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="misc-tabs">
<div class="styleguide-headline">
Tabs
</div>
<div class="styleguide-content">
<div class="tabber">
<ul class="tabs">
<li class="tab active">
<span class="tab-inner">
<span class="tab-text">Tab 1</span>
</span>
</li>
<li class="tab">
<span class="tab-inner">
<span class="tab-text">Tab 2</span>
</span>
</li>
<li class="tab">
<span class="tab-inner">
<span class="tab-text">Tab 3</span>
</span>
</li>
<li class="tab">
<span class="tab-inner">
<span class="tab-text">Tab 4</span>
</span>
</li>
<li class="tab">
<span class="tab-inner">
<span class="tab-text">Tab 5</span>
</span>
</li>
</ul>
<div class="tabber-content">
<div class="tab-content active">
Content 01: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
<div class="tab-content">
Content 02: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
<div class="tab-content">
Content 03: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
<div class="tab-content">
Content 04: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
<div class="tab-content">
Content 05: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="misc-accordion">
<div class="styleguide-headline">
Accordion <span class="styleguide-desc">// Class:
<code>.accordion-default</code>
</span>
</div>
<div class="styleguide-content">
<div class="accordion accordion-default">
<div class="accordion-section">
<div class="accordion-toggle">
Expand Section 01
</div>
<div class="toggle-content">
Content 01: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="accordion-section">
<div class="accordion-toggle">
Expand Section 02
</div>
<div class="toggle-content">
Content 02: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="accordion-section">
<div class="accordion-toggle">
Expand Section 03
</div>
<div class="toggle-content">
Content 03: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="accordion-section">
<div class="accordion-toggle">
Expand Section 04
</div>
<div class="toggle-content">
Content 04: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="accordion-section">
<div class="accordion-toggle">
Expand Section 05
</div>
<div class="toggle-content">
Content 05: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="misc-toggle">
<div class="styleguide-headline">
Toggle <span class="styleguide-desc">// Class:
<code>.toggle-ctr-default</code>
</span>
</div>
<div class="styleguide-content">
<div class="toggle-ctr toggle-ctr-default">
<div class="toggle-section">
<div class="toggle">
Expand Section 01
</div>
<div class="toggle-content">
Content 01: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="toggle-section">
<div class="toggle">
Expand Section 02
</div>
<div class="toggle-content">
Content 02: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="toggle-section">
<div class="toggle">
Expand Section 03
</div>
<div class="toggle-content">
Content 03: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="toggle-section">
<div class="toggle">
Expand Section 04
</div>
<div class="toggle-content">
Content 04: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
<div class="toggle-section">
<div class="toggle">
Expand Section 05
</div>
<div class="toggle-content">
Content 05: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
</div>
</div>
</div>
</div>
</li>
<li class="styleguide-section" id="misc-lists">
<div class="styleguide-headline">
Lists
</div>
<ol class="styleguide-list">
<li class="styleguide-section">
<div class="styleguide-headline">
Bullet List <span class="styleguide-desc">// Class:
<code>.bullet-list</code>
</span>
</div>
<div class="styleguide-content">
<ul class="bullet-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Checker List <span class="styleguide-desc">// Class:
<code>.checker-list</code>
</span>
</div>
<div class="styleguide-content">
<ul class="checker-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Arrow List <span class="styleguide-desc">// Class:
<code>.arrow-list</code>
</span>
</div>
<div class="styleguide-content">
<ul class="arrow-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Separated List <span class="styleguide-desc">// Class:
<code>.separated-list</code>
</span>
</div>
<div class="styleguide-content">
<ul class="separated-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<p class="text-bold">
This class can be combined with other list-classes to create e.g. a separated arrow
list
</p>
<ul class="bullet-list separated-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="checker-list separated-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="arrow-list separated-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Green List <span class="styleguide-desc">// Class:
<code>.green-list</code>
</span>
</div>
<div class="styleguide-content">
<p class="text-bold">
This class can be combined with other list-classes to create e.g. a green checker
list
</p>
<ul class="bullet-list green-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="checker-list green-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="arrow-list green-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
<li class="styleguide-section">
<div class="styleguide-headline">
Red List <span class="styleguide-desc">// Class:
<code>.red-list</code>
</span>
</div>
<div class="styleguide-content">
<p class="text-bold">
This class can be combined with other list-classes to create e.g. a red arrow list
</p>
<ul class="bullet-list red-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="checker-list red-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
<ul class="arrow-list red-list">
<li>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam voluptua.
</li>
<li>
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</li>
<li>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</li>
</ul>
</div>
</li>
</ol>
</li>
<li class="styleguide-section" id="misc-loading-indicator">
<div class="styleguide-headline">
Loading indicator
</div>
<div class="styleguide-content">
<button class="button test-loadindicator">Test loading indicator</button>
</div>
</li>
<li class="styleguide-section" id="misc-smooth-scrolling">
<div class="styleguide-headline">
Smooth scrolling to an content anchor <span class="styleguide-desc">// Class:
<code>.smooth-scrolling</code>
</span>
</div>
<div class="styleguide-content">
<a href="#wrapper" class="smooth-scrolling">Click me!</a>
</div>
</li>
<li class="styleguide-section" id="misc-image-rounded">
<div class="styleguide-headline">
Images with rounded borders <span class="styleguide-desc">// Class:
<code>.image-rounded</code>
</span>
</div>
<div class="styleguide-content">
<img src="${URLUtils.staticURL('/images/test/temp-swatch.jpg')}" alt="" class="image-rounded"
style="width: 200px; height: 200px;" />
</div>
</li>
</ol>
</li>
</ol>
</div>
</isdecorate>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment