Gewähltes Land:
Flagge Deutschland Deutschland
Weitere Länder:
Menü
Gewähltes Land:
Flagge Deutschland Deutschland
Weitere Länder:
0
Warenkorb
Zum Warenkorb

Warenkorb

Zwischensumme
inkl. MwSt.
Zum Warenkorb Zur Kasse

N-TV - Styleguide

  1. Index

    1. General information
    2. Breakpoints, Media Queries, Show-Hide
      1. Breakpoints
      2. Media queries
      3. Exclude elements from view (display: none;)
      4. Hide elements from view (just visually hidden)
      5. Force elements to be shown as block-element (display: block;)
      6. Force elements to be shown as inline-block-element (display: inline-block;)
      7. Force elements to be shown as inline-element (display: inline;)
      8. Force elements to be shown as flex-element (display: flex;)
      9. Force elements to be shown as inline-flex-element (display: inline-flex;)
    3. Grid
      1. Description
      2. Example: Stacked-to-horizontal
      3. Example: Small, medium, large
      4. Example: Column wrapping
      5. Example: Offsetting columns
      6. Example: Nesting columns
      7. Example: Remove Gutter
      8. Example: Remove gutter on the left/right only
    4. Page Sections
      1. Outer Spacing (default)
      2. Inner Spacing
      3. More Options
    5. Colors
      1. Brand specific
      2. Shades of Grey
      3. Component specific
    6. Icons
      1. Module / Include
      2. Parameters
      3. List
    7. Typography
      1. Headings
      2. Links
      3. Alignment
    8. Forms
      1. Inputfields
        1. Module
        2. Parameters
        3. Styling Options
        4. Examples: Textfields
        5. Examples: Selects
        6. Examples: Textareas
        7. Examples: Checkboxes
        8. Examples: Radios
        9. Examples: Multiple Inputs in one Row
      2. Buttons
        1. Primary
        2. Primary (Bounty)
        3. Secondary
        4. Secondary (Bounty)
        5. Tertiary
        6. Filter
        7. Large
        8. Small
        9. PayPal
        10. Apple Store
        11. Google Store
      3. Tooltips
      4. Messages
        1. Error
        2. Warning
        3. Success
        4. Info
    9. Linking
      1. Product Pages
      2. Category Pages
      3. Asset Pages
      4. Home Page
      5. Account Overview Page
      6. Emails
      7. Phone Numbers
    10. Pictures
      1. Tag
      2. Include
      3. Module
    11. Modals
      1. Module
      2. Include
      3. Parameters
      4. Example
    12. Carousels
      1. Functional Markup
      2. Parameters
      3. Viewport dependent Config
      4. Example
    13. Accordions & Toggles
      1. Functional Markup
      2. Parameters
      3. Viewport dependent Config
      4. Example
    14. Tabs
      1. Functional Markup
      2. Classes and attributes
      3. Example
    15. Category Tile Includes
      1. Include
      2. Parameters
      3. Examples: Wide Tiles
      4. Examples: Medium Tiles
      5. Examples: Medium (Inline) Tiles
      6. Examples: Small Tiles
    16. Category Carousel Includes
      1. Include
      2. Parameters
      3. Example: Wide Tiles
      4. Example: Medium Tiles
      5. Example: Medium (Inline) Tiles
      6. Example: Small Tiles
    17. Product Carousel Includes
      1. Include
      2. Parameters
      3. Example (format normal)
      4. Example (format teaserWide)
      5. Example (cgid einzelhefte)
      6. Example (brand GEO EPOCHE, max 4 products)
      7. Example (pids, cgid, brand)
    18. Product Tile Includes
      1. Include
      2. Parameters
      3. Example
    19. Subscription Tile Includes
      1. Include
      2. Parameters
      3. Example
    20. Current Issue Includes
      1. Include
      2. Parameters
      3. Example
    21. Current Issue Short Includes
      1. Include
      2. Parameters
      3. Example
    22. Other Issues Includes
      1. Include
      2. Parameters
      3. Example
    23. Single Issue Includes
      1. Include
      2. Parameters
      3. Example
    24. PrePdp Cover Includes
      1. Include
      2. Parameters
      3. Example

  2. 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).

  3. Breakpoints, Media Queries, Show-Hide

    1. 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

    2. 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

    3. Exclude elements from view (display: none;)

      • Exclude in general // Class .u-hide // Mixin hide
      • Exclude from small viewports (0 - 767) // Class .u-hideSmall // Mixin hide-small
      • Exclude from medium viewports (768 - 991) // Class .u-hideMedium // Mixin hide-medium
      • Exclude from large viewports (992 - 1199) // Class .u-hideLarge // Mixin hide-large
      • Exclude from x-large viewports (1200+) // Class .u-hideXlarge // Mixin hide-xlarge

    4. Hide elements from view (just visually hidden)

      • Hide in general // Class .u-visHidden // Mixin vis-hidden
      • Hide on small viewports (0 - 767) // Class .u-visHiddenSmall // Mixin vis-hidden-small
      • Hide on medium viewports (768 - 991) // Class .u-visHiddenMedium // Mixin vis-hidden-medium
      • Hide on large viewports (992 - 1199) // Class .u-visHiddenLarge // Mixin vis-hidden-large
      • Hide on x-large viewports (1200+) // Class .u-visHiddenXlarge // Mixin vis-hidden-xlarge

    5. 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 // Mixin show
      • Show on small viewports (0 - 767) // Class .u-showSmall // Mixin show-small
      • Show on medium viewports (768 - 991) // Class .u-showMedium // Mixin show-medium
      • Show on large viewports (992 - 1199) // Class .u-showLarge // Mixin show-large
      • Show on x-large viewports (1200+) // Class .u-showXlarge // Mixin show-xlarge

    6. 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 // Mixin show-inline-block
      • Show on small viewports (0 - 767) // Class .u-showInlineBlockSmall // Mixin show-inline-block-small
      • Show on medium viewports (768 - 991) // Class .u-showInlineBlockMedium // Mixin show-inline-block-medium
      • Show on large viewports (992 - 1199) // Class .u-showInlineBlockLarge // Mixin show-inline-block-large
      • Show on x-large viewports (1200+) // Class .u-showInlineBlockXlarge // Mixin show-inline-block-xlarge

    7. 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 // Mixin show-inline
      • Show on small viewports (0 - 767) // Class .u-showInlineSmall // Mixin show-inline-small
      • Show on medium viewports (768 - 991) // Class .u-showInlineMedium // Mixin show-inline-medium
      • Show on large viewports (992 - 1199) // Class .u-showInlineLarge // Mixin show-inline-large
      • Show on x-large viewports (1200+) // Class .u-showInlineXlarge // Mixin show-inline-xlarge

    8. 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 // Mixin show-flex
      • Show on small viewports (0 - 767) // Class .u-showFlexSmall // Mixin show-flex-small
      • Show on medium viewports (768 - 991) // Class .u-showFlexMedium // Mixin show-flex-medium
      • Show on large viewports (992 - 1199) // Class .u-showFlexLarge // Mixin show-flex-large
      • Show on x-large viewports (1200+) // Class .u-showFlexXlarge // Mixin show-flex-xlarge

    9. 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 // Mixin show-inline-flex
      • Show on small viewports (0 - 767) // Class .u-showInlineFlexSmall // Mixin show-inline-flex-small
      • Show on medium viewports (768 - 991) // Class .u-showInlineFlexMedium // Mixin show-inline-flex-medium
      • Show on large viewports (992 - 1199) // Class .u-showInlineFlexLarge // Mixin show-inline-flex-large
      • Show on x-large viewports (1200+) // Class .u-showInlineFlexXlarge // Mixin show-inline-flex-xlarge

  4. Grid

    1. 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.
      • 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.
      • 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.
      • Confused now? May the following examples enlighten you...

    2. 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.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12 
      <!-- 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);
      }
    }
  }
}

    3. Example: Small, medium, large

      Build on the previous examples we create even more dynamic and powerful layouts with an additional media query.

      1
      2
      3
      4
      5
      6 
      <!-- 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);
      }
    }
  }
}

    4. 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.

      1
      2
      3 
      <!-- 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);
      }
    }
  }
}

    5. Example: Offsetting columns

      Add an offset to the left or right side of a column // Mixin push(*) or pull(*)

      1
      2
      3
      4 
      <!-- 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);
      }
    }
  }
}

    6. Example: Nesting columns

      You are also able to nest a grid row into a column

      1
      2.1
      2.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);
      }
    }
  }
}

    7. 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(*)

      1
      2
      3
      4
      5
      6 
      <!-- 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);
      }
    }
  }
}

    8. 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(*) or span-no-gutter-right(*)

      1
      2
      3
      4
      5
      6 
      <!-- 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);
      }
    }
  }
}

  5. Page Sections

    1. Outer Spacing (default)

      Use with components on white background, where top/bottom margins collapse into each other. // Class .pageSection // Mixin page-section


      ...
      ...
      ...
      ...
      ...
      [Content]
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      [Content]
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      ...
      [Content]
      ...
      ...
      ...
      ...
      ...

    2. 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 // Mixin page-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]
      ...
      ...
      ...
      ...
      ...

    3. 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.

  6. Colors

    1. Brand specific

      • // Variable: $color-primary
      • // Variable: $color-primary-dark

    2. Shades of Grey

      • // Variable: $color-black
      • // Variable: $color-grey-xdark
      • // Variable: $color-grey-dark
      • // Variable: $color-grey-medium
      • // Variable: $color-grey-light
      • // Variable: $color-grey-xlight
      • // Variable: $color-white

    3. Component specific

      • // Variable: $color-error
      • // Variable: $color-success
      • // Variable: $color-bounty
      • // Variable: $color-bounty-dark
      • // Variable: $color-sale
      • // Variable: $color-badge
      • // Variable: $color-badge-new
      • // Variable: $color-message-error
      • // Variable: $color-message-warning
      • // Variable: $color-message-success
      • // Variable: $color-message-info

  7. Icons

    1. 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]')$

    2. 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)

    3. 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
      • + 1
        // 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
      • internet-of-things
        // 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 ID motherboard
      • // 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 ID change-14

  8. Typography

    1. 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

    2. Links

      Click me - I'm a default link // Class: .link

      Click me - I'm a link without underline // Class: .link + .link--noUnderline

      Click me - I'm a link without underline and an icon // Class: .link + .link--noUnderline + .link--hasIcon

    3. 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

  9. Forms

    1. Inputfields

      1. Module

        Please use <isinputfield /> whereever possible to render a form row containing an inputfield.

      2. 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 to off 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.

      3. Styling Options

        • Large Inputs
          • Add inputText--large via parameter rowclass to get a large textinput
          • Add inputSelect--large via parameter rowclass to get a large select
          • Please note that this will only affect textfields and selects
        • Small Inputs
          • Add inputText--small via parameter rowclass to get a small textinput
          • Add inputSelect--small via parameter rowclass to get a small select
          • Please note that this will only affect textfields and selects
        • Inline Radio buttons
          • Add inputGroupRadio--gridStyle via parameter rowclass to align radios vertically with default grid-gutter-spacing. Use SUSY grid mixins to control the width of the radio labels.
        • 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

      4. Examples: Textfields

      5. Examples: Selects

      6. Examples: Textareas

      7. Examples: Checkboxes

        Checkbox Group
        Checkbox Group - With Checkbox Tooltip
        Checkbox Group - No Label


        Checkbox Group - No Label

      8. Examples: Radios

        Default
        Mandatory*
        Disabled
        Error
        With Tooltip Tooltip
        Grid Style
        No Label


        No Label

      9. Examples: Multiple Inputs in one Row

    2. Buttons

      1. Primary

        // Class: .button + .button--primary

      2. Primary (Bounty)

        // Class: .button + .button--primary + .button--bounty

      3. Secondary

        // Class: .button + .button--secondary

      4. Secondary (Bounty)

        // Class: .button + .button--secondary + .button--bounty

      5. Tertiary

        // Class: .button + .button--tertiary

      6. Filter

        // Class: .button + .button--filter

      7. Large

        // Class: .button + .button--large + .button--primary

      8. Small

        // Class: .button + .button--small + .button--primary

      9. PayPal

        // Class: .button + .button--large + .button--paypal

      10. Apple Store

        // Class: .button + .button--large + .button--appleStore

      11. Google Store

        // Class: .button + .button--large + .button--googleStore

    3. Tooltips

      Vestibulum id ligula porta felis euismod semper.
      Vestibulum id ligula porta felis euismod semper.

    4. Messages

      1. Error

        Error: Vestibulum id ligula porta felis euismod semper.

      2. Warning

        Warning: Vestibulum id ligula porta felis euismod semper.

      3. Success

        Success: Vestibulum id ligula porta felis euismod semper.

      4. Info

        Info: Vestibulum id ligula porta felis euismod semper.

  10. Linking

    If you want to link pages in content assets, please use the following snippets as values inside the href="" attribute of the <a> tag, regarding on the target.

    1. 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

    2. Category Pages 

      
  $url('Search-Show', 'cgid', '[Category ID]')$

      To filter Products on Category pages, append prefnX and prefvX 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')$

    3. Asset Pages 

      
  $url('Page-Show', 'cid', '[Content Asset ID]')$

    4. Home Page 

      
  $url('Home-Show')$

    5. Account Overview Page 

      
  $url('Account-Show')$

      If the customer is not logged in, he/ she will be redirected to the login page.

    6. Emails 

      
  mailto:me@xyz.de

    7. Phone Numbers 

      
  tel:123456789

  11. Pictures

    1. Tag

      • For images please use the picture tag, which gives you more flexibility in specifying image resources than a img 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 more source tags and one img 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 following source tags.
      • The img element is required as the last child tag of the picture declaration block. The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source 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>

    2. 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 the picture tag
        • imageclass - Add a HTML class set on the img tag

      Example: Include

      
