GEO - Content Library

Index
1. Content Sections
2. Snippets

Content Sections

General Information
- To handle the spacing between content sections, we use two different classes. .pageSection and .pageSectionInner.
- .pageSection adds an outer spacing (margin) at the top and bottom of a component. Margins of consecutive components merge into each other.
- .pageSectionInner adds an inner spacing (padding) at the top and bottom of a component. Paddings of consecutive components doesn't merge into each other. This means that this class should be used for components with a background color that differs from the <body>.
- For further information (including an visual example) please have a look at the styleguide (section 'page sections')
- Of course, it is possible to combine both classes to add a inner and outer vertical spacing.
- To change the background color of a component to a slightly grey, just use the class .pageSection--backgroundGrey. This class should normally only be used in combination with .pageSectionInner.
- Additionally you are able to add a border at the top or the bottom of a component section by adding class .pageSection--borderTop / .pageSection--borderBottom
- If you want to remove the spacing at the top or the bottom of a component section just add class .pageSection--noSpacingTop / .pageSection--noSpacingBottom
- If you want to add an (one column wide) indention on screens up from 1200 pixels, just add class .pageSection--indented
- If you are searching for more general information regarding the frontend, just have a look at the styleguide. This page contains e.g. information about the grid system, typography, colors, icons, form elements, buttons, pictures, includes etc.
- Summarized, content sections should always follow the general markup below:
```
<section class="pageSection">
  

  <div class="pageSection__container">
    <div class="pageSection__content">

      <div class="pageSection__heading">
        [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed]
      </div>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

      [Content]

    </div>
  </div>
</section>
          
```

Basic Content Section Components

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

(Optional) Button

<!-- Basic Content Section Components -->

<section class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <h2 class="pageSection__heading">
        [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed]
      </h2>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

      <div class="pageSection__buttonWrapper">
        <a href="[...]" class="button button--primary button--large" aria-hidden="false" tabindex="0">
          [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed]
        </a>
      </div>

    </div>
  </div>
</section>

Logo with Subheading

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

<!-- Logo with Subheading -->

<section class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <h2 class="pageSection__heading">
        $include('Include-Picture', 'src', '[Image path from library]', 'sm', '166', 'md', '228', 'lg', '228', 'xl', '290', 'alttext', 'Logo')$
      </h2>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

    </div>
  </div>
</section>

To avoid crispy images on high-resolution screens, please make sure to include the image with (at least) double width as it will be displayed. The image will be scaled down by a fixed height via CSS and we get nice clean edges...

Teaser Grid containing Category Tiles (Category Tile Includes)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

<!-- Teaser Grid containing Category Tiles (Category Tile Includes) -->

<div class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <h2 class="pageSection__heading">
        [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed]
      </h2>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

      <div class="teaserGrid">

        <!-- Teaser Grid - 1 Column -->

        <div class="teaserGrid__row teaserGrid__row--1col">
          <div class="teaserGrid__col">

            <!-- Teaser - Wide -->

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

          </div>
        </div>

        <!-- Teaser Grid - 1 Column -->

        <div class="teaserGrid__row teaserGrid__row--1col">
          <div class="teaserGrid__col">

            <!-- Teaser - Wide (Reverse) -->

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

          </div>
        </div>

        <!-- Teaser Grid - 2 Columns -->

        <div class="teaserGrid__row teaserGrid__row--2cols">
          <div class="teaserGrid__col">

            <!-- Teaser - Medium -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Medium (Reverse) -->

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

          </div>
        </div>

        <!-- Teaser Grid - 2 Columns -->

        <div class="teaserGrid__row teaserGrid__row--2cols">
          <div class="teaserGrid__col">

            <!-- Teaser - Medium -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Medium (Reverse) -->

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

          </div>
        </div>

        <!-- Teaser Grid - 3 Columns -->

        <div class="teaserGrid__row teaserGrid__row--3cols">
          <div class="teaserGrid__col">

            <!-- Teaser - Small -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Small -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Small -->

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

          </div>
        </div>

        <!-- Teaser Grid - 4 Columns -->

        <div class="teaserGrid__row teaserGrid__row--4cols">
          <div class="teaserGrid__col">

            <!-- Teaser - Small (Reverse) -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Small (Reverse) -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Small (Reverse) -->

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

          </div>

          <div class="teaserGrid__col">

            <!-- Teaser - Small (Reverse) -->

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

          </div>
        </div>
      </div>

      <div class="pageSection__buttonWrapper">
        <a href="[...]" class="button button--secondary button--large" aria-hidden="false" tabindex="0">
          [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed]
        </a>
      </div>

    </div>
  </div>
</div>

For more detailed information and further options about category tile includes, please have a look at the styleguide (section 'category tile includes')

Carousel containing Category Tiles (Category Carousel Include)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

(Optional) Button

<!-- Carousel containing Category Tiles (Category Carousel Include) -->

<section class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <h2 class="pageSection__heading">
        [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed]
      </h2>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

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

      <div class="pageSection__buttonWrapper">
        <a href="[...]" class="button button--secondary button--large" aria-hidden="false" tabindex="0">
          [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed]
        </a>
      </div>

    </div>
  </div>
</section>

For more detailed information and further options about the category carousel include, please have a look at the styleguide (section 'category carousel include')

Carousel containing Product Tiles (Product Carousel Include)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

(Optional) Button

<!-- Carousel containing Product Tiles (Product Carousel Include) -->

<section class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <h2 class="pageSection__heading">
        [Optional Heading - Remove the whole wrapping container ('pageSection__heading') if not needed]
      </h2>

      <div class="pageSection__subheading">
        [Optional Subheading - Remove the whole wrapping container ('pageSection__subheading') if not needed]
      </div>

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

      <div class="pageSection__buttonWrapper">
        <a href="[...]" class="button button--secondary button--large" aria-hidden="false" tabindex="0">
          [Optional Button - Remove the whole wrapping container ('pageSection__buttonWrapper') if not needed]
        </a>
      </div>

    </div>
  </div>
