Baden-Württemberg Stiftung

Stage-Hero @stage-hero

In Development

Variants

Default
Headline Left
Default light
Large
No mobile image set
Color
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/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "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)"
      }
    ]
  }
}

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/stage/hero-default-1440x800-left.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440x800-left.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "src": "/images/stage/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stage/hero-default-1440x800-left.jpg",
        "src2x": null,
        "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/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</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": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "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)"
      }
    ]
  },
  "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
      }
    }
  ]
}

Large @stage-hero--large

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large stage-hero--dark t-dark">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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">Wir stiften Zukunft<br /> <span class="f-w-normal">Seit 20 Jahren</span></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-8f0c-content" id="id-8f0c-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-a9d7-title">
                  <title id="icon-a9d7-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-8f0c-content" aria-labelledby="id-8f0c-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-0a4b">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-e567">
                    <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-2cf4">
                    <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-ee8d">
                    <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-4fb3"><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-5dd4-title">
                      <title id="icon-5dd4-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": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "Wir stiften Zukunft#[br] #[span.f-w-normal Seit 20 Jahren]\n",
    "huge": true
  },
  "picture": {
    "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)"
      }
    ]
  },
  "quickinfo": {
    "buttonText": "Alles zum Jubiläum"
  }
}

No mobile image set @stage-hero--notresponsive

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--large stage-hero--notresponsive">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback"><img src="/images/stage/hero-large-1440x1000.jpg" srcset="/images/stage/hero-large-1440x1000.jpg" alt="Nur dieses Bild vorhanden" /></picture>
      </noscript>
      <picture class="picture__picture loading"><img class="picture__img js-lazyload" data-src="/images/stage/hero-large-1440x1000.jpg" alt="Nur dieses Bild vorhanden" /></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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": null,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "src": "/images/stage/hero-large-1440x1000.jpg",
    "src2x": null,
    "alt": "Nur dieses Bild vorhanden",
    "lazyload": true,
    "width": 1440,
    "height": 1000,
    "sources": null
  },
  "notresponsive": true
}

Color @stage-hero--color

Vorschau in eignem Tab anzeigen

HTML
Context

<header class="stage-hero stage-hero--default">
  <div class="stage-hero__background stage-hero__background--light-red"></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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": null,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": null,
  "backgroundColor": "light-red"
}

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/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</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-4c2d-content" id="id-4c2d-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-1f1b-title">
                  <title id="icon-1f1b-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-4c2d-content" aria-labelledby="id-4c2d-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-7287">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-3f49">
                    <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-14a3">
                    <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-75db">
                    <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-5217"><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-0e79-title">
                      <title id="icon-0e79-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-08ac-title">
                <title id="icon-08ac-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-891d-title">
                <title id="icon-891d-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-1933-title">
                <title id="icon-1933-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-5f7e">Benutzername oder E-Mail</label>
                    <div class="form-group__input"><input class="input" id="form-group-5f7e" 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-6ddb">Passwort</label>
                    <div class="form-group__input"><input class="input" id="form-group-6ddb" type="text" required="required" /></div>
                  </div>
                </div>
              </div>
              <div class="form__col">
                <div class="form__field"><label class="checkbox" for="checkbox-7467"><input class="checkbox__input" type="checkbox" id="checkbox-7467" name="checkbox-7467" /><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": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "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)"
      }
    ]
  },
  "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__video">
    <div class="video loading" style="padding-top: 56.25%;"><video class="video__video js-lazyload lazyload" width="640" height="360" preload="none" poster="https://bildermangel.de/640x360/6E7180/8E919B.png?text=640x360 Poster" muted="muted" autoplay="autoplay" loop="loop" id="video--96aa" playsinline="playsinline">
        <source src="/images/video/big_buck_bunny.mp4" type="video/mp4" />
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />Ihr Browser unterstützt kein HTML5 video.</video><button class="icon-button video__button" type="button" aria-controls="video--96aa"><svg class="icon icon--play icon-button__icon video__play" viewBox="0 0 200 200" role="img" aria-labelledby="icon-6e0b-title">
          <title id="icon-6e0b-title">Video abspielen</title>
          <use xlink:href="#icon-play"></use>
        </svg><svg class="icon icon--pause icon-button__icon video__pause" viewBox="0 0 200 200" role="img" aria-labelledby="icon-e9bd-title">
          <title id="icon-e9bd-title">Video pausieren</title>
          <use xlink:href="#icon-pause"></use>
        </svg></button></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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "large",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": null,
  "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__slider-frame">
    <div class="stage-hero__slider">
      <div class="stage-hero__slider-item">
        <div class="stage-hero__picture-container">
          <div class="picture"><noscript>
              <picture class="picture__fallback">
                <source srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
            </noscript>
            <picture class="picture__picture loading">
              <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
          </div>
        </div>
      </div>
      <div class="stage-hero__slider-item">
        <div class="stage-hero__picture-container">
          <div class="picture"><noscript>
              <picture class="picture__fallback">
                <source srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
            </noscript>
            <picture class="picture__picture loading">
              <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
          </div>
        </div>
      </div>
      <div class="stage-hero__slider-item">
        <div class="stage-hero__picture-container">
          <div class="picture"><noscript>
              <picture class="picture__fallback">
                <source srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
            </noscript>
            <picture class="picture__picture loading">
              <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="stage-hero__slider-controls slider__controls"></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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</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-8ce1-content" id="id-8ce1-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-bfcc-title">
                  <title id="icon-bfcc-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-8ce1-content" aria-labelledby="id-8ce1-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-921f">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-9d0c">
                    <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-a0bb">
                    <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-353e">
                    <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-c4f8"><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-5f2f-title">
                      <title id="icon-5f2f-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": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": null,
  "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/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften</span> <br /> innovative Forschung für unser Land</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": "#[span.f-w-normal Wir stiften] #[br] innovative Forschung für unser Land\n"
  },
  "picture": {
    "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": 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/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stage/hero-mobile-600x1600.jpg" srcset="/images/stage/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stage/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stage/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"><span class="f-w-normal">Wir stiften gerechtere Bildung</span> <br /> indem wir nachhaltige Projekte im Donauraum fördern</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-dcb4-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-dcb4-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-dcb4-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-dcb4-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": "#[span.f-w-normal Wir stiften gerechtere Bildung] #[br] indem wir nachhaltige Projekte im Donauraum fördern\n"
  },
  "picture": {
    "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)"
      }
    ]
  },
  "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

# Large @stage-hero--large

# No mobile image set @stage-hero--notresponsive

# Color @stage-hero--color

# 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

Large @stage-hero--large

No mobile image set @stage-hero--notresponsive

Color @stage-hero--color

Login @stage-hero--login

Video @stage-hero--video

Slider @stage-hero--slider

Countdown @stage-hero--countdown

Tabs @stage-hero--tabs