Baden-Württemberg Stiftung

Stage-Hero @stage-hero

In Development

Variants

Default
Headline Left
Default light
Login
Video
Slider
Countdown
Tabs

Default @stage-hero

HTML
Context

<header class="stage-hero stage-hero--default stage-hero--dark t-dark">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline stage-hero__headline--huge"><span class="f-w-normal">Programm <br/> BW-Stipendium</span> <br /> Für ein lebendiges <br /> Netzwerk</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Programm #[br] BW-Stipendium] #[br] Für ein lebendiges #[br] Netzwerk\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  }
}

Headline Left @stage-hero--left

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--default stage-hero--dark t-dark stage-hero--left">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "left": true
}

Default light @stage-hero--light

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
        <div class="stage-hero__buttons">
          <div class="stage-hero__button"><a class="button button--primary" href="#"><svg class="icon icon--ticket button__icon" viewBox="0 0 200 200">
                <use xlink:href="#icon-ticket"></use>
              </svg><span class="button__text">Tickets</span></a></div>
          <div class="stage-hero__button"><a class="button button--secondary" href="#"><svg class="icon icon--ticket button__icon" viewBox="0 0 200 200">
                <use xlink:href="#icon-ticket"></use>
              </svg><span class="button__text">Tickets</span></a></div>
        </div>
        <div class="stage-hero__share">
          <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
                <use xlink:href="#icon-share"></use>
              </svg><span class="share__text">Teilen</span></button>
            <div class="share__tooltip" aria-hidden="true">
              <ul class="share__list">
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                      <use xlink:href="#icon-facebook"></use>
                    </svg><span class="share__label">Facebook</span></a></li>
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                      <use xlink:href="#icon-x"></use>
                    </svg><span class="share__label">X</span></a></li>
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                      <use xlink:href="#icon-xing"></use>
                    </svg><span class="share__label">Xing</span></a></li>
                <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                      <use xlink:href="#icon-mail-fill"></use>
                    </svg><span class="share__label">E-Mail</span></a></li>
                <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                      <use xlink:href="#icon-copy"></use>
                    </svg><span class="share__label">Link kopieren</span></button></li>
              </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></button>
              <div class="share__arrow"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-hero__logos">
      <div class="stage-hero__logos-inner"><a class="stage-hero__logo" href="#" target="_blank" rel="noopener noreferrer">
          <div class="image loading image--not-responsive"><noscript><img class="image__fallback" alt="Logo Image" height="60" src="/images/logo-bfa.png" width="256" /></noscript><img class="image__img js-lazyload" data-src="/images/logo-bfa.png" width="256" height="60" alt="Logo Image" /></div>
        </a><a class="stage-hero__logo" href="#" target="_blank" rel="noopener noreferrer">
          <div class="image loading image--not-responsive"><noscript><img class="image__fallback" alt="Logo Image" height="88" src="/images/logo-bwst.png" width="198" /></noscript><img class="image__img js-lazyload" data-src="/images/logo-bwst.png" width="198" height="88" alt="Logo Image" /></div>
        </a></div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": null,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "share": true,
  "buttons": [
    {
      "icon": "ticket",
      "text": "Tickets"
    },
    {
      "style": "secondary",
      "icon": "ticket",
      "text": "Tickets"
    }
  ],
  "logos": [
    {
      "link": "#",
      "image": {
        "notresponsive": true,
        "src": "/images/logo-bfa.png",
        "alt": "Logo Image",
        "width": 256,
        "height": 60
      }
    },
    {
      "link": "#",
      "image": {
        "notresponsive": true,
        "src": "/images/logo-bwst.png",
        "alt": "Logo Image",
        "width": 198,
        "height": 88
      }
    }
  ]
}