</section>

For more detailed information and further options about the product carousel include, please have a look at the styleguide (section 'product carousel include')

Text Block
This is a heading (level 1)

This is a heading (level 2)

This is a heading (level 3)

This is a heading (level 4)

This is a heading (level 5)

This is a heading (level 6)

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

<section class="pageSection pageSection--indented"> <div class="pageSection__container"> <div class="pageSection__content"> <h1 class="heading heading--1"> [Heading 1] </h1> <h2 class="heading heading--2"> [Heading 2] </h2> <h3 class="heading heading--3"> [Heading 3] </h3> <h4 class="heading heading--4"> [Heading 4] </h4> <h5 class="heading heading--5"> [Heading 5] </h5> <h6 class="heading heading--6"> [Heading 6] </h6> <p> [Paragraph] </p> <p> [Paragraph] </p> <p> [Paragraph] </p> </div> </div> </section>

Icon Grid

Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
Sed: Diam nonumy eirmod tempor invidunt ut labore
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

<!-- Icon Grid -->

<section class="pageSection">
  <div class="pageSection__container">
    <div class="pageSection__content">

      <div class="iconGrid__row">
        <div class="iconGrid__content">
          <ul class="iconGrid__list">
            <li class="iconGrid__listItem">
              <div class="iconGrid__iconWrapper">
                $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconGrid__icon')$
              </div>
              <div class="iconGrid__text">
                <strong>
                  [Label]
                </strong>
                [Text]
              </div>
            </li>

            <li class="iconGrid__listItem">
              [...]
            </li>

            <li class="iconGrid__listItem">
              [...]
            </li>

            <li class="iconGrid__listItem">
              [...]
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</section>

Snippets

Teaser Grid

Teaser Grid - 1 Column
Teaser 1

<div class="teaserGrid"> <div class="teaserGrid__row teaserGrid__row--1col"> <div class="teaserGrid__col"> [Teaser] </div> </div> </div>
To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container

To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col container
Teaser Grid - 2 Columns
Teaser 1

Teaser 2

<div class="teaserGrid"> <div class="teaserGrid__row teaserGrid__row--2cols"> <div class="teaserGrid__col"> [Teaser] </div> <div class="teaserGrid__col"> [...] </div> </div> </div>
To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container

To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col container
Teaser Grid - 3 Columns
Teaser 1

Teaser 2

Teaser 3

<div class="teaserGrid"> <div class="teaserGrid__row teaserGrid__row--3cols"> <div class="teaserGrid__col"> [Teaser] </div> <div class="teaserGrid__col"> [...] </div> <div class="teaserGrid__col"> [...] </div> </div> </div>
To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container

To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col container
Teaser Grid - 4 Columns (Version 1)
Teaser 1

Teaser 2

Teaser 3

Teaser 4

<div class="teaserGrid"> <div class="teaserGrid__row teaserGrid__row--4cols"> <div class="teaserGrid__col"> [Teaser] </div> <div class="teaserGrid__col"> [...] </div> <div class="teaserGrid__col"> [...] </div> <div class="teaserGrid__col"> [...] </div> </div> </div>
To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container

To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col container

Teaser Grid - 4 Columns (Version 2)

Teaser 1

Teaser 2

Teaser 3

Teaser 4

<!-- Teaser Grid - 4 Columns (Version 2) -->

<div class="teaserGrid">
  <div class="teaserGrid__row teaserGrid__row--4cols">
    <div class="teaserGrid__col--v2">
      [Teaser]
    </div>

    <div class="teaserGrid__col--v2">
      [...]
    </div>

    <div class="teaserGrid__col--v2">
      [...]
    </div>

    <div class="teaserGrid__col--v2">
      [...]
    </div>
  </div>
</div>

To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container
To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col--v2 container

Teaser Grid - Combination of Rows with differing Count of Columns

Teaser 1

Teaser 2

Teaser 3

Teaser 4

Teaser 5

Teaser 6

Teaser 7

Teaser 8

Teaser 9

Teaser 10

<!-- Teaser Grid - Combination of Rows with differing Count of Columns -->

<div class="teaserGrid">
  <div class="teaserGrid__row teaserGrid__row--1col">
    <div class="teaserGrid__col">
      [Teaser 1]
    </div>
  </div>

  <div class="teaserGrid__row teaserGrid__row--2cols">
    <div class="teaserGrid__col">
      [Teaser 2]
    </div>
    <div class="teaserGrid__col">
      [Teaser 3]
    </div>
  </div>

  <div class="teaserGrid__row teaserGrid__row--3cols">
    <div class="teaserGrid__col">
      [Teaser 4]
    </div>
    <div class="teaserGrid__col">
      [Teaser 5]
    </div>
    <div class="teaserGrid__col">
      [Teaser 6]
    </div>
  </div>

  <div class="teaserGrid__row teaserGrid__row--4cols">
    <div class="teaserGrid__col">
      [Teaser 7]
    </div>
    <div class="teaserGrid__col">
      [Teaser 8]
    </div>
    <div class="teaserGrid__col">
      [Teaser 9]
    </div>
    <div class="teaserGrid__col">
      [Teaser 10]
    </div>
  </div>
</div>

To add an (one column wide) indention on screens up from 1200 pixels, just add class teaserGrid--indented at the teaserGrid container
To force a column to be shown as first element of the grid just add teaserGrid__col--firstOnMobile at the according teaserGrid__col container

Teaser

Teaser - Large

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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

(Optional) Button

<!-- Teaser - Large -->

