vivida bkk

Stage Slider @stage-slider

In development

Default @stage-slider

HTML
Kontext

<!-- Default -->
<div class="stage-slider">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  }
}

Grün @stage-slider--green

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Grün -->
<div class="stage-slider t-green">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "green"
}

Blau @stage-slider--blue

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Blau -->
<div class="stage-slider t-blue">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "blue"
}

Rot @stage-slider--red

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Rot -->
<div class="stage-slider t-red">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "red"
}

Türkis @stage-slider--turquoise

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Türkis -->
<div class="stage-slider t-turquoise">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "turquoise"
}

Dunkelblau (Invertiert) @stage-slider--blue-dark-inverted

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Dunkelblau (Invertiert) -->
<div class="stage-slider t-blue-dark-inverted">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "blue-dark-inverted"
}

Blau (Invertiert) @stage-slider--blue-inverted

Vorschau in eignem Tab anzeigen

HTML
Kontext

<!-- Blau (Invertiert) -->
<div class="stage-slider t-blue-inverted">
  <div class="stage-slider__slider js-stage-slider">
    <div class="stage-slider__items">
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 1 dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 2 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 3 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 4 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
      <div class="stage-slider__item">
        <picture class="picture">
          <source srcset="https://bildermangel.de/1440x550/b0b0b0/333333.png?text=1440x550%20(XL), https://bildermangel.de/2880x1100/b0b0b0/333333.webp?text=2880x1100%20(2x) 2x" media="(min-width: 1200px)" />
          <source srcset="https://bildermangel.de/990x550/b0b0b0/333333.png?text=990x550%20(L), https://bildermangel.de/1980x1100/b0b0b0/333333.webp?text=1980x1100%20(L%202x) 2x" media="(min-width: 990px)" />
          <source srcset="https://bildermangel.de/688x387/b0b0b0/333333.png?text=688x387%20(16/9%20M-L), https://bildermangel.de/1367x774/b0b0b0/333333.webp?text=1367x774%20(16/9%20M-L%202x) 2x" media="(min-width: 768px)" />
          <source srcset="https://bildermangel.de/440x248/b0b0b0/333333.png?text=440x248%20(16/9%20M), https://bildermangel.de/880x496/b0b0b0/333333.webp?text=880x496%20(16/9%20M%202x) 2x" media="(min-width: 480px)" />
          <source srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" media="(max-width: 479px)" /><img class="picture__image" src="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width)" srcset="https://bildermangel.de/715x477/b0b0b0/333333.png?text=715x477%20(S%20Min%20Width), https://bildermangel.de/1430x954/b0b0b0/333333.webp?text=1430x954%20(S%202x%20Min%20Width) 2x" alt="Alternative text" loading="lazy" /></picture>
        <div class="stage-slider__content">
          <div class="stage-slider__headline-wrapper">
            <h2 class="stage-slider__headline">Slide 5 ipsum dolor sit amet consetetur</h2><br /><a class="stage-slider__button" href="#">Mehr erfahren</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-slider__box">
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Mitglied werden</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--phone stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-phone"></use>
        </svg><span class="stage-slider__box-title">07720 9727-0</span></div>
      <div class="stage-slider__box-item-line"><span class="stage-slider__box-text">Mo. bis Fr. von 8 – 19 Uhr</span></div>
    </div>
    <div class="stage-slider__box-item">
      <div class="stage-slider__box-item-line"><svg class="icon icon--star stage-slider__box-icon" viewBox="0 0 200 200" aria-hidden="true">
          <use xlink:href="#icon-star"></use>
        </svg><span class="stage-slider__box-title">Top Leistungen</span></div>
      <div class="stage-slider__box-item-line"><a class="link-arrow" href="#">Mehr erfahren</a></div>
    </div>
  </div>
</div>

{
  "slider": {
    "items": [
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 1 dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 2 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 3 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 4 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      },
      {
        "use": "picture--sources",
        "headline": {
          "level": 2,
          "text": "Slide 5 ipsum dolor sit amet consetetur"
        },
        "button": {
          "link": "#",
          "text": "Mehr erfahren"
        }
      }
    ]
  },
  "box": {
    "items": [
      {
        "icon": "star",
        "title": "Mitglied werden",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      },
      {
        "icon": "phone",
        "title": "07720 9727-0",
        "text": "Mo. bis Fr. von 8 – 19 Uhr"
      },
      {
        "icon": "star",
        "title": "Top Leistungen",
        "link": {
          "text": "Mehr erfahren",
          "href": "#"
        }
      }
    ]
  },
  "theme": "blue-inverted"
}

Stage Slider @stage-slider

# Default @stage-slider

# Grün @stage-slider--green

# Blau @stage-slider--blue

# Rot @stage-slider--red

# Türkis @stage-slider--turquoise

# Dunkelblau (Invertiert) @stage-slider--blue-dark-inverted

# Blau (Invertiert) @stage-slider--blue-inverted

Default @stage-slider

Grün @stage-slider--green

Blau @stage-slider--blue

Rot @stage-slider--red

Türkis @stage-slider--turquoise

Dunkelblau (Invertiert) @stage-slider--blue-dark-inverted

Blau (Invertiert) @stage-slider--blue-inverted