$include('Include-Picture', 'src', '[...]', 'sm', '[...]', 'md', '[...]', 'lg', '[...]', 'xl', '[...]', 'pictureclass', '[...]', 'imageclass', '[...]', 'alttext', '[...]')$

    3. 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 the picture tag
        • imageclass - Add a HTML class set on the img 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

      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
  }
}

  12. Modals

    1. 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]" />

    2. 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]')$

    3. 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
      * Default values are marked by bold text

    4. 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]')$

  13. Carousels

    1. 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>

    2. Parameters

      [JSONConfigID] - A JSON string with all necessary configuration parameters (usable within the data attribute data-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
      * Default values are marked by bold text

    3. 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 and xl. 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>

    4. 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>

  14. Accordions & Toggles

    1. 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>

    2. Parameters

      [JSONConfigID] - A JSON string with all necessary configuration parameters (usable within the data attribute accordionconfig)

      • 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
      * Default values are marked by bold text

    3. 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>

    4. Example 

      <!-- 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>

  15. Tabs

    1. 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>

    2. 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.

    3. 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>

  16. Category Tile Includes

    1. Include 

      
$include('Include-CategoryTile', 'cgid', '[...]', 'format', '[...]')$

    2. 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')
      * Default values are marked by bold text

    3. Examples: Wide Tiles 

      $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide')$

    4. Examples: Medium Tiles 

      $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium')$

    5. Examples: Medium (Inline) Tiles 

      $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline')$

    6. Examples: Small Tiles 

      $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small')$

  17. Category Carousel Includes

    1. Include 

      
$include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', '[...]')$

    2. 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')
      * Default values are marked by bold text

    3. Example: Wide Tiles 

      $include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'wide')$

    4. Example: Medium Tiles 

      $include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'medium')$

    5. Example: Medium (Inline) Tiles 

      $include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'mediumInline')$

    6. Example: Small Tiles 

      $include('Include-CategoryCarousel', 'cgids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', 'small')$

  18. Product Carousel Includes

    1. Include 

      