<div class="teaserLarge">
  <h2 class="teaserLarge__heading pageSection__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed]
  </h2>

  <div class="teaserLarge__subheading pageSection__subheading">
    [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed]
  </div>

  <div class="teaserLarge__contentWrapper">
    <div class="teaserLarge__row">
      <div class="teaserLarge__content">
        <div class="teaserLarge__imageWrapper">
          [Optional Picture Include - Remove the whole wrapping container ('teaserLarge__imageWrapper') if not needed]
          $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '600', 'lg', '600', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$
        </div>

        <div class="teaserLarge__textWrapper">
          [Optional Desription Text - Remove the whole wrapping container ('teaserLarge__textWrapper') if not needed]
        </div>

        <div class="teaserLarge__buttonWrapper">
          <a href="[...]" class="teaserLarge__button button button--primary button--large" tabindex="0" aria-hidden="false">
            [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed]
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserLarge--noBorder at the teaserLarge container.
To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.
If you remove the border via teaserLarge--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, just add class teaserLarge--noIndent at the teaserLarge container.

Teaser - Large (With App Store Buttons)
(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) 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="teaserLarge"> <h2 class="teaserLarge__heading pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed] </h2> <div class="teaserLarge__subheading pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed] </div> <div class="teaserLarge__contentWrapper"> <div class="teaserLarge__row"> <div class="teaserLarge__content"> <div class="teaserLarge__imageWrapper"> [Optional Picture Include - Remove the whole wrapping container ('teaserLarge__imageWrapper') if not needed] $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '600', 'lg', '600', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$ </div> <div class="teaserLarge__textWrapper"> [Optional Desription Text - Remove the whole wrapping container ('teaserLarge__textWrapper') if not needed] </div> <div class="teaserLarge__buttonWrapper"> <a href="[...]" class="teaserLarge__button button button--large button--appleStore" tabindex="0" aria-hidden="false"> $include('SVGIcon-Render', 'iconid', 'apple-store', 'classname', 'button__icon')$ </a> <a href="[...]" class="teaserLarge__button button button--large button--googleStore" tabindex="0" aria-hidden="false"> $include('SVGIcon-Render', 'iconid', 'google-play', 'classname', 'button__icon')$ </a> </div> </div> </div> </div> </div>
If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.

To remove the grey border and inner spacing of the teaser, just add class teaserLarge--noBorder at the teaserLarge container.

To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

If you remove the border via teaserLarge--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, just add class teaserLarge--noIndent at the teaserLarge container.

These custom app-store-buttons can also be used in other teaser formats. In this case, please note, that it could be necessary to replace .teaserLarge__button by .teaserWide__button, .teaserMedium__button or .teaserSmall__button depending on the teaser format to get the correct view.