Login @stage-hero--login

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--default stage-hero--login">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
        <div class="stage-hero__quickinfo t-dark">
          <div class="quickinfo">
            <div class="quickinfo__button-wrap"><span class="quickinfo__button-text" aria-hidden="true">Mehr erfahren</span><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-589e-content" id="id-589e-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-4714-title">
                  <title id="icon-4714-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-589e-content" aria-labelledby="id-589e-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-d682">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-815c">
                    <div class="text">
                      <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-2ec9">
                    <div class="jumpbox jumpbox--condensed">
                      <div class="jumpbox__text">
                        <div class="text">
                          <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-8e04">
                    <div class="link-list">
                      <ul class="link-list__list">
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-7dda"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                        <use xlink:href="#icon-arrow-right"></use>
                      </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6583-title">
                      <title id="icon-6583-title">Schnellinfo schließen</title>
                      <use xlink:href="#icon-close"></use>
                    </svg></button>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-hero__login">
      <div class="login">
        <div class="login__headline">
          <h4 class="headline headline--4">Anmelden</h4>
        </div>
        <div class="login__social">
          <div class="login__social__item"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--linkedin icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-5e3a-title">
                <title id="icon-5e3a-title">List</title>
                <use xlink:href="#icon-linkedin"></use>
              </svg></a></div>
          <div class="login__social__item"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--facebook icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-049c-title">
                <title id="icon-049c-title">List</title>
                <use xlink:href="#icon-facebook"></use>
              </svg></a></div>
          <div class="login__social__item"><a class="icon-button icon-button--secondary" href="#"><svg class="icon icon--google icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-ecb6-title">
                <title id="icon-ecb6-title">List</title>
                <use xlink:href="#icon-google"></use>
              </svg></a></div>
        </div>
        <div class="login__or">oder</div>
        <div class="login__form">
          <form class="form" action="#">
            <div class="form__fields">
              <div class="form__col">
                <div class="form__field">
                  <div class="form-group"><label class="label form-group__label" for="form-group-8e23">Benutzername oder E-Mail</label>
                    <div class="form-group__input"><input class="input" id="form-group-8e23" type="text" required="required" /></div>
                  </div>
                </div>
              </div>
              <div class="form__col">
                <div class="form__field">
                  <div class="form-group"><label class="label form-group__label" for="form-group-9ede">Passwort</label>
                    <div class="form-group__input"><input class="input" id="form-group-9ede" type="text" required="required" /></div>
                  </div>
                </div>
              </div>
              <div class="form__col">
                <div class="form__field"><label class="checkbox" for="checkbox-5e0a"><input class="checkbox__input" type="checkbox" id="checkbox-5e0a" name="checkbox-5e0a" /><span class="checkbox__indicator"><svg class="icon icon--check checkbox__indicator-icon" viewBox="0 0 200 200">
  <use xlink:href="#icon-check"></use>
</svg></span><span class="checkbox__label">Merken</span></label></div>
              </div>
            </div>
            <div class="form__button"><button class="button button--primary" type="submit"><span class="button__text">Login</span></button></div>
          </form>
        </div>
        <div class="login__bottom">
          <div class="text text--small">
            <p><a href="#" class="link">Login vergessen?</a><br />Noch kein Konto? Hier <a href="#" class="link">Hier registrieren</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": null,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "quickinfo": {
    "buttonText": "Mehr erfahren"
  },
  "login": true
}

Video @stage-hero--video

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large stage-hero--dark t-dark stage-hero--video">
  <div class="stage-hero__picture-container">
    <div class="picture">
      <picture class="picture__picture">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img" src="/images/stip/hero-mobile-600x1600.jpg" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "video": {
    "autoplay": true,
    "sources": [
      {
        "src": "/images/video/big_buck_bunny.mp4",
        "type": "video/mp4"
      },
      {
        "src": "https://www.w3schools.com/html/mov_bbb.ogg",
        "type": "video/ogg"
      }
    ],
    "width": 640,
    "height": 360,
    "poster": "https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster",
    "alt": "Video Alt",
    "lazyload": true
  }
}

Slider @stage-hero--slider

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large stage-hero--slider">
  <div class="stage-hero__picture-container">
    <div class="picture">
      <picture class="picture__picture">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img" src="/images/stip/hero-mobile-600x1600.jpg" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
        <div class="stage-hero__quickinfo t-dark">
          <div class="quickinfo">
            <div class="quickinfo__button-wrap"><span class="quickinfo__button-text" aria-hidden="true">Alles zum Jubiläum</span><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-6419-content" id="id-6419-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-3c9f-title">
                  <title id="icon-3c9f-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-6419-content" aria-labelledby="id-6419-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-42e4">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-444f">
                    <div class="text">
                      <p><b>Kurzbeschreibung</b> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-471c">
                    <div class="jumpbox jumpbox--condensed">
                      <div class="jumpbox__text">
                        <div class="text">
                          <p>Hinweisbox <a class="link" href="#">mit Link</a></p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-8446">
                    <div class="link-list">
                      <ul class="link-list__list">
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Kurzfilmwettbewerb „Smart. Ohne Phone startet“</span></a></li>
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Stiftungsprogramm verbessert Integration in Baden-Württemberg</span></a></li>
                        <li class="link-list__item"><a class="icon-link" href="#"><span class="icon-link__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200">
  <use xlink:href="#icon-arrow-right"></use>