$include('Include-ProductsCarousel', 'pids', '[...]+[...]+[...]+[...]+[...]+[...]', 'format', '[normal | teaserWide]', 'reversed', 'true', ...)$

    2. 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

    3. Example (format normal) 

      $include('Include-ProductsCarousel', 'pids', '1829525+1829525+1829525+1829525+1829525+1829525', 'format', 'normal')$

    4. Example (format teaserWide) 

      $include('Include-ProductsCarousel', 'pids', '1829525+1829525+1829525+1829525+1829525+1829525', 'format', 'teaserWide', 'reversed', 'false', 'highlighted', 'true', 'noBorder', 'false', 'noIndent', 'false', 'linked','false', 'showButton', 'true', 'secondaryButton', 'false', 'image', 'true', 'mediaPreview', 'true', 'productName', 'true', 'badges', 'true', 'offerUsp', 'true', 'price', 'true')$

    5. Example (cgid einzelhefte) 

      $include('Include-ProductsCarousel', 'cgid', 'einzelhefte', 'format', 'normal')$

    6. Example (brand GEO EPOCHE, max 4 products) 

      $include('Include-ProductsCarousel', 'brand', 'GEO EPOCHE', 'format', 'normal', 'maxProducts', '4')$

    7. Example (pids, cgid, brand) 

      $include('Include-ProductsCarousel', 'pids', '1987206+2005339+2026411', 'cgid', 'einzelhefte', 'brand', 'WALDEN', 'format', 'normal', 'maxProducts', '8')$

  19. Product Tile Includes

    1. Include 

      