Teaser - Large (Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Large (Linked) -->

<a class="teaserLarge teaserLarge--link" href="[...]" tabindex="0" aria-hidden="false">
  <h2 class="teaserLarge__heading pageSection__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed]
  </h2>

  <div class="teaserLarge__subheading pageSection__subheading">
    [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed]
  </div>

  <div class="teaserLarge__contentWrapper">
    <div class="teaserLarge__row">
      <div class="teaserLarge__content">
        <div class="teaserLarge__imageWrapper">
          [Optional Picture Include - Remove the whole wrapping container ('teaserLarge__imageWrapper') if not needed]
          $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '600', 'lg', '600', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$
        </div>

        <div class="teaserLarge__textWrapper">
          [Optional Desription Text - Remove the whole wrapping container ('teaserLarge__textWrapper') if not needed]
        </div>

        <div class="teaserLarge__buttonWrapper">
          <div class="teaserLarge__button button button--primary button--large">
            [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed]
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

Teaser - Large (2 Columns)
(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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.

(Optional) Button

<div class="teaserLarge teaserLarge--2cols"> <h2 class="teaserLarge__heading pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed] </h2> <div class="teaserLarge__subheading pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed] </div> <div class="teaserLarge__contentWrapper"> <div class="teaserLarge__row"> <div class="teaserLarge__content"> <div class="teaserLarge__imageWrapper"> $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '423', 'lg', '511', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$ </div> <div class="teaserLarge__textWrapper"> [Descriptional Text] </div> <div class="teaserLarge__buttonWrapper"> <a href="[...]" class="teaserLarge__button button button--primary button--large" tabindex="0" aria-hidden="false"> [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed] </a> </div> </div> </div> </div> </div>
If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.

To remove the grey border and inner spacing of the teaser, just add class teaserLarge--noBorder at the teaserLarge container.

To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

If you remove the border via teaserLarge--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, just add class teaserLarge--noIndent at the teaserLarge container.

Teaser - Large (2 Columns & Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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.

(Optional) Button

<!-- Teaser - Large (2 Columns & Linked) -->

<a class="teaserLarge teaserLarge--2cols teaserLarge--link" href="[...]" tabindex="0" aria-hidden="false">
  <h2 class="teaserLarge__heading pageSection__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed]
  </h2>

  <div class="teaserLarge__subheading pageSection__subheading">
    [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed]
  </div>

  <div class="teaserLarge__contentWrapper">
    <div class="teaserLarge__row">
      <div class="teaserLarge__content">
        <div class="teaserLarge__imageWrapper">
          $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '423', 'lg', '511', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$
        </div>

        <div class="teaserLarge__textWrapper">
          [Descriptional Text]
        </div>

        <div class="teaserLarge__buttonWrapper">
          <div class="teaserLarge__button button button--primary button--large">
            [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed]
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

Teaser - Large (2 Columns & Reversed)
(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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.

(Optional) Button

<div class="teaserLarge teaserLarge--2colsReverse"> <h2 class="teaserLarge__heading pageSection__heading"> [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed] </h2> <div class="teaserLarge__subheading pageSection__subheading"> [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed] </div> <div class="teaserLarge__contentWrapper"> <div class="teaserLarge__row"> <div class="teaserLarge__content"> <div class="teaserLarge__imageWrapper"> $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '423', 'lg', '511', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$ </div> <div class="teaserLarge__textWrapper"> [Descriptional Text] </div> <div class="teaserLarge__buttonWrapper"> <a href="[...]" class="teaserLarge__button button button--primary button--large" tabindex="0" aria-hidden="false"> [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed] </a> </div> </div> </div> </div> </div>
If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.

To remove the grey border and inner spacing of the teaser, just add class teaserLarge--noBorder at the teaserLarge container.

To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

If you remove the border via teaserLarge--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, just add class teaserLarge--noIndent at the teaserLarge container.

Teaser - Large (2 Columns & Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Large (2 Columns & Reversed & Linked) -->

<a class="teaserLarge teaserLarge--2colsReverse teaserLarge--link" href="[...]" tabindex="0" aria-hidden="false">
  <h2 class="teaserLarge__heading pageSection__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserLarge__heading') if not needed]
  </h2>

  <div class="teaserLarge__subheading pageSection__subheading">
    [Optional Subheading - Remove the whole wrapping container ('teaserLarge__subheading') if not needed]
  </div>

  <div class="teaserLarge__contentWrapper">
    <div class="teaserLarge__row">
      <div class="teaserLarge__content">
        <div class="teaserLarge__imageWrapper">
          $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '423', 'lg', '511', 'xl', '600', 'pictureclass', 'teaserLarge__picture', 'imageclass', 'teaserLarge__image', 'alttext', '[...]')$
        </div>

        <div class="teaserLarge__textWrapper">
          [Descriptional Text]
        </div>

        <div class="teaserLarge__buttonWrapper">
          <div class="teaserLarge__button button button--primary button--large">
            [Optional Button - Remove the whole wrapping container ('teaserLarge__buttonWrapper') if not needed]
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserLarge--highlighted at the teaserLarge container.

Teaser - Wide
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.

(Optional) Button

<div class="teaserWide"> <div class="teaserWide__contentWrapper"> <div class="teaserWide__row"> <div class="teaserWide__content"> <div class="teaserWide__contentInner"> <div class="teaserWide__imageWrapper"> $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', '[...]')$ </div> <div class="teaserWide__textWrapper"> <div class="teaserWide__textWrapperTop"> <div class="teaserWide__heading"> [Heading] </div> <div class="teaserWide__text"> [Descriptional Text] </div> </div> <div class="teaserWide__buttonWrapper"> <a href="[...]" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false"> [Optional Button - Remove the whole wrapping container ('teaserWide__buttonWrapper') if not needed] </a> </div> </div> </div> </div> </div> </div> </div>
If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.

To remove the grey border and inner spacing of the teaser, just add class teaserWide--noBorder at the teaserWide container

To highlight the teaser with a thick border in primary color, just add class teaserWide--highlighted at the teaserWide container.

If you remove the border via teaserWide--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, just add class teaserWide--noIndent at the teaserWide container

You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide', 'linked', 'false')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Wide (Linked)

Lorem ipsum dolor sit amet

(Optional) Button

<!-- Teaser - Wide (Linked) -->

<a class="teaserWide teaserWide--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserWide__contentWrapper">
    <div class="teaserWide__row">
      <div class="teaserWide__content">
        <div class="teaserWide__contentInner">
          <div class="teaserWide__imageWrapper">
            $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', '[...]')$
          </div>

          <div class="teaserWide__textWrapper">
            <div class="teaserWide__textWrapperTop">
              <div class="teaserWide__heading">
                [Heading]
              </div>

              <div class="teaserWide__text">
                [Descriptional Text]
              </div>
            </div>

            <div class="teaserWide__buttonWrapper">
              <div class="teaserWide__button button button--primary button--large">
                [Optional Button - Remove the whole wrapping container ('teaserWide__buttonWrapper') if not needed]
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserWide--highlighted at the teaserWide container.
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Wide (Reversed)
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.

(Optional) Button

<div class="teaserWide teaserWide--reverse"> <div class="teaserWide__contentWrapper"> <div class="teaserWide__row"> <div class="teaserWide__content"> <div class="teaserWide__contentInner"> <div class="teaserWide__imageWrapper"> $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', '[...]')$ </div> <div class="teaserWide__textWrapper"> <div class="teaserWide__textWrapperTop"> <div class="teaserWide__heading"> [Heading] </div> <div class="teaserWide__text"> [Descriptional Text] </div> </div> <div class="teaserWide__buttonWrapper"> <a href="[...]" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false"> [Optional Button - Remove the whole wrapping container ('teaserWide__buttonWrapper') if not needed] </a> </div> </div> </div> </div> </div> </div> </div>
If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.

To remove the grey border and inner spacing of the teaser, just add class teaserWide--noBorder at the teaserWide container

To highlight the teaser with a thick border in primary color, just add class teaserWide--highlighted at the teaserWide container.

If you remove the border via teaserWide--noBorder, there will be an indention on screens up from 1200 pixels. If you want to remove it, additionally set class teaserWide--noIndent at the teaserWide container

You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide', 'linked', 'false', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Wide (Reversed & Linked)

Lorem ipsum dolor sit amet

(Optional) Button

<!-- Teaser - Wide (Reversed & Linked) -->

<a class="teaserWide teaserWide--reverse teaserWide--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserWide__contentWrapper">
    <div class="teaserWide__row">
      <div class="teaserWide__content">
        <div class="teaserWide__contentInner">
          <div class="teaserWide__imageWrapper">
            $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', '[...]')$
          </div>

          <div class="teaserWide__textWrapper">
            <div class="teaserWide__textWrapperTop">
              <div class="teaserWide__heading">
                [Heading]
              </div>

              <div class="teaserWide__text">
                [Descriptional Text]
              </div>
            </div>

            <div class="teaserWide__buttonWrapper">
              <div class="teaserWide__button button button--primary button--large">
                [Optional Button - Remove the whole wrapping container ('teaserWide__buttonWrapper') if not needed]
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

If you want to use this teaser inside a teaser grid, please make sure to place it only in 1-column-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserWide--highlighted at the teaserWide container.
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'wide', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Wide (3 columns)

Lorem ipsum dolor sit amet

Button

<!-- Teaser - Wide (3 columns) -->

<div class="styleguide__container">
  <div class="teaserWide teaserWide--3cols">
    <div class="teaserWide__contentWrapper">
      <div class="teaserWide__row">
        <div class="teaserWide__content">
          <div class="teaserWide__contentInner">
            <div class="teaserWide__imageWrapper">
              <picture class="picture teaserWide__picture">
                  <source media="(max-width: 767px)" srcset="https://dummyimage.com/375x200" />
                  <source media="(max-width: 991px)" srcset="https://dummyimage.com/306x420" />
                  <source media="(max-width: 1199px)" srcset="https://dummyimage.com/325x325" />
                  <source media="(min-width: 1200px)" srcset="https://dummyimage.com/492x384" />
                  <img alt="" class="picture__image teaserWide__image" src="https://dummyimage.com/492x384" />
              </picture>
            </div>
            <div class="teaserWide__textWrapper">
              <div class="teaserWide__textWrapperTop">
                <div class="teaserWide__heading">
                  Lorem ipsum dolor sit amet
                </div>
                <div class="teaserWide__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.
                </div>
              </div>
            </div>
            <div class="teaserWide__buttonWrapper">
              <a href="[...]" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                Button
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Teaser - Wide (2 columns, w/o image)

Lorem ipsum dolor sit amet

Button

<!-- Teaser - Wide (2 columns, w/o image) -->

<div class="styleguide__container">
  <div class="teaserWide teaserWide--2cols">
    <div class="teaserWide__contentWrapper">
      <div class="teaserWide__row">
        <div class="teaserWide__content">
          <div class="teaserWide__contentInner">
            <div class="teaserWide__textWrapper">
              <div class="teaserWide__textWrapperTop">
                <div class="teaserWide__heading">
                  Lorem ipsum dolor sit amet
                </div>
                <div class="teaserWide__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.
                </div>
              </div>
            </div>
            <div class="teaserWide__buttonWrapper">
              <a href="[...]" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                Button
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Teaser - Medium

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium -->

<div class="teaserMedium">
  <h3 class="teaserMedium__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
  </h3>

  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <a href="[...]" class="teaserMedium__button button button--primary button--large" tabindex="0" aria-hidden="false">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </a>
      </div>
    </div>
  </div>
</div>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserMedium--noBorder at the teaserMedium container
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium', 'linked', 'false')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Linked) -->

<a class="teaserMedium teaserMedium--link" href="[...]" tabindex="0" aria-hidden="false">
  <h3 class="teaserMedium__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
  </h3>

  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <div class="teaserMedium__button button button--primary button--large">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </div>
      </div>
    </div>
  </div>
</a>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Reversed)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Reversed) -->

<div class="teaserMedium teaserMedium--reverse">
  <h3 class="teaserMedium__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
  </h3>

  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <a href="[...]" class="teaserMedium__button button button--primary button--large" tabindex="0" aria-hidden="false">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </a>
      </div>
    </div>
  </div>
</div>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserMedium--noBorder at the teaserMedium container
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium', 'linked', 'false', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Reversed & Linked) -->

<a class="teaserMedium teaserMedium--reverse teaserMedium--link" href="[...]" tabindex="0" aria-hidden="false">
  <h3 class="teaserMedium__heading">
    [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
  </h3>

  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <div class="teaserMedium__button button button--primary button--large">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </div>
      </div>
    </div>
  </div>
</a>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'medium', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Inline)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Inline) -->

