Baden-Württemberg Stiftung

Stage-Hero @stage-hero

In Development

Variants

Default
Headline Left
Default light
Login
Countdown
Tabs

Default @stage-hero

HTML
Context

<header class="stage-hero stage-hero--default">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Stiftung Kinderland</span> <br /> Stark für Kinder <br /> und Familen</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": false,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Stiftung Kinderland] #[br] Stark für Kinder #[br] und Familen\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/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/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Ich bin das „What“ <br/> des Programms</span> <br /> Das ist [der Name des <br /> Programms].</h1>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Ich bin das „What“ #[br] des Programms] #[br] Das ist [der Name des #[br] Programms].\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/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--default stage-hero--dark t-dark">
  <div class="stage-hero__picture-container">
    <div class="picture"><noscript>
        <picture class="picture__fallback">
          <source srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Talente schlummern. <br/> Talente versiegen nicht. <br/> Talente werden entdeckt.</span> <br /> Das macht die <br /> Kulturakademie</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="88" src="/images/stki/logo-kulturakademie.png" width="190" /></noscript><img class="image__img js-lazyload" data-src="/images/stki/logo-kulturakademie.png" width="190" height="88" alt="Logo Image" /></div>
        </a></div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 1,
    "text": "#[span.f-w-normal Talente schlummern. #[br] Talente versiegen nicht. #[br] Talente werden entdeckt.] #[br] Das macht die #[br] Kulturakademie\n",
    "huge": false
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/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/stki/logo-kulturakademie.png",
        "alt": "Logo Image",
        "width": 190,
        "height": 88
      }
    }
  ],
  "button": false
}

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/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Ich bin das „What“ <br/> des Programms</span> <br /> Das ist [der Name des <br /> Programms].</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-567f-content" id="id-567f-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-14f8-title">
                  <title id="icon-14f8-title">Schnellinfo zeigen</title>
                  <use xlink:href="#icon-list"></use>
                </svg></button></div>
            <article class="quickinfo__panel" id="id-567f-content" aria-labelledby="id-567f-title">
              <div class="quickinfo__content" tabindex="-1">
                <div class="quickinfo__content-inner">
                  <div class="quickinfo__block" id="block-id-f5f3">
                    <h2 class="headline headline--3">Headline 3</h2>
                  </div>
                  <div class="quickinfo__block" id="block-id-76f5">
                    <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-b1fd">
                    <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-19c2">
                    <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-ccf4"><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-acf1-title">
                      <title id="icon-acf1-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-6149-title">
                <title id="icon-6149-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-9cdc-title">
                <title id="icon-9cdc-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-984d-title">
                <title id="icon-984d-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-54d4">Benutzername oder E-Mail</label>
                    <div class="form-group__input"><input class="input" id="form-group-54d4" 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-3d75">Passwort</label>
                    <div class="form-group__input"><input class="input" id="form-group-3d75" type="text" required="required" /></div>
                  </div>
                </div>
              </div>
              <div class="form__col">
                <div class="form__field"><label class="checkbox" for="checkbox-6af2"><input class="checkbox__input" type="checkbox" id="checkbox-6af2" name="checkbox-6af2" /><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 Ich bin das „What“ #[br] des Programms] #[br] Das ist [der Name des #[br] Programms].\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/hero-default-1440-800.jpg",
        "media": "(min-width: 600px)"
      }
    ]
  },
  "quickinfo": {
    "buttonText": "Mehr erfahren"
  },
  "login": true
}

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/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Ich bin das „What“ <br/> des Programms</span> <br /> Das ist [der Name des <br /> Programms].</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 Ich bin das „What“ #[br] des Programms] #[br] Das ist [der Name des #[br] Programms].\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/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/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img src="/images/stki/hero-mobile-600x1600.jpg" srcset="/images/stki/hero-mobile-600x1600.jpg" alt="Kleinstes Bild" /></picture>
      </noscript>
      <picture class="picture__picture loading">
        <source data-srcset="/images/stki/hero-default-1440-800.jpg" media="(min-width: 600px)" /><img class="picture__img js-lazyload" data-src="/images/stki/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">Ich bin das „What“ <br/> des Programms</span> <br /> Das ist [der Name des <br /> Programms].</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-944c-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-944c-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-944c-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-944c-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 Ich bin das „What“ #[br] des Programms] #[br] Das ist [der Name des #[br] Programms].\n",
    "huge": true
  },
  "picture": {
    "src": "/images/stki/hero-mobile-600x1600.jpg",
    "src2x": null,
    "alt": "Kleinstes Bild",
    "lazyload": true,
    "width": 600,
    "height": 1600,
    "sources": [
      {
        "src": "/images/stki/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

# 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

Countdown @stage-hero--countdown

Tabs @stage-hero--tabs