</svg></span><span class="icon-link__text">Ausschreibung Lehrerpreis der Stiftung der Kinderland</span></a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="quickinfo__block" id="block-id-cc29"><a class="button button--primary" href="#"><svg class="icon icon--arrow-right button__icon" viewBox="0 0 200 200">
                        <use xlink:href="#icon-arrow-right"></use>
                      </svg><span class="button__text">Button</span></a></div><button class="icon-button icon-button--secondary quickinfo__close" type="button"><svg class="icon icon--close icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-71c7-title">
                      <title id="icon-71c7-title">Schnellinfo schließen</title>
                      <use xlink:href="#icon-close"></use>
                    </svg></button>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": null,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "quickinfo": {
    "buttonText": "Alles zum Jubiläum"
  },
  "slider": [
    {
      "src": "/images/stage/hero-mobile-600x1600.jpg",
      "src2x": null,
      "alt": "Kleinstes Bild",
      "lazyload": true,
      "width": 600,
      "height": 1600,
      "sources": [
        {
          "src": "/images/stage/hero-default-1440-800.jpg",
          "src2x": null,
          "media": "(min-width: 600px)"
        }
      ]
    },
    {
      "src": "/images/stage/hero-mobile-600x1600.jpg",
      "src2x": null,
      "alt": "Kleinstes Bild",
      "lazyload": true,
      "width": 600,
      "height": 1600,
      "sources": [
        {
          "src": "/images/stage/hero-default-1440-800.jpg",
          "src2x": null,
          "media": "(min-width: 600px)"
        }
      ]
    },
    {
      "src": "/images/stage/hero-mobile-600x1600.jpg",
      "src2x": null,
      "alt": "Kleinstes Bild",
      "lazyload": true,
      "width": 600,
      "height": 1600,
      "sources": [
        {
          "src": "/images/stage/hero-default-1440-800.jpg",
          "src2x": null,
          "media": "(min-width: 600px)"
        }
      ]
    }
  ]
}

Countdown @stage-hero--countdown

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--default stage-hero--dark t-dark stage-hero--countdown">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
      </div>
    </div>
    <div class="stage-hero__countdown">
      <div class="countdown" data-date="01 May 2022">
        <div class="countdown__cols">
          <div class="countdown__col">
            <div class="countdown__days"></div>
            <div class="countdown__label">Tage</div>
          </div>
          <div class="countdown__col">
            <div class="countdown__hours"></div>
            <div class="countdown__label">Stunden</div>
          </div>
          <div class="countdown__col">
            <div class="countdown__min"></div>
            <div class="countdown__label">Minuten</div>
          </div>
          <div class="countdown__col">
            <div class="countdown__sec"></div>
            <div class="countdown__label">Sekunden</div>
          </div>
        </div>
        <div class="countdown__text">Dann startet der Literatursommer im Ländle</div>
      </div>
    </div>
    <div class="stage-hero__down"><svg class="icon icon--arrow-bottom" viewBox="0 0 200 200">
        <use xlink:href="#icon-arrow-bottom"></use>
      </svg></div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "countdown": true,
  "down": {
    "icon": "arrow-bottom"
  }
}