<div class="teaserMedium">
  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <h3 class="teaserMedium__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
      </h3>

      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <a href="[...]" class="teaserMedium__button button button--primary button--large" tabindex="0" aria-hidden="false">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </a>
      </div>
    </div>
  </div>
</div>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserMedium--noBorder at the teaserMedium container
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline', 'linked', 'false')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Inline & Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Inline & Linked) -->

<a class="teaserMedium teaserMedium--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <h3 class="teaserMedium__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
      </h3>

      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <div class="teaserMedium__button button button--primary button--large">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </div>
      </div>
    </div>
  </div>
</a>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Inline & Reversed)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Inline & Reversed) -->

<div class="teaserMedium teaserMedium--reverse">
  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <h3 class="teaserMedium__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
      </h3>

      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <a href="[...]" class="teaserMedium__button button button--primary button--large" tabindex="0" aria-hidden="false">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </a>
      </div>
    </div>
  </div>
</div>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserMedium--noBorder at the teaserMedium container
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline', 'linked', 'false', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Medium (Inline & Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

(Optional) Button

<!-- Teaser - Medium (Inline & Reversed & Linked) -->

<a class="teaserMedium teaserMedium--reverse teaserMedium--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserMedium__content">
    <div class="teaserMedium__imageWrapper">
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '306', 'lg', '264', 'xl', '227', 'pictureclass', 'teaserMedium__picture', 'imageclass', 'teaserMedium__image', 'alttext', '[...]')$
    </div>

    <div class="teaserMedium__textWrapper">
      <h3 class="teaserMedium__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserMedium__heading') if not needed]
      </h3>

      <div class="teaserMedium__text">
        [Optional Description - Remove the whole wrapping container ('teaserMedium__text') if not needed]
      </div>

      <div class="teaserMedium__buttonWrapper">
        <div class="teaserMedium__button button button--primary button--large">
          [Optional Button - Remove the whole wrapping container ('teaserMedium__buttonWrapper') if not needed]
        </div>
      </div>
    </div>
  </div>
