GEO - Styleguide
-
Index
- General information
-
Breakpoints, Media Queries, Show-Hide
- Breakpoints
- Media queries
- Exclude elements from view (display: none;)
- Hide elements from view (just visually hidden)
- Force elements to be shown as block-element (display: block;)
- Force elements to be shown as inline-block-element (display: inline-block;)
- Force elements to be shown as inline-element (display: inline;)
- Force elements to be shown as flex-element (display: flex;)
- Force elements to be shown as inline-flex-element (display: inline-flex;)
- Grid
- Page Sections
- Colors
- Icons
- Typography
- Forms
- Linking
- Pictures
- Modals
- Carousels
- Accordions & Toggles
- Tabs
- Category Tile Includes
- Category Carousel Includes
- Product Carousel Includes
- Product Tile Includes
- Subscription Tile Includes
- Current Issue Includes
- Current Issue Short Includes
- Other Issues Includes
- Single Issue Includes
- PrePdp Cover Includes
-
General information
- This project is based on the SFCC "Storefront Reference Architecture" (SFRA).
- In this project we use SASS to style elements. For further information please click here.
-
Name HTML classes by BEM methodology (
.block__element--modifier
,.block__subElement--modifier
). For further information please click here. - Please try to avoid the usage of FLOATING <DIV>s and use FLEX instead. For further information please click here.
- We use the 'Border-Box' box model (box-sizing: border-box;) for all elements on this page. This means, that an element's speciefied width or height aren't affected by paddings and borders. For further information please click here.
- Try to use the grid system wherever it make sense to control the width of page components.
- Keep the CSS/SASS clean, simple and modular. Please try to make components reusable in varying context.
- We should strongly try to avoid duplicated styles. Please always verify if the element/component 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. If you are not sure please feel always free to ask.
-
Please don't use classes which are used for styling to handle you JavaScript. Always use separate JS handlers named with a
js-
prefix. - We use relative values (like em or rem) to define most of the elements.
- You can find a list of content examples here. Use them for custom content (Content assets and slots).
-
Breakpoints, Media Queries, Show-Hide
-
Breakpoints
-
Small micro screens (Max): 359 pixels
// Variable:
$bp-small-micro
-
Small mini screens (Min): 375 pixels
// Variable:
$bp-small-mini
-
Small interim screens (Min): 480 pixels
// Variable:
$bp-small-interim
-
Small screens (Max): 767 pixels
// Variable:
$bp-small-max
-
Medium screens (Min): 768 pixels
// Variable:
$bp-medium
-
Medium screens (Max): 991 pixels
// Variable:
$bp-medium-max
-
Large screens (Min): 992 pixels
// Variable:
$bp-large
-
Large screens (Max): 1199 pixels
// Variable:
$bp-large-max
-
X-Large screens (Min): 1200 pixels
// Variable:
$bp-xlarge
-
X-Large screens (Max): 1439 pixels
// Variable:
$bp-xlarge-max
-
XX-Large screens (Min): 1440 pixels
// Variable:
$bp-xxlarge
-
Minimum page width: 320 pixels
// Variable:
$page-min-width
-
Maximum page width: 1920 pixels
// Variable:
$page-max-width
-
Maximum grid width: 1440 pixels
// Variable:
$grid-max-width
// equals$bp-xxlarge
-
Maximum inner grid width (default width of page sections): 1280 pixels
// Variable:
grid-max-width-inner
-
Small micro screens (Max): 359 pixels
// Variable:
-
Media queries
-
Viewport 0+ // @media (min-width: 0)
// Mixin
at-small
-
Viewport 375+ // @media (min-width: 375px)
// Mixin
at-small-mini
-
Viewport 480+ // @media (min-width: 480px)
// Mixin
at-small-interim
-
Viewport 768+ // @media (min-width: 768px)
// Mixin
at-medium
-
Viewport 992+ // @media (min-width: 992px)
// Mixin
at-large
-
Viewport 1200+ // @media (min-width: 1200px)
// Mixin
at-xlarge
-
Viewport 1440+ // @media (min-width: 1440px)
// Mixin
at-xxlarge
-
Viewport 0 - 359 // @media (max-width: 359px)
// Mixin
at-small-mini-only
-
Viewport 0 - 767 // @media (max-width: 767px)
// Mixin
at-small-only
-
Viewport 0 - 991 // @media (max-width: 991px)
// Mixin
at-small-medium-only
-
Viewport 768 - 991 // @media (min-width: 768px) and (max-width: 991px)
// Mixin
at-medium-only
-
Viewport 0 - 991 // @media (max-width: 991px)
// Mixin
up-to-large-only
-
Viewport 768 - 1199 // @media (min-width: 768px) and (max-width: 1199px)
// Mixin
at-medium-large-only
-
Viewport 992 - 1199 // @media (min-width: 992px) and (max-width: 1199px)
// Mixin
at-large-only
-
Viewport Landscape // @media (orientation: $orientation-landscape)
// Mixin
at-landscape
-
Viewport Portrait // @media (orientation: $orientation-portrait)
// Mixin
at-portrait
-
Viewport 0+ // @media (min-width: 0)
// Mixin
-
Exclude elements from view (display: none;)
-
Exclude in general
// Class
.u-hide
// Mixinhide
-
Exclude from small viewports (0 - 767)
// Class
.u-hideSmall
// Mixinhide-small
-
Exclude from medium viewports (768 - 991)
// Class
.u-hideMedium
// Mixinhide-medium
-
Exclude from large viewports (992 - 1199)
// Class
.u-hideLarge
// Mixinhide-large
-
Exclude from x-large viewports (1200+)
// Class
.u-hideXlarge
// Mixinhide-xlarge
-
Exclude in general
// Class
-
Hide elements from view (just visually hidden)
-
Hide in general
// Class
.u-visHidden
// Mixinvis-hidden
-
Hide on small viewports (0 - 767)
// Class
.u-visHiddenSmall
// Mixinvis-hidden-small
-
Hide on medium viewports (768 - 991)
// Class
.u-visHiddenMedium
// Mixinvis-hidden-medium
-
Hide on large viewports (992 - 1199)
// Class
.u-visHiddenLarge
// Mixinvis-hidden-large
-
Hide on x-large viewports (1200+)
// Class
.u-visHiddenXlarge
// Mixinvis-hidden-xlarge
-
Hide in general
// Class
-
Force elements to be shown as block-element (display: block;)
Can e.g. be used to show container (as block-element), which are initially hidden.
-
Show in general
// Class
.u-show
// Mixinshow
-
Show on small viewports (0 - 767)
// Class
.u-showSmall
// Mixinshow-small
-
Show on medium viewports (768 - 991)
// Class
.u-showMedium
// Mixinshow-medium
-
Show on large viewports (992 - 1199)
// Class
.u-showLarge
// Mixinshow-large
-
Show on x-large viewports (1200+)
// Class
.u-showXlarge
// Mixinshow-xlarge
-
Show in general
// Class
-
Force elements to be shown as inline-block-element (display: inline-block;)
Can e.g. be used to show container (as inline-block-element), which are initially hidden.
-
Show in general
// Class
.u-showInlineBlock
// Mixinshow-inline-block
-
Show on small viewports (0 - 767)
// Class
.u-showInlineBlockSmall
// Mixinshow-inline-block-small
-
Show on medium viewports (768 - 991)
// Class
.u-showInlineBlockMedium
// Mixinshow-inline-block-medium
-
Show on large viewports (992 - 1199)
// Class
.u-showInlineBlockLarge
// Mixinshow-inline-block-large
-
Show on x-large viewports (1200+)
// Class
.u-showInlineBlockXlarge
// Mixinshow-inline-block-xlarge
-
Show in general
// Class
-
Force elements to be shown as inline-element (display: inline;)
Can e.g. be used to show container (as inline-element), which are initially hidden.
-
Show in general
// Class
.u-showInline
// Mixinshow-inline
-
Show on small viewports (0 - 767)
// Class
.u-showInlineSmall
// Mixinshow-inline-small
-
Show on medium viewports (768 - 991)
// Class
.u-showInlineMedium
// Mixinshow-inline-medium
-
Show on large viewports (992 - 1199)
// Class
.u-showInlineLarge
// Mixinshow-inline-large
-
Show on x-large viewports (1200+)
// Class
.u-showInlineXlarge
// Mixinshow-inline-xlarge
-
Show in general
// Class
-
Force elements to be shown as flex-element (display: flex;)
Can e.g. be used to show container (as flex-element), which are initially hidden.
-
Show in general
// Class
.u-showFlex
// Mixinshow-flex
-
Show on small viewports (0 - 767)
// Class
.u-showFlexSmall
// Mixinshow-flex-small
-
Show on medium viewports (768 - 991)
// Class
.u-showFlexMedium
// Mixinshow-flex-medium
-
Show on large viewports (992 - 1199)
// Class
.u-showFlexLarge
// Mixinshow-flex-large
-
Show on x-large viewports (1200+)
// Class
.u-showFlexXlarge
// Mixinshow-flex-xlarge
-
Show in general
// Class
-
Force elements to be shown as inline-flex-element (display: inline-flex;)
Can e.g. be used to show container (as inline-flex-element), which are initially hidden.
-
Show in general
// Class
.u-showInlineFlex
// Mixinshow-inline-flex
-
Show on small viewports (0 - 767)
// Class
.u-showInlineFlexSmall
// Mixinshow-inline-flex-small
-
Show on medium viewports (768 - 991)
// Class
.u-showInlineFlexMedium
// Mixinshow-inline-flex-medium
-
Show on large viewports (992 - 1199)
// Class
.u-showInlineFlexLarge
// Mixinshow-inline-flex-large
-
Show on x-large viewports (1200+)
// Class
.u-showInlineFlexXlarge
// Mixinshow-inline-flex-xlarge
-
Show in general
// Class
-
-
Grid
-
Description
- Grid systems are used for creating page layouts through a series of rows and columns that house your content.
- We use a responsive, mobile first fluid grid system (based on Susy 3) that appropriately scales up to 12 columns as the device or viewport size increases.
-
Please be aware that not every viewport size uses the same count of available columns:
- Small viewports (0 - 767): 6 columns
- Medium viewports (768 - 991): 8 columns
- Large viewports (992+): 12 columns
-
There are NO global classes to define rows and columns, but SUSY mixins instead. Use them on your semantic classes to define a row or column wherever you need it:
-
Use the mixin
row()
to define an element as a grid row, which contains horizontal groups of columns. -
Use the mixin
span(*)
to define an element as a grid column. Replace the*
by the count of column(s) you want to use as width. Overwrite this definition in media queries if neccessary. - Content should be placed within columns, and only columns may be immediate children of rows
- For a detailed documentation and additional options please click here.
-
Use the mixin
- Again, do not use any kind of global classes to define rows and columns in template files!
- If more than the available columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
- For SUSY spread option please have a look here.
-
To add an offset to your column you can additionally use the following mixins:
-
Use the mixin
push(*)
to add an offset to the left. -
Use the mixin
pull(*)
to add an offset to the right. -
Replace the
*
by the count of column(s) you want to use as offset.
-
Use the mixin
-
The spacing between horizontal columns is predefined by 16 pixels (8 pixels on each side). The following mixins may be useful to create columns without these gutters:
-
Use the mixin
span-no-gutters(*)
to define a column without any gutters. -
Use the mixin
span-no-gutter-left(*)
to define a column without a gutter on the left. -
Use the mixin
span-no-gutter-right(*)
to define a column without a gutter on the right. -
Replace the
*
by the count of column(s) you want to use as width.
-
Use the mixin
- Confused now? May the following examples enlighten you...
-
Example: Stacked-to-horizontal
Using a single set of columns, you can create a basic grid system that starts out stacked on small devices before becoming horizontal on large devices.
123456789101112<!-- MarkUp --> <div class="susyExample__row--1-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> <div class="susyExample__col--4"> 4 </div> <div class="susyExample__col--5"> 5 </div> <div class="susyExample__col--6"> 6 </div> <div class="susyExample__col--7"> 7 </div> <div class="susyExample__col--8"> 8 </div> <div class="susyExample__col--9"> 9 </div> <div class="susyExample__col--10"> 10 </div> <div class="susyExample__col--11"> 11 </div> <div class="susyExample__col--12"> 12 </div> </div> <!-- Sass --> .susyExample { &__ow--1-1 { @include row(); } &__col { &--1, &--2, &--3, &--4, &--5, &--6, &--7, &--8, &--9, &--10, &--11, &--12 { @include at-small { @include span(6); } @include at-large { @include span(1); } } } }
-
Example: Small, medium, large
Build on the previous examples we create even more dynamic and powerful layouts with an additional media query.
123456<!-- MarkUp --> <div class="susyExample__row--2-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> <div class="susyExample__col--4"> 4 </div> <div class="susyExample__col--5"> 5 </div> <div class="susyExample__col--6"> 6 </div> </div> <!-- Sass --> .susyExample { &__row--2-1 { @include row(); } &__col { &--1, &--3, &--5 { @include at-small { @include span(4); } @include at-medium { @include span(5); } @include at-large { @include span(3); } } &--2, &--4, &--6 { @include at-small { @include span(2); } @include at-medium { @include span(3); } @include at-large { @include span(1); } } } }
-
Example: Column wrapping
If more than the available columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
123<!-- MarkUp --> <div class="susyExample__row--3-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> </div> <!-- Sass --> .susyExample { &__row--3-1 { @include row(); } &__col { &--1 { @include at-small { @include span(4); } @include at-medium { @include span(6); } @include at-large { @include span(8); } } &--2 { @include at-small { @include span(6); } @include at-medium { @include span(3); } @include at-large { @include span(5); } } &--3 { @include at-small { @include span(2); } @include at-medium { @include span(4); } @include at-large { @include span(6); } } } }
-
Example: Offsetting columns
Add an offset to the left or right side of a column // Mixin
push(*)
orpull(*)
1234<!-- MarkUp --> <div class="susyExample__row--4-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> <div class="susyExample__col--4"> 4 </div> </div> <!-- Sass --> .susyExample { &__row--4-1 { @include row(); } &__col { &--1 { @include at-small { @include span(4); @include push(2); } @include at-medium { @include span(6); @include push(2); } @include at-large { @include span(8); @include push(4); } } &--2 { @include at-small { @include span(2); @include push(2); @include pull(2); } @include at-medium { @include span(4); @include push(2); @include pull(2); } @include at-large { @include span(4); @include push(4); @include pull(4); } } &--3 { @include at-small { @include span(2); } @include at-medium { @include span(2); } @include at-large { @include span(4); } } &--4 { @include at-small { @include span(4); } @include at-medium { @include span(6); } @include at-large { @include span(8); } } } }
-
Example: Nesting columns
You are also able to nest a grid row into a column
12.12.2<!-- MarkUp --> <div class="susyExample__row susyExample__row--5-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> <div class="susyExample__row susyExample__row--nesting"> <div class="susyExample__col--2-1"> 2.1 </div> <div class="susyExample__col--2-2"> 2.2 </div> </div> </div> </div> <!-- Sass --> .susyExample { &__row { &--5-1, &--nesting { @include row(); } } &__col { &--1, &--2 { @include at-small { @include span(6); } @include at-medium { @include span(4); } @include at-large { @include span(6); } } &--2-1, &--2-2 { @include at-small { @include span(6 of 6); } @include at-medium { @include span(2 of 4); } @include at-large { @include span(3 of 6); } } } }
-
Example: Remove Gutter
If you want to remove the gutters of a column just use the following mixin to define the column width // Mixin:
span-no-gutters(*)
123456<!-- MarkUp --> <div class="susyExample__row--6-1"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> <div class="susyExample__col--4"> 4 </div> <div class="susyExample__col--5"> 5 </div> <div class="susyExample__col--6"> 6 </div> </div> <!-- Sass --> .susyExample { &__row--6-1 { @include row(); } &__col { &--1, &--3, &--5 { @include at-small { @include span-no-gutters(4); } @include at-medium { @include span-no-gutters(5); } @include at-large { @include span-no-gutters(3); } } &--2, &--4, &--6 { @include at-small { @include span-no-gutters(2); } @include at-medium { @include span-no-gutters(3); } @include at-large { @include span-no-gutters(1); } } } }
-
Example: Remove gutter on the left/right only
If you only want to remove the gutter on the left or right side use // Mixin:
span-no-gutter-left(*)
orspan-no-gutter-right(*)
123456<!-- MarkUp --> <div class="susyExample__row--6-3"> <div class="susyExample__col--1"> 1 </div> <div class="susyExample__col--2"> 2 </div> <div class="susyExample__col--3"> 3 </div> <div class="susyExample__col--4"> 4 </div> <div class="susyExample__col--5"> 5 </div> <div class="susyExample__col--6"> 6 </div> </div> <!-- Sass --> .susyExample { &__row--6-3 { @include row(); } &__col { &--1, &--3, &--5 { @include at-small { @include span(4); } @include at-medium { @include span(5); } @include at-large { @include span-no-gutter-right(3); } } &--2, &--4, &--6 { @include at-small { @include span(2); } @include at-medium { @include span(3); } @include at-large { @include span-no-gutter-left(1); } } } }
-
-
Page Sections
-
Outer Spacing (default)
Use with components on white background, where top/bottom margins collapse into each other. // Class
.pageSection
// Mixinpage-section
...
...
...
...
...
[Content]
...
...
...
...
......
...
...
...
...
[Content]
...
...
...
...
......
...
...
...
...
[Content]
...
...
...
...
...
-
Inner Spacing
Use with components which has a background color and no margin on top & bottom, but inner padding instead. Paddings will not merge into each other. // Class
.pageSectionInner
// Mixinpage-section-inner
Please note: This class/mixin is also combinable with
.pageSectionInner
/page-section-inner
to add outer spacing (margin) as seen above.
...
...
...
...
...
[Content]
...
...
...
...
......
...
...
...
...
[Content]
...
...
...
...
......
...
...
...
...
[Content]
...
...
...
...
... -
More Options
-
To remove the spacing at the top, just add class
pageSection--noSpacingTop
at the according page section. -
To remove the spacing at the bottom, just add class
pageSection--noSpacingbottom
at the according page section. -
To add a border at the top, just add class
pageSection--borderTop
at the according page section. -
To add a border at the bottom, just add class
pageSection--borderBottom
at the according page section. -
To change the background color to a slightly grey, just add class
pageSection--backgroundGrey
at the according page section. This class should normally only be used in combination with.pageSectionInner
.
-
To remove the spacing at the top, just add class
-
-
Colors
-
Brand specific
-
#6cc24a// Variable:
$color-primary
-
#5e9729// Variable:
$color-primary-dark
-
-
Shades of Grey
-
#000000// Variable:
$color-black
-
#2d3131// Variable:
$color-grey-xdark
-
#4a4a4a// Variable:
$color-grey-dark
-
#aaaaaa// Variable:
$color-grey-medium
-
#dddddd// Variable:
$color-grey-light
-
#f3f3f3// Variable:
$color-grey-xlight
-
#ffffff// Variable:
$color-white
-
-
Component specific
-
#ff3128// Variable:
$color-error
-
#6cc24a// Variable:
$color-success
-
#4673c8// Variable:
$color-bounty
-
#2d58a9// Variable:
$color-bounty-dark
-
#b23d3d// Variable:
$color-sale
-
#2bafde// Variable:
$color-badge
-
#d5a231// Variable:
$color-badge-new
-
// Variable:
$color-message-error
-
// Variable:
$color-message-warning
-
// Variable:
$color-message-success
-
// Variable:
$color-message-info
-
-
-
Icons
-
Module / Include
The following icons are defined using SVG's. Whenever an icon should be included, use one of the following methods, depending on the context:
Custom module to use within code templates:
<issvgicon iconid="[iconID]" title="[iconTitle]" classname="[additionalClasses]" color="[optionalColorVariable]"/>
URL Include to use within content assets:
$include('SVGIcon-Render', 'iconid', '[iconID]', 'title', '[iconTitle]', 'classname', '[additionalClasses]', 'color', '[optionalColorVariable]')$
-
Parameters
-
Mandatory
-
iconID
- Icon ID refered to the list of icons below
-
-
Optional
-
iconTitle
- Icon Title to be rendered as a <title> tag within the <svg> tag -
classname
- Optional additional HTML class(es) to be added to the class attribute of the <svg> tag -
color
- Optional parameter to colorize the <svg> tag. Possible options are all color variables as defined in the styleguide (without '$' character)
-
-
Mandatory
-
List
-
// Icon ID
account
-
// Icon ID
address
-
// Icon ID
app
-
// Icon ID
apple-store
-
// Icon ID
badge
-
// Icon ID
bubble-check
-
// Icon ID
bubble-cross
-
// Icon ID
bubble-info
-
// Icon ID
calendar-check
-
// Icon ID
caret
-
// Icon ID
cart
-
// Icon ID
circle-check
-
// Icon ID
circle-info
-
// Icon ID
circle-question
-
// Icon ID
check
-
// Icon ID
close
-
// Icon ID
code
-
// Icon ID
contact
-
// Icon ID
delete
-
// Icon ID
delivery-guarantee
-
// Icon ID
discount
-
// Icon ID
details
-
// Icon ID
edit
-
// Icon ID
external-link
-
// Icon ID
extract
-
// Icon ID
filter
-
// Icon ID
format-digital
-
// Icon ID
format-print
-
// Icon ID
free-delivery
-
// Icon ID
free-delivery-2
-
// Icon ID
free-edition
-
// Icon ID
gift
-
// Icon ID
google-play
-
// Icon ID
grid
-
// Icon ID
guide
-
// Icon ID
lock
-
// Icon ID
logo-geo
-
// Icon ID
logout
-
// Icon ID
magazine-children
-
// Icon ID
magazine-geo
-
// Icon ID
magazine-history
-
// Icon ID
magazine-knowledge
-
// Icon ID
magazine-travel
-
// Icon ID
magazine-automobile
-
// Icon ID
magazine-motor-rad
-
// Icon ID
magazine-camping-und-caravaning
-
// Icon ID
magazine-lifestyle
-
// Icon ID
magazine-sport-und-freizeit
-
// Icon ID
magazine-luftfahrt
-
// Icon ID
mapmarker
-
// Icon ID
menu
-
// Icon ID
package
-
// Icon ID
paypal
-
// Icon ID
pdf
-
// Icon ID
search
-
// Icon ID
special-edition
-
// Icon ID
spinner
-
// Icon ID
warning
-
// Icon ID
bonus-1
-
// Icon ID
bonus-2
-
// Icon ID
bonus-3
-
// Icon ID
bonus-4
-
// Icon ID
bonus-gift
-
// Icon ID
fingerprint
-
// Icon ID
gift-card
-
// Icon ID
interview
-
// Icon ID
newsletter
-
// Icon ID
podcast
-
// Icon ID
student-discount
-
// Icon ID
video
-
// Icon ID
app-store
-
// Icon ID
audio-speaker
-
// Icon ID
call-to-action
-
// Icon ID
computer
-
// Icon ID
console
-
// Icon ID
conversation
-
// Icon ID
devices
-
// Icon ID
email
-
// Icon ID
ereader
-
// Icon ID
exchange
-
// Icon ID
headphones
-
// Icon ID
history
-
// Icon ID
id-card
-
// Icon ID
lightbulb
-
// Icon ID
linux
-
// Icon ID
listening
-
// Icon ID
magazine
-
motherboard // Icon IDmotherboard
-
// Icon ID
multimedia
-
// Icon ID
payment
-
// Icon ID
payment-protection
-
// Icon ID
pc
-
// Icon ID
receipt
-
// Icon ID
sale
-
// Icon ID
sale-circle
-
// Icon ID
star
-
// Icon ID
tap
-
// Icon ID
world
-
// Icon ID
write
-
// Icon ID
plant
-
// Icon ID
joystick
-
// Icon ID
hanger
-
// Icon ID
theater
-
// Icon ID
baking
-
// Icon ID
conference
-
// Icon ID
dumbbell
-
// Icon ID
growth
-
// Icon ID
celebrity
-
// Icon ID
charity
-
// Icon ID
cook
-
// Icon ID
change
-
14 // Icon IDchange-14
-
-
-
Typography
-
Headings
This is a heading (level 1) // Class:.heading--1
// Mixin:.heading1
This is a heading (level 2) // Class:.heading--2
// Mixin:.heading2
This is a heading (level 3) // Class:.heading--3
// Mixin:.heading3
This is a heading (level 4) // Class:.heading--4
// Mixin:.heading4
This is a heading (level 5) // Class:.heading--5
// Mixin:.heading5
This is a heading (level 6) // Class:.heading--6
// Mixin:.heading6
-
Links
Click me - I'm a default link // Class:.link
Click me - I'm a link without underline // Class:.link
+.link--noUnderline
.link
+.link--noUnderline
+.link--hasIcon
-
Alignment
Left aligned text - 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.// Class:.text--left
Right aligned text - 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.// Class:.text--right
Centered text - 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.// Class:.text--center
Block text - 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.// Class:.text--justify
-
-
Forms
-
Inputfields
-
Module
Please use
<isinputfield />
whereever possible to render a form row containing an inputfield. -
Parameters
-
Mandatory
-
formfield
- Defines the field to be rendered. Will be specified in one of the form-XML-files (mandatory state, error message, label, ... ). -
type
- Defines the type of the inputfield to be rendered. Possible options are text', 'textarea', 'password', 'email', 'number', 'tel', 'select', 'checkbox', 'radio' and 'hidden'.
-
-
Optional
-
uniqueid
- Overwrites the automaticly set value of the id attribute by a custom value. -
name
- Overwrites the automaticly set value of the name attribute by a custom value. -
fieldclass
- Adds a custom class to the input field. -
rowclass
- Adds a custom class to the container which contains the input field. -
secondarylabel
- Adds a caption below the inputfield!
. Doesn't works for checkboxes and radio buttons. -
placeholder
- Adds a placeholder text!
. Works only for textfields and textareas. -
tooltip
- Adds a tooltip to the label text.!
. Doesn't works for single checkboxes. -
autocomplete
- Adds the autocomplete attribute to the inputfield. (What is this?) -
label
- Uses a custom label instead of using the label defined in form definition -
labelencoding
- Can be used to set encoding tooff
when used to render markup in label -
additionaloptions
- An array of addional option (array of string or array of object with value and label properties) -
hidelabel
- If set to true the label will be hidden!
. Doesn't works on checkboxes. On radios it will remove the fieldset-legend. -
disabled
- If set to true the field will be disabled.
-
-
Mandatory
-
Styling Options
-
Large Inputs
-
Add
inputText--large
via parameterrowclass
to get a large textinput -
Add
inputSelect--large
via parameterrowclass
to get a large select - Please note that this will only affect textfields and selects
-
Add
-
Small Inputs
-
Add
inputText--small
via parameterrowclass
to get a small textinput -
Add
inputSelect--small
via parameterrowclass
to get a small select - Please note that this will only affect textfields and selects
-
Add
-
Inline Radio buttons
-
Add
inputGroupRadio--gridStyle
via parameterrowclass
to align radios vertically with default grid-gutter-spacing. Use SUSY grid mixins to control the width of the radio labels.
-
Add
-
By default the label is placed above the input (textfields, textareas & selects). You can control up from which viewport-width it should be placed inline (left to the input), by assigning the following classes via the parameter
rowclass
.-
breakToInline
- Viewport 0+ -
breakToInline--smallInterim
- Viewport 480+ -
breakToInline--medium
- Viewport 768+ -
breakToInline--large
- Viewport 992+ -
breakToInline--xlarge
- Viewport 1200+ -
breakToInline--xxlarge
- Viewport 1440+
-
breakToInline--smallOnly
- Viewport 0 - 767 -
breakToInline--smallMediumOnly
- Viewport 0 - 991 -
breakToInline--mediumOnly
- Viewport 768 - 991
-
-
Large Inputs
-
Examples: Textfields
-
Examples: Selects
-
Examples: Textareas
-
Examples: Checkboxes
Checkbox GroupCheckbox Group - With Checkbox TooltipCheckbox Group - No Label
Checkbox Group - No Label -
Examples: Radios
DefaultMandatory*DisabledErrorWith Tooltip TooltipGrid StyleNo Label
No Label -
Examples: Multiple Inputs in one Row
-
-
Buttons
-
Primary
// Class:.button
+.button--primary
-
Primary (Bounty)
// Class:.button
+.button--primary
+.button--bounty
-
Secondary
// Class:.button
+.button--secondary
-
Secondary (Bounty)
// Class:.button
+.button--secondary
+.button--bounty
-
Tertiary
// Class:.button
+.button--tertiary
-
Filter
// Class:.button
+.button--filter
-
Large
// Class:.button
+.button--large
+.button--primary
-
Small
// Class:.button
+.button--small
+.button--primary
-
PayPal
-
Apple Store
-
Google Store
-
-
Tooltips
Vestibulum id ligula porta felis euismod semper.Vestibulum id ligula porta felis euismod semper. -
Messages
-
Error
-
Warning
-
Success
-
Info
-
-
-
Linking
If you want to link pages in content assets, please use the following snippets as values inside thehref=""
attribute of the<a>
tag, regarding on the target.-
Product Pages
$url('Product-Show', 'pid', '[Product ID]')$
To preselect filters on an abo pre PDP page, append them after the hash. Medium can be omitted if there is only a single choice.
$url('Product-Show', 'pid', '[Product ID]')$#oc=selbstzahler&medium=digital
-
Category Pages
$url('Search-Show', 'cgid', '[Category ID]')$
To filter Products on Category pages, append
prefn
X andprefv
X parameters to the URL after the question mark (?). X should start with 1 and increase one by one.-
prefn
defines the Attribute ID, e.g. medium. -
prefv
defines the Attribute Value, e.g. digital or print. It can also have multiple selection with the | between the values.
$url('Search-Show', 'cgid', '[Category ID]', 'prefn1', 'medium', 'prefv1', 'digital')$ $url('Search-Show', 'cgid', '[Category ID]', 'prefn1', 'medium', 'prefv1', 'digital|print')$ $url('Search-Show', 'cgid', '[Category ID]', 'prefn1', 'medium', 'prefv1', 'print', 'prefn2', 'brand', 'prefv2', 'GEO')$
-
-
Asset Pages
$url('Page-Show', 'cid', '[Content Asset ID]')$
-
Home Page
$url('Home-Show')$
-
Account Overview Page
$url('Account-Show')$
If the customer is not logged in, he/ she will be redirected to the login page. -
Emails
mailto:me@xyz.de
-
Phone Numbers
tel:123456789
-
-
Pictures
-
Tag
-
For images please use the
picture
tag, which gives you more flexibility in specifying image resources than aimg
tag. - Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
-
The
picture
element holds two different tags: one or moresource
tags and oneimg
tag. -
The
source
element has the following attributes:- srcset (required) - defines the URL of the image to show
- media - accepts any valid media query that would normally be defined in a CSS
- sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
- type - defines the MIME type
-
The browser will use the attribute values to load the most appropriate image. The browser will use the first
source
element with a matching hint and ignore any followingsource
tags. -
The
img
element is required as the last child tag of thepicture
declaration block. Theimg
element is used to provide backward compatibility for browsers that do not support thepicture
element, or if none of thesource
tags matched.
Markup
<picture> <source media="(max-width: 767px)" srcset="[...]"> <source media="(max-width: 991px)" srcset="[...]"> <source media="(max-width: 1199px)" srcset="[...]"> <source media="(min-width: 1200px)" srcset="[...]"> <img alt="[...]" src="[...]"> </picture>
-
For images please use the
-
Include
-
Picture tags can be automaticly created by using the controller
Include-Picture
. - Please be aware that the image proportions will be kept for all viewports by using this include
-
The include accepts a couple of parameters:
-
src
- Image path from library (mandatory) -
sm
- Image width (px) for viewports up to 767px -
md
- Image width (px) for viewports up to 991px -
lg
- Image width (px) for viewports up to 1199px -
xl
- Image width (px) for viewports larger than 1200px -
alttext
- Add an alternative image text -
pictureclass
- Add a HTML class set on thepicture
tag -
imageclass
- Add a HTML class set on theimg
tag
-
Example: Include
$include('Include-Picture', 'src', '[...]', 'sm', '[...]', 'md', '[...]', 'lg', '[...]', 'xl', '[...]', 'pictureclass', '[...]', 'imageclass', '[...]', 'alttext', '[...]')$
-
Picture tags can be automaticly created by using the controller
-
Module
-
Please use
<isimagemodule />
to render a picture tag based on a single category- or product-image. The module accepts a couple of parameters:-
imagemodel
- Defines the base image source -
viewtype
- Defines the viewtype which can be configured in \app_core\cartridge\config\typeImagesConfig.json -
pictureclass
- Add a HTML class set on thepicture
tag -
imageclass
- Add a HTML class set on theimg
tag
-
-
Viewport depending sizes of images sources (assigned to varying viewtypes) can be configured in \app_core\cartridge\config\disConfiguration.json
The following attributes can be added/ edited:-
Defines the viewport size where the parameters below take effect by the following parameters:
-
sm
- Viewports up to 767px -
md
- Viewports up to 991px -
lg
- Viewports up to 1199px -
xl
- Viewports larger than 1200px
-
-
format
- Defines the created image file format. Possible values are 'jpg' and 'png' -
quality
- Defines the compression rate. Use only in combination with format 'jpg' -
scaleMode
- Defines how the image will be handled when scaled to the wished size. Possible values are 'fit' and 'cut' -
scaleWidth
- Defines the with of the created image as px-value -
scaleHeight
- Defines the height of the created image as px-value
-
Defines the viewport size where the parameters below take effect by the following parameters:
Example: Module
<isimagemodule imagemodel="[...]" viewtype="[...]" imageclass="[...]" pictureclass="[...]" />
Example: Viewtype Configuration
"viewtypeName": { "sm": { "format": "jpg", "quality": "80", "scaleMode": "fit", "scaleWidth": 600, "scaleHeight": 300 }, "md": { "format": "jpg", "quality": "80", "scaleMode": "fit", "scaleWidth": 300, "scaleHeight": 150 }, "lg": { "format": "jpg", "quality": "80", "scaleMode": "cut", "scaleWidth": 400, "scaleHeight": 200 }, "xl": { "format": "jpg", "quality": "80", "scaleMode": "cut", "scaleWidth": 800, "scaleHeight": 400 } }
-
Please use
-
-
Modals
-
Module
Please use
<ismodal />
to render a modal within template files. The module accepts a couple of parameters:Example: Module
<ismodal template="[Template]" triggerclass="[Trigger Class]" />
-
Include
Please use the
Include-Modal
include to render a modal within content assets. The include accepts a couple of parameters:Example: Include
$include('Include-Modal', 'aid', '[Asset ID]', 'triggerclass', '[Trigger Class]')$
-
Parameters
-
Mandatory
-
template
- Template Path - Defines the template which will be rendered inside the modal.
or
aid
- Content Asset ID - Defines the asset which will be rendered inside the modal. -
triggerclass
- String value following the naming conventions of HTML classes - Defines the trigger class to show the modal.
-
-
Optional
-
closebutton
- true | false - Defines if the modal has a close-button
-
-
Mandatory
-
Example
<!-- Trigger --> <button aria-hidden="false" class="button button--primary [Trigger Class]" tabindex="0" type="button"> [Button text] </button> <!-- Modal (to use in template files) --> <ismodal template="[Template]" triggerclass="[Trigger Class]" /> <!-- Modal (to use in content assets) --> $include('Include-Modal', 'aid', '[Asset ID]', 'triggerclass', '[Trigger Class]')$
-
-
Carousels
-
Functional Markup
All Carousels/Slider used in the storefront utilize a custom library. To build a carousel the following basic setup can be used. Options and adjustments to certain use cases are described below.
<div class="js-carouselContainer" data-carouselconfig="[JSONConfigID]"> <div class="js-carousel__slidesContainer"> <ul class="js-carouselSlides"> <li aria-hidden="true" class="js-carouselSlide"> [Slide Content] </li> <li aria-hidden="true" class="js-carouselSlide"> [Slide Content] </li> <li aria-hidden="true" class="js-carouselSlide"> [Slide Content] </li> </ul> <button class="js-carouselButtonPrevious" type="button"> [Icon] </button> <button class="js-carouselButtonNext" type="button"> [Icon] </button> </div> </div>
-
Parameters
[JSONConfigID]
- A JSON string with all necessary configuration parameters (usable within the data attributedata-carouselconfig
).-
visibleItems
- Numerical value - Defines the number of visible items. Possible values are integer and 'auto' (Default: '1') -
scrollNumber
- Numerical value - Defines the number of items to be scrolled. Possible values are integers (Default: '1') -
transitionSpeed
- Numerical value - Defines the speed of the carousel transition animation in ms (Default: '1000') -
infiniteScroll
- true | false - Defines if the infinite scrolling is enabled or disabled -
autoScroll
- true | false - Defines if the automatic scrolling is enaled enabled or disabled. -
autoScrollDelay
- Numerical value - Defines the time to wait between auto scroll events in ms (Default: '5000') -
innerContainerOverflowHidden
- true | false - Defines if slides outside the carousel container are visible or hidden -
showDefaultNavArrows
- true | false - Defines if navigation arrows should automatically been added -
showDefaultNavBubbles
- true | false - Defines if navigation bubbles should automatically been added
-
-
Viewport dependent Config
The configuration of the carousel can be set per viewport. To do so, overwrite the default configuration for a certain viewport where ever necessary.
Viewport ID's are
sm
,md
,lg
andxl
. See following example configuration:
<isscript> var JSONConfigID = JSON.stringify({ default: { visibleItems: 12, scrollNumber: 12, transitionSpeed: 1000, infiniteScroll: true, autoScroll: true, autoScrollDelay: 3000, showDefaultNavArrows: false, showDefaultNavBubbles: false, }, md: { visibleItems: 6, scrollNumber: 6, }, sm: { visibleItems: 1, scrollNumber: 1, }, }); </isscript>
-
Example
<!-- JSon --> <isscript> var carouselExampleConfig = JSON.stringify({ default: { visibleItems: 6, scrollNumber: 6, transitionSpeed: 1000, infiniteScroll: true, autoScroll: true, autoScrollDelay: 5000, innerContainerOverflowHidden: false, showDefaultNavArrows: false, showDefaultNavBubbles: true, }, md: { visibleItems: 3, scrollNumber: 3, }, sm: { visibleItems: 1, scrollNumber: 1, }, }); </isscript> <!-- MarkUp --> <div class="styleguide__carousel js-carouselContainer" data-carouselconfig="${carouselExampleConfig}"> <div class="styleguide__carouselSlidesContainer js-carousel__slidesContainer"> <ul class="styleguide__carouselSlides js-carouselSlides"> <li aria-hidden="true" class="styleguide__carouselSlide js-carouselSlide"> <div class="styleguide__carouselSlideInner"> [Carousel Tile Content] </div> </li> <li aria-hidden="true" class="styleguide__carouselSlide js-carouselSlide"> [...] </li> <li aria-hidden="true" class="styleguide__carouselSlide js-carouselSlide"> [...] </li> <li aria-hidden="true" class="styleguide__carouselSlide js-carouselSlide"> [...] </li> </ul> <button class="styleguide__carouselButton styleguide__carouselButton--prev js-carouselButtonPrevious" type="button" aria-hidden="false" tabindex="0"> [Icon] </button> <button class="styleguide__carouselButton styleguide__carouselButton--next js-carouselButtonNext" type="button" aria-hidden="false" tabindex="0"> [Icon] </button> </div> </div>
-
-
Accordions & Toggles
-
Functional Markup
Accordion and Toggle functionality utilizes a custom library. To build an accordion the following basic setup can be used. Options and adjustments to certain use cases are described below.
<ul data-accordionconfig="[JSONConfigID]" class=" js-accordion" aria-label="Accordion" role="tablist"> <li class="js-accordionItem"> <div class="js-accordionToggle" role="tab" tabindex="0" aria-expanded="false"> [Toggle] </div> <div class="js-accordionItem__content" aria-hidden="true" role="tabpanel"> [Toggle Content] </div> </li> </ul>
-
Parameters
[JSONConfigID]
- A JSON string with all necessary configuration parameters (usable within the data attributeaccordionconfig
)-
toggleBehaviour
- accordion | independent | group - Defines how accordion items will toggle -
activeOnInit
- none | first | last - Defines items that should be active (visible) on load. Alternatively the parameter can be an array of numbers which specifies the indexes of the items that should be active on load
-
-
Viewport dependent Config
It's possible to generate a configuration for each viewport by simply extending the accordionconfig JSON. In addition to the 'default' configuration you can overwrite these for a certain viewport, see following example:
<isscript> var JSONConfigID = JSON.stringify({ default: { toggleBehaviour: 'independent' }, md: { toggleBehaviour: 'group' }, sm: { toggleBehaviour: 'accordion' }, }); </isscript>
-
Example
-
Accordion Section 01
-
Accordion Section 02
-
Accordion Section 03
-
Accordion Section 04
-
Accordion Section 05
<!-- JSon --> <isscript> var accordionExampleConfig = JSON.stringify({ default: { toggleBehaviour: 'accordion', activeOnInit: 'none', } }); </isscript> <!-- MarkUp --> <ul class="styleguide__accordion js-accordion" aria-label="Accordion" role="tablist" data-accordionconfig="${accordionExampleConfig}"> <li class="styleguide__accordionItem js-accordionItem"> <div class="styleguide__accordionItemToggle js-accordionToggle" role="tab" tabindex="0" aria-expanded="false"> <div class="styleguide__accordionItemTitle"> [Accordion Section Title] </div> <div class="styleguide__accordionItemIconWrapper"> <issvgicon iconid="caret" classname="styleguide__accordionItemIcon"/> </div> </div> <div class="styleguide__accordionItemContent js-accordionItem__content" aria-hidden="true" role="tabpanel"> <div class="styleguide__accordionItemContentInner"> [Accordion Section Content] </div> </div> </li> <li class="styleguide__accordionItem js-accordionItem"> [...] </li> <li class="styleguide__accordionItem js-accordionItem"> [...] </li> <li class="styleguide__accordionItem js-accordionItem"> [...] </li> </ul>
-
-
-
Tabs
-
Functional Markup
Tabs are build using a custom module. To build an accordion the following basic setup can be used. The needed configuration is described below.
<button class="js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="Tab1" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab1" type="button">Tab 1</button> <button class="js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="Tab2" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab2" type="button">Tab 2</button> <div id="js-exampleTabber__tab1" class="js-exampleTabber__content"> [Tab 1 Content] </div> <div id="js-exampleTabber__tab2" class="js-exampleTabber__content"> [Tab 2 Content] </div>
-
Classes and attributes
Tab triggers use the class
js-tabber-trigger
. They need two data-attributes:-
data-tabber-class
- Defines a class prefix for tab triggers and tab content sections -
data-tabber-content
- Refers to the ID of the attached tab content -
data-tabber-preselectid
- Refers to the URL Parameter (activetab) to preselect the tab after page load. "URL?activetab=NAME"
So the tab trigger needs an additional class
<tabber-class>__tabBtn
. The tab content needs the class<tabber-class>__content
.Additionally there is the option to toggle the visibility of other elements. These elements also need the classes
<tabber-class>__content
and a class<tabber-content>-additionalContent
. -
-
Example
[Tab 01 Content] 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. 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.[Tab 02 Content] 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. 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.[Tab 03 Content] 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. 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.[Tab 04 Content] 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. 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.[Tab 05 Content] 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. 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.<div class="styleguide__tabExampleTriggerWrapper"> <button class="styleguide__tabExampleTrigger js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="section1" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab1" type="button"> [Tab Section 1 Title] </button> <button class="styleguide__tabExampleTrigger js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="section2" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab2" type="button"> [Tab Section 02 Title] </button> <button class="styleguide__tabExampleTrigger js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="section3" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab3" type="button"> [Tab Section 03 Title] </button> <button class="styleguide__tabExampleTrigger js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="section4" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab4" type="button"> [Tab Section 04 Title] </button> <button class="styleguide__tabExampleTrigger js-tabber-trigger js-exampleTabber__tabBtn" data-tabber-preselectid="section5" data-tabber-class="js-exampleTabber" data-tabber-content="js-exampleTabber__tab5" type="button"> [Tab Section 05 Title] </button> </div> <div class="styleguide__tabExampleContentWrapper"> <div id="js-exampleTabber__tab1" class="styleguide__tabExampleContent js-exampleTabber__content"> [Tab Section 01 Content] </div> <div id="js-exampleTabber__tab2" class="styleguide__tabExampleContent js-exampleTabber__content"> [Tab Section 02 Content] </div> <div id="js-exampleTabber__tab3" class="styleguide__tabExampleContent js-exampleTabber__content"> [Tab Section 03 Content] </div> <div id="js-exampleTabber__tab4" class="styleguide__tabExampleContent js-exampleTabber__content"> [Tab Section 04 Content] </div> <div id="js-exampleTabber__tab5" class="styleguide__tabExampleContent js-exampleTabber__content"> [Tab Section 05 Content] </div> </div>
-
-
Category Tile Includes
-
Include
$include('Include-CategoryTile', 'cgid', '[...]', 'format', '[...]')$
-
Parameters
-
Mandatory
-
cgid
- Category ID - Defines the category -
format
- small | medium | mediumInline | wide - Defines, which type of the category tile will be rendered
-
-
Optional
-
linked
- true | false - Defines if the whole teaser is clickable. If set to 'false' only the button triggers the link. -
reversed
- true | false - Switch positioning of text and image -
highlighted
- true | false - Highlights the teaser by adding a thick border in primary color -
showButton
- true | false - If set to 'false' the CTA button will be removed -
secondaryButton
- true | false - If set to 'true' the primary button will be replaced by a secondary button -
noBorder
- true | false - If set to 'true' the border will be removed and the spacing will be adjusted. Doesn't works if the whole teaser is clickable. -
noIndent
- true | false - If set to 'true' the indent on viewports up from 1200px will be removed. Doesn't works if the teaser has still a border and formats small and medium. -
buttonText
- String Value - Overwrite the standard button text (Default: 'Anzeigen') -
headingText
- String Value - Overwrite the standard heading text (Default: 'Category Name')
-
-
Mandatory
-
Examples: Wide Tiles
$include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide')$
-
Examples: Medium Tiles
$include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium')$
-
Examples: Medium (Inline) Tiles
$include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline')$
-
Examples: Small Tiles
$include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small')$
-
-
Category Carousel Includes
-
Include
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', '[...]')$
-
Parameters
-
Mandatory
-
cgid
- Category ID - Defines the category -
format
- small | medium | mediumInline | wide - Defines, which type of the category tiles will be used in the carousel
-
-
Optional
-
linked
- true | false - Defines if the whole teaser is clickable. If set to 'false' only the button triggers the link. -
reversed
- true | false - Switch positioning of text and image -
highlighted
- true | false - Highlights the teaser by adding a thick border in primary color -
showButton
- true | false - If set to 'false' the CTA button will be removed -
secondaryButton
- true | false - If set to 'true' the primary button will be replaced by a secondary button -
noBorder
- true | false - If set to 'true' the border will be removed and the spacing will be adjusted. Doesn't works if the whole teaser is clickable. -
noIndent
- true | false - If set to 'true' the indent on viewports up from 1200px will be removed. Doesn't works if the teaser has still a border and formats small and medium. -
buttonText
- String Value - Overwrite the standard button text (Default: 'Anzeigen')
-
-
Mandatory
-
Example: Wide Tiles
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'wide')$
-
Example: Medium Tiles
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'medium')$
-
Example: Medium (Inline) Tiles
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'mediumInline')$
-
Example: Small Tiles
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'small')$
-
-
Product Carousel Includes
-
Include
$include('Include-ProductsCarousel', 'pids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', '[normal | teaserWide]', 'reversed', 'true', ...)$
-
Parameters
-
Mandatory (only one is needed)
-
pids
- Product ID's - Defines the products shown in the carousel (separated by a '+') -
cgid
- Category ID - Defines the products from the given category -
brand
- Brand name - Defines the products from the given brand
-
-
Optional
-
format
- normal | teaserWide - Defines the used format of the product tiles in the carousel
-
-
Optional - only for cgid or brand
-
maxProducts
- a number of maximum displayed products - hard limit is 8 (also default)
-
-
Optional - Only for format teaserWide
-
reversed
- true | false - Switch positioning of text and image -
highlighted
- true | false - Highlights the teaser by adding a thick border in primary color -
noBorder
- true | false - If set to 'true' the border will be removed and the spacing will be adjusted. Doesn't works if the whole teaser is clickable. -
noIndent
- true | false - If set to 'true' the indent on viewports up from 1200px will be removed. Doesn't works if the teaser has still a border. -
linked
- true | false - Defines if the whole teaser is clickable. If set to 'false' only the button triggers the link. -
showButton
- true | false - If set to 'false' the CTA button will be removed -
secondaryButton
- true | false - If set to 'true' the primary button will be replaced by a secondary button -
image
- true | false - If set to 'false' the image will not be shown -
mediaPreview
- true | false - If set to 'false' the media preview will not be shown -
productName
- true | false - If set to 'false' the product name will not be shown -
badges
- true | false - If set to 'false' the badges will not be shown -
offerUsp
- true | false - If set to 'false' the offer usp list will not be shown -
price
- true | false - If set to 'false' the price will not be shown
-
-
Mandatory (only one is needed)
-
Example (format normal)
$include('Include-ProductsCarousel', 'pids', '1829525+1829525+1829525+1829525+1829525+1829525', 'format', 'normal')$
-
Example (cgid einzelhefte)
$include('Include-ProductsCarousel', 'cgid', 'einzelhefte', 'format', 'normal')$
-
Example (brand GEO EPOCHE, max 4 products)
$include('Include-ProductsCarousel', 'brand', 'GEO EPOCHE', 'format', 'normal', 'maxProducts', '4')$
-
Example (pids, cgid, brand)
$include('Include-ProductsCarousel', 'pids', '1987206+2005339+2026411', 'cgid', 'einzelhefte', 'brand', 'WALDEN', 'format', 'normal', 'maxProducts', '8')$
-
-
Product Tile Includes
-
Include
$include('Include-ProductTile', 'pid', '[pid]', 'format', '[teaserWide | teaserSmall]', ..., 'contentLinkId', '[contentLinkId]')$
-
Parameters
-
Mandatory
-
pid
- Product ID - Defines the product shown in the component
-
-
Optional
-
format
- tile | teaserWide | teaserSmall - Defines, which type of the product tile to be used in the component -
linked
- true | false - Defines if the whole teaser is clickable. If set to 'false' only the button triggers the link. -
reversed
- true | false - Switch positioning of text and image -
highlighted
- true | false - Highlights the teaser by adding a thick border in primary color -
showButton
- true | false - If set to 'false' the CTA button will be removed -
secondaryButton
- true | false - If set to 'true' the primary button will be replaced by a secondary button -
noBorder
- true | false - If set to 'true' the border will be removed and the spacing will be adjusted. Doesn't works if the whole teaser is clickable. -
noIndent
- true | false - If set to 'true' the indent on viewports up from 1200px will be removed. Doesn't works if the teaser has still a border and formats small and medium. -
buttonText
- String Value - Overwrite the standard button text (Default: 'abo.master.toabo') -
contentLinkId
- String Value - The Content Asset Id. The button in the Component will be redirected to this Content Asset page. -
image
- true | false - If set to 'false' the image will not be shown -
mediaPreview
- true | false - If set to 'false' the media preview will not be shown -
productName
- true | false - If set to 'false' the product name will not be shown -
badges
- true | false - If set to 'false' the badges will not be shown -
offerUsp
- true | false - If set to 'false' the offer usp list will not be shown -
price
- true | false - If set to 'false' the price will not be shown -
headingText
- String Value - Overwrite the standard heading text (Default: 'Product Name') -
contentText
- String Value - Add a new text (Default: empty, no text)
-
-
Mandatory
-
Example
$include('Include-ProductTile', 'pid', '1879485', 'format', 'teaserWide')$
-
-
Subscription Tile Includes
-
Include
$include('Include-SubscriptionTile', 'pid', '[pid]', 'mediumValue', '[print | digital | print-digital]', 'highlighted', '[true | false]', 'productTypeValue', '[lesen | hoeren | lesen-hoeren]')$
-
Parameters
-
Mandatory
-
pid
- Product ID - Defines the product shown in the component
-
-
Optional
-
mediumValue
- print | digital | print-digital - Defines the medium value -
highlighted
- true | false - Highlights the Subscription Tile or not -
productTypeValue
- lesen | hoeren | lesen-hoeren - Defines the product type value (SPOTLIGHT)
-
-
Mandatory
-
Example
$include('Include-SubscriptionTile', 'pid', '1879485', 'mediumValue', 'print', 'highlighted', 'true')$
-
-
Current Issue Includes
-
Include
$include('Include-CurrentIssue', 'brand', '[brand]')$
-
Parameters
-
Mandatory
-
brand
- Brand Name - Defines the brand like 'stern' or 'geo'.
-
-
Mandatory
-
Example
$include('Include-CurrentIssue', 'brand', 'stern')$
-
-
Current Issue Short Includes
-
Include
$include('Include-CurrentIssueShort', 'brand', '[brand]')$
-
Parameters
-
Mandatory
-
brand
- Brand Name - Defines the brand like 'stern' or 'geo'.
-
-
Mandatory
-
Example
$include('Include-CurrentIssueShort', 'brand', 'stern')$
-
-
Other Issues Includes
-
Include
$include('Include-OtherIssues', 'brand', '[brand]')$
-
Parameters
-
Mandatory
-
brand
- Brand Name - Defines the brand like 'stern' or 'geo'.
-
-
Mandatory
-
Example
$include('Include-OtherIssues', 'brand', 'stern')$
-
-
Single Issue Includes
-
Include
$include('Include-SingleIssue', 'brand', '[brand]', 'cgid', '[category id]', 'medium', '[print | digital]', 'numberOfItems', '[number of items]')$
-
Parameters
-
Mandatory
-
brand
- Brand Name - Defines the brand like 'stern' or 'geo'. -
cgid
- Category Id - Defines the category like 'einzelausgaben' or 'sonderausgaben'. - * Either brand or cgid or both should be provided.
-
-
Optional
-
medium
- print | digital - Defines the medium value -
numberOfItems
- 4 | number - Defines the number of items to be visible in the carousel
-
-
Mandatory
-
Example
$include('Include-SingleIssue', 'brand', 'stern', 'medium', 'digital', 'numberOfItems', '6')$ $include('Include-SingleIssue', 'cgid', 'sonderausgaben', 'medium', 'print', 'numberOfItems', '6')$ $include('Include-SingleIssue', 'brand', 'stern', 'cgid', 'sonderausgaben', 'medium', 'print', 'numberOfItems', '6')$
-
-
PrePdp Cover Includes
-
Include
$include('Include-PrePdpCover', 'brand', '[brand]')$ $include('Include-PrePdpCover', 'pid', '[product id]')$
-
Parameters
-
Mandatory
-
brand
- Brand Name - Defines the brand like 'STERN' or 'GEO'. -
pid
- Product Id - Defines the product. - * Either brand or pid should be provided.
-
-
Mandatory
-
Example
$include('Include-PrePdpCover', 'brand', 'STERN')$ $include('Include-PrePdpCover', 'pid', '8912')$
-