$include('Include-ProductTile', 'pid', '[pid]', 'format', '[teaserWide | teaserSmall]', ..., 'contentLinkId', '[contentLinkId]')$

    2. 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)

    3. Example

      null
      Zum Abo 
      $include('Include-ProductTile', 'pid', '1879485', 'format', 'teaserWide')$

  20. Subscription Tile Includes

    1. Include 

      
$include('Include-SubscriptionTile', 'pid', '[pid]', 'mediumValue', '[print | digital | print-digital]', 'highlighted', '[true | false]')$

    2. 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

    3. Example

      Print
      null
      Zum Abo
      Zum Abo 
      $include('Include-SubscriptionTile', 'pid', '1879485', 'mediumValue', 'print', 'highlighted', 'true')$

  21. Current Issue Includes

    1. Include 

      
$include('Include-CurrentIssue', 'brand', '[brand]')$

    2. Parameters

      • Mandatory
        • brand - Brand Name - Defines the brand like 'stern' or 'geo'.

    3. Example 

      $include('Include-CurrentIssue', 'brand', 'stern')$

  22. Current Issue Short Includes

    1. Include 

      
$include('Include-CurrentIssueShort', 'brand', '[brand]')$

    2. Parameters

      • Mandatory
        • brand - Brand Name - Defines the brand like 'stern' or 'geo'.

    3. Example 

      $include('Include-CurrentIssueShort', 'brand', 'stern')$

  23. Other Issues Includes

    1. Include 

      
$include('Include-OtherIssues', 'brand', '[brand]')$

    2. Parameters

      • Mandatory
        • brand - Brand Name - Defines the brand like 'stern' or 'geo'.

    3. Example 

      $include('Include-OtherIssues', 'brand', 'stern')$

  24. Single Issue Includes

    1. Include 

      
$include('Include-SingleIssue', 'brand', '[brand]', 'cgid', '[category id]', 'medium', '[print | digital]', 'numberOfItems', '[number of items]')$

    2. 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

    3. 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')$

  25. PrePdp Cover Includes

    1. Include 

      
$include('Include-PrePdpCover', 'brand', '[brand]')$
$include('Include-PrePdpCover', 'pid', '[product id]')$

    2. 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.

    3. Example


      stern-Wunschabo 
      $include('Include-PrePdpCover', 'brand', 'STERN')$
$include('Include-PrePdpCover', 'pid', '8912')$