Tabs @stage-hero--tabs

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large stage-hero--dark t-dark stage-hero--tabs">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stip/hero-mobile-600x1600.jpg" srcset="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stip/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stip/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
    </div>
  </div>
  <div class="stage-hero__content-wrap">
    <div class="stage-hero__content">
      <div class="stage-hero__content-inner">
        <h1 class="headline headline--1 stage-hero__headline">null</h1>
        <div class="stage-hero__share">
          <div class="share"><button class="share__trigger" type="button"><svg class="icon icon--share share__icon" viewBox="0 0 200 200">
                <use xlink:href="#icon-share"></use>
              </svg><span class="share__text">Teilen</span></button>
            <div class="share__tooltip" aria-hidden="true">
              <ul class="share__list">
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="Facebook"><svg class="icon icon--facebook" viewBox="0 0 200 200">
                      <use xlink:href="#icon-facebook"></use>
                    </svg><span class="share__label">Facebook</span></a></li>
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="X"><svg class="icon icon--x" viewBox="0 0 200 200">
                      <use xlink:href="#icon-x"></use>
                    </svg><span class="share__label">X</span></a></li>
                <li class="share__item"><a class="share__link js-popup" href="#" data-name="Xing"><svg class="icon icon--xing" viewBox="0 0 200 200">
                      <use xlink:href="#icon-xing"></use>
                    </svg><span class="share__label">Xing</span></a></li>
                <li class="share__item"><a class="share__link" href="#" data-name="E-Mail"><svg class="icon icon--mail-fill" viewBox="0 0 200 200">
                      <use xlink:href="#icon-mail-fill"></use>
                    </svg><span class="share__label">E-Mail</span></a></li>
                <li class="share__item"><button class="share__link js-copy" type="button" data-clipboard-text="www.Ich-wurde-kopiert.de" data-copy-message="Link kopieren" data-copied-message="In Zwischenablage &amp;#10003;"><svg class="icon icon--copy" viewBox="0 0 200 200">
                      <use xlink:href="#icon-copy"></use>
                    </svg><span class="share__label">Link kopieren</span></button></li>
              </ul><button class="share__close" type="button" title="Schließen" hidden="hidden"><svg class="icon icon--close" viewBox="0 0 200 200">
                  <use xlink:href="#icon-close"></use>
                </svg></button>
              <div class="share__arrow"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stage-hero__tabs">
      <div class="detail-tabs">
        <div class="detail-tabs__tab-bar">
          <div class="detail-tabs__nav">
            <div class="tab-bar tab-bar--list tab-bar--uninitalized tab-bar--subline">
              <div class="tab-bar__select-wrap"><button class="tab-bar__select" aria-haspopup="true" aria-expanded="false"><span class="u-hidden-visually">Inhalt auswählen</span><span class="tab-bar__select-current" aria-hidden="true">Das Programm</span><svg class="icon icon--dropdown tab-bar__select-icon" viewBox="0 0 200 200">
                    <use xlink:href="#icon-dropdown"></use>
                  </svg></button></div>
              <ul class="tab-bar__items" role="tablist">
                <li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item tab-bar__item--active" aria-selected="true" id="tab-bar-adc8-tab-0" role="tab" href="/programme.html">Das Programm</a></li>
                <li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-adc8-tab-1" role="tab" href="/donau.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Perspektive Donau</a></li>
                <li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-adc8-tab-2" role="tab" href="/ausschreibung.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Andere Ausschreibung 1</a></li>
                <li class="tab-bar__item-wrap" role="presentation"><a class="tab-bar__item" id="tab-bar-adc8-tab-3" role="tab" href="/ausschreibung2.html"><span class="tab-bar__kicker f-w-normal">Ausschreibung</span> Komm mit in das gesunde Boot</a></li>
              </ul>
            </div>
          </div>
          <div class="detail-tabs__logo">
            <div class="logo"><img class="logo__image" src="https://bildermangel.de/160x80/F5F5F5/28281a.png?text=Logo" width="160" height="80" alt="Das ist ein Alt-Text. Das ist ein Pflichtfeld." /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": null
  },
  "picture": {
    "src": "/images/stip/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stip/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "tabs": {
    "logo": {
      "path": "https://bildermangel.de/160x80/F5F5F5/28281a.png?text=Logo",
      "pathLight": null,
      "alt": "Das ist ein Alt-Text. Das ist ein Pflichtfeld.",
      "width": 160,
      "height": 80,
      "link": null
    },
    "tabs": {
      "items": [
        {
          "link": "/programme.html",
          "title": "| Das Programm\n",
          "active": true
        },
        {
          "link": "/donau.html",
          "title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Perspektive Donau\n"
        },
        {
          "link": "/ausschreibung.html",
          "title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Andere Ausschreibung 1\n"
        },
        {
          "link": "/ausschreibung2.html",
          "title": "| #[span.tab-bar__kicker.f-w-normal Ausschreibung] Komm mit in das gesunde Boot\n"
        }
      ],
      "style": "subline"
    }
  },
  "share": true
}

Stage-Hero @stage-hero

Variants

# Default @stage-hero

# Headline Left @stage-hero--left

# Default light @stage-hero--light

# Login @stage-hero--login

# Video @stage-hero--video

# Slider @stage-hero--slider

# Countdown @stage-hero--countdown

# Tabs @stage-hero--tabs

Default @stage-hero

Headline Left @stage-hero--left

Default light @stage-hero--light

Login @stage-hero--login

Video @stage-hero--video

Slider @stage-hero--slider

Countdown @stage-hero--countdown

Tabs @stage-hero--tabs