</a>

This teaser should only be placed in a 2-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserMedium--highlighted at the teaserMedium container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'mediumInline', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Small

(Optional) Lorem ipsum dolor

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

(Optional) Button

<!-- Teaser - Small -->

<div class="teaserSmall">
  <div class="teaserSmall__content">
    <div class="teaserSmall__textWrapper">
      <div class="teaserSmall__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserSmall__heading') if not needed]
      </div>

      <div class="teaserSmall__text">
        [Optional Descrption Text - Remove the whole wrapping container ('teaserSmall__text') if not needed]
      </div>
    </div>

    <div class="teaserSmall__imageWrapper">
      [Optional Picture Include - Remove the whole wrapping container ('teaserSmall__imageWrapper') if not needed]
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '298', 'lg', '358', 'xl', '416', 'pictureclass', 'teaserSmall__picture', 'imageclass', 'teaserSmall__image', 'alttext', '[...]')$
    </div>
  </div>

  <div class="teaserSmall__buttonWrapper">
    <a href="[...]" class="teaserSmall__button button button--primary button--large" tabindex="0" aria-hidden="false">
      [Optional Button - Remove the whole wrapping container ('teaserSmall__buttonWrapper') if not needed]
    </a>
  </div>
</div>

This teaser should only be placed in a 3- or 4-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserSmall--noBorder at the teaserSmall container
To highlight the teaser with a thick border in primary color, just add class teaserSmall--highlighted at the teaserSmall container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small', 'linked', 'false')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Small (Linked)

(Optional) Lorem ipsum dolor

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

(Optional) Button

<!-- Teaser - Small (Linked) -->

<a class="teaserSmall teaserSmall--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserSmall__content">
    <div class="teaserSmall__textWrapper">
      <div class="teaserSmall__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserSmall__heading') if not needed]
      </div>

      <div class="teaserSmall__text">
        [Optional Descrption Text - Remove the whole wrapping container ('teaserSmall__text') if not needed]
      </div>
    </div>

    <div class="teaserSmall__imageWrapper">
      [Optional Picture Include - Remove the whole wrapping container ('teaserSmall__imageWrapper') if not needed]
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '298', 'lg', '358', 'xl', '416', 'pictureclass', 'teaserSmall__picture', 'imageclass', 'teaserSmall__image', 'alttext', '[...]')$
    </div>
  </div>

  <div class="teaserSmall__buttonWrapper">
    <div class="teaserSmall__button button button--primary button--large">
      [Optional Button - Remove the whole wrapping container ('teaserSmall__buttonWrapper') if not needed]
    </div>
  </div>
</a>

This teaser should only be placed in a 3- or 4-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserSmall--highlighted at the teaserSmall container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Small (Reversed)

(Optional) Lorem ipsum dolor

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

(Optional) Button

<!-- Teaser - Small (Reversed) -->

<div class="teaserSmall teaserSmall--reverse">
  <div class="teaserSmall__content">
    <div class="teaserSmall__textWrapper">
      <div class="teaserSmall__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserSmall__heading') if not needed]
      </div>

      <div class="teaserSmall__text">
        [Optional Descrption Text - Remove the whole wrapping container ('teaserSmall__text') if not needed]
      </div>
    </div>

    <div class="teaserSmall__imageWrapper">
      [Optional Picture Include - Remove the whole wrapping container ('teaserSmall__imageWrapper') if not needed]
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '298', 'lg', '358', 'xl', '416', 'pictureclass', 'teaserSmall__picture', 'imageclass', 'teaserSmall__image', 'alttext', '[...]')$
    </div>
  </div>

  <div class="teaserSmall__buttonWrapper">
    <a href="[...]" class="teaserSmall__button button button--primary button--large" tabindex="0" aria-hidden="false">
      [Optional Button - Remove the whole wrapping container ('teaserSmall__buttonWrapper') if not needed]
    </a>
  </div>
</div>

This teaser should only be placed in a 3- or 4-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To remove the grey border and inner spacing of the teaser, just add class teaserSmall--noBorder at the teaserSmall container
To highlight the teaser with a thick border in primary color, just add class teaserSmall--highlighted at the teaserSmall container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small', 'linked', 'false', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Teaser - Small (Reversed & Linked)

(Optional) Lorem ipsum dolor

(Optional) Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

(Optional) Button

<!-- Teaser - Small (Reversed & Linked) -->

<a class="teaserSmall teaserSmall--reverse teaserSmall--link" href="[...]" tabindex="0" aria-hidden="false">
  <div class="teaserSmall__content">
    <div class="teaserSmall__textWrapper">
      <div class="teaserSmall__heading">
        [Optional Heading - Remove the whole wrapping container ('teaserSmall__heading') if not needed]
      </div>

      <div class="teaserSmall__text">
        [Optional Descrption Text - Remove the whole wrapping container ('teaserSmall__text') if not needed]
      </div>
    </div>

    <div class="teaserSmall__imageWrapper">
      [Optional Picture Include - Remove the whole wrapping container ('teaserSmall__imageWrapper') if not needed]
      $include('Include-Picture', 'src', '[...]', 'sm', '375', 'md', '298', 'lg', '358', 'xl', '416', 'pictureclass', 'teaserSmall__picture', 'imageclass', 'teaserSmall__image', 'alttext', '[...]')$
    </div>
  </div>

  <div class="teaserSmall__buttonWrapper">
    <div class="teaserSmall__button button button--primary button--large">
      [Optional Button - Remove the whole wrapping container ('teaserSmall__buttonWrapper') if not needed]
    </div>
  </div>
</a>

This teaser should only be placed in a 3- or 4-columns-teaser-grid cells. Otherwise responsive reactions doesn't work as expected.
To highlight the teaser with a thick border in primary color, just add class teaserSmall--highlighted at the teaserSmall container
You can also get a dynamicly generated category teaser by using the following include: $include('Include-CategoryTile', 'cgid', '[Category ID]', 'format', 'small', 'reversed', 'true')$
For more detailed information and further options, please have a look at the styleguide (section 'category tile includes')

Lists

Check List

Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
Sed: Diam nonumy eirmod tempor invidunt ut labore
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

<!-- Check List -->

<ul class="checkList__list">
  <li class="checkList__listItem">
    <div class="checkList__iconWrapper">
      $include('SVGIcon-Render', 'iconid', 'circle-check', 'classname', 'checkList__icon')$
    </div>
    <div class="checkList__text">
      <strong>
        [Label]
      </strong>
      [Text]
    </div>
  </li>

  <li class="checkList__listItem">
    [...]
  </li>

  <li class="checkList__listItem">
    [...]
  </li>

  <li class="checkList__listItem">
    [...]
  </li>
</ul>

Icon List

Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
Sed: Diam nonumy eirmod tempor invidunt ut labore
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

<!-- Icon List -->

<ul class="iconList__list">
  <li class="iconList__listItem">
    <div class="iconList__iconWrapper">
      $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconList__icon')$
    </div>
    <div class="iconList__text">
      <strong>
        [Label]
      </strong>
      [Text]
    </div>
  </li>

  <li class="iconList__listItem">
    [...]
  </li>

  <li class="iconList__listItem">
    [...]
  </li>

  <li class="iconList__listItem">
    [...]
  </li>
</ul>

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

<ul class="accordion js-accordion" aria-label="Accordion" role="tablist"> <li class="accordion__item js-accordionItem"> <div class="accordion__itemToggle js-accordionToggle" role="tab" tabindex="0" aria-expanded="false"> <div class="accordion__itemTitle"> [Toggle Button] </div> <div class="accordion__itemIconWrapper"> $include('SVGIcon-Render', 'iconid', 'caret', 'classname', 'accordion__itemIcon')$ </div> </div> <div class="accordion__itemContent js-accordionItem__content" aria-hidden="true" role="tabpanel"> <div class="accordion__itemContentInner"> [Content] </div> </div> </li> <li class="accordion__item js-accordionItem"> [...] </li> <li class="accordion__item js-accordionItem"> [...] </li> <li class="accordion__item js-accordionItem"> [...] </li> </ul>

Abo Listing Details

Section Heading

Attribute Label:

Attribute Value

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Lorem: ipsum dolor sit amet, consetetur sadipscing elitr
Sed: Diam nonumy eirmod tempor invidunt ut labore
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, consectetur adipisicing elit, sed do eiusmod Zum Verschenken ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Leser werben Leser laboris nisi ut aliquip ex ea commodo consequat.

<!-- Abo Listing Details -->

<h2 class="aboListing__detailsHeading">
  [Section Heading]
</h2>

<div class="aboListing__publishing">
  <div class="aboListing__publishingLabel">
    [Attribute Label]:
  </div>
  <div class="aboListing__publishingValue">
    [Attribute Value]
  </div>
</div>

<div class="aboListing__benefitsIntro">
  [Intro Text]
</div>

<div class="aboListing__benefitsListWrapper">
  <ul class="iconList__list">
    <li class="iconList__listItem">
      <div class="iconList__iconWrapper">
        $include('SVGIcon-Render', 'iconid', '[iconID]', 'classname', 'iconList__icon')$
      </div>
      <div class="iconList__text">
        <strong>
          [Label]
        </strong>
        [Text]
      </div>
    </li>

    <li class="iconList__listItem">
      [...]
    </li>

    <li class="iconList__listItem">
      [...]
    </li>

    <li class="iconList__listItem">
      [...]
    </li>
  </ul>
</div>

<div class="aboListing__description">
  [Descriptional Text]
</div>

Teaser Wide Carousel

PayPal

Descriptional Text

Optional Button
Mastercard

Descriptional Text

Optional Button
SEPA-Lastschrift

Descriptional Text

Optional Button
Visa

Descriptional Text

Optional Button

<!-- Teaser Wide Carousel -->

<section class="pageSection">
    <div class="pageSection__container">
      <div class="pageSection__content">

        <div class="carousel productCarousel js-carouselContainer" data-carouselconfig='{"default":{"visibleItems":1,"scrollNumber":1,"transitionSpeed":2000,"infiniteScroll":false,"autoScroll":true,"autoScrollDelay":6000,"innerContainerOverflowHidden":true,"showDefaultNavArrows":false,"showDefaultNavBubbles":true}}'>
          <div class="carousel__slidesContainer productCarousel__slidesContainer js-carousel__slidesContainer">
            <ul class="carousel__slides productCarousel__slides js-carouselSlides">
                <li aria-hidden="true" class="carousel__slide productCarousel__slide js-carouselSlide">

                  <div class="teaserWide">
                    <div class="teaserWide__contentWrapper">
                      <div class="teaserWide__row">
                        <div class="teaserWide__content">
                          <div class="teaserWide__contentInner">
                            <div class="teaserWide__imageWrapper">
                              $include('Include-Picture', 'src', 'footer/footer-icon-paypal.png', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', 'Image placehold')$
                            </div>

                            <div class="teaserWide__textWrapper">
                              <div class="teaserWide__textWrapperTop">
                                <div class="teaserWide__heading">
                                  PayPal
                                </div>

                                <div class="teaserWide__text">
                                  Descriptional Text
                                </div>
                              </div>

                              <div class="teaserWide__buttonWrapper">
                                <a href="#" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                                  Optional Button
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </li>
                <li aria-hidden="true" class="carousel__slide productCarousel__slide js-carouselSlide">

                  <div class="teaserWide">
                    <div class="teaserWide__contentWrapper">
                      <div class="teaserWide__row">
                        <div class="teaserWide__content">
                          <div class="teaserWide__contentInner">
                            <div class="teaserWide__imageWrapper">
                              $include('Include-Picture', 'src', 'footer/footer-icon-mastercard.png', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', 'Image placehold')$
                            </div>

                            <div class="teaserWide__textWrapper">
                              <div class="teaserWide__textWrapperTop">
                                <div class="teaserWide__heading">
                                  Mastercard
                                </div>

                                <div class="teaserWide__text">
                                  Descriptional Text
                                </div>
                              </div>

                              <div class="teaserWide__buttonWrapper">
                                <a href="#" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                                  Optional Button
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </li>
                <li aria-hidden="true" class="carousel__slide productCarousel__slide js-carouselSlide">

                  <div class="teaserWide">
                    <div class="teaserWide__contentWrapper">
                      <div class="teaserWide__row">
                        <div class="teaserWide__content">
                          <div class="teaserWide__contentInner">
                            <div class="teaserWide__imageWrapper">
                              $include('Include-Picture', 'src', 'footer/footer-icon-sepa.png', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', 'Image placehold')$
                            </div>

                            <div class="teaserWide__textWrapper">
                              <div class="teaserWide__textWrapperTop">
                                <div class="teaserWide__heading">
                                  SEPA-Lastschrift
                                </div>

                                <div class="teaserWide__text">
                                  Descriptional Text
                                </div>
                              </div>

                              <div class="teaserWide__buttonWrapper">
                                <a href="#" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                                  Optional Button
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </li>
                <li aria-hidden="true" class="carousel__slide productCarousel__slide js-carouselSlide">

                  <div class="teaserWide">
                    <div class="teaserWide__contentWrapper">
                      <div class="teaserWide__row">
                        <div class="teaserWide__content">
                          <div class="teaserWide__contentInner">
                            <div class="teaserWide__imageWrapper">
                              $include('Include-Picture', 'src', 'footer/footer-icon-visa.png', 'sm', '375', 'md', '306', 'lg', '325', 'xl', '492', 'pictureclass', 'teaserWide__picture', 'imageclass', 'teaserWide__image', 'alttext', 'Image placehold')$
                            </div>

                            <div class="teaserWide__textWrapper">
                              <div class="teaserWide__textWrapperTop">
                                <div class="teaserWide__heading">
                                  Visa
                                </div>

                                <div class="teaserWide__text">
                                  Descriptional Text
                                </div>
                              </div>

                              <div class="teaserWide__buttonWrapper">
                                <a href="#" class="teaserWide__button button button--primary button--large" tabindex="0" aria-hidden="false">
                                  Optional Button
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                </li>
            </ul>
          </div>

          <div class="carousel__navArrows productCarousel__navArrows">
            <button class="carousel__navArrow carousel__navArrow--teaserWide carousel__navArrow--prev productCarousel__navArrow productCarousel__navArrow--prev js-carouselButtonPrevious" type="button" aria-hidden="false" tabindex="0">
              $include('SVGIcon-Render', 'iconid', 'caret', 'classname', 'carousel__navArrowIcon carousel__navArrowIcon--prev productCarousel__navArrowIcon productCarousel__navArrowIcon--prev')$
            </button>
            <button class="carousel__navArrow carousel__navArrow--teaserWide carousel__navArrow--next productCarousel__navArrow productCarousel__navArrow--next js-carouselButtonNext" type="button" aria-hidden="false" tabindex="0">
              $include('SVGIcon-Render', 'iconid', 'caret', 'classname', 'carousel__navArrowIcon carousel__navArrowIcon--next productCarousel__navArrowIcon productCarousel__navArrowIcon--next')$
            </button>
          </div>
        </div>

      </div>
    </div>
  </section>

GEO - Content Library

Index

Content Sections

General Information

Basic Content Section Components

(Optional) Lorem ipsum dolor sit amet

Logo with Subheading

Teaser Grid containing Category Tiles (Category Tile Includes)

(Optional) Lorem ipsum dolor sit amet

GEO

GEO

GEO

GEO

Carousel containing Category Tiles (Category Carousel Include)

(Optional) Lorem ipsum dolor sit amet

Carousel containing Product Tiles (Product Carousel Include)

(Optional) Lorem ipsum dolor sit amet

Text Block

This is a heading (level 1)

This is a heading (level 2)

This is a heading (level 3)

This is a heading (level 4)

This is a heading (level 5)

This is a heading (level 6)

Icon Grid

Snippets

Teaser Grid

Teaser Grid - 1 Column

Teaser Grid - 2 Columns

Teaser Grid - 3 Columns

Teaser Grid - 4 Columns (Version 1)

Teaser Grid - 4 Columns (Version 2)

Teaser Grid - Combination of Rows with differing Count of Columns

Teaser

Teaser - Large

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (With App Store Buttons)

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (2 Columns)

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (2 Columns & Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (2 Columns & Reversed)

(Optional) Lorem ipsum dolor sit amet

Teaser - Large (2 Columns & Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Wide

Teaser - Wide (Linked)

Teaser - Wide (Reversed)

Teaser - Wide (Reversed & Linked)

Teaser - Wide (3 columns)

Teaser - Wide (2 columns, w/o image)

Teaser - Medium

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Reversed)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Inline)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Inline & Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Inline & Reversed)

(Optional) Lorem ipsum dolor sit amet

Teaser - Medium (Inline & Reversed & Linked)

(Optional) Lorem ipsum dolor sit amet

Teaser - Small

Teaser - Small (Linked)

Teaser - Small (Reversed)

Teaser - Small (Reversed & Linked)

Lists

Check List

Icon List

Accordion

Abo Listing Details

Section Heading