Baden-Württemberg Stiftung

Stage-Mission @stage-mission

Design

HTML
Context

<header class="stage-mission stage-mission--default stage-mission--dark">
  <div class="stage-mission__image-container">
    <div class="image image--cover stage-mission__image"><img class="image__img" src="https://bildermangel.de/1440x600/6E7180/8E919B.png?text=1440x600" width="1440" height="600" /></div>
  </div>
  <div class="stage-mission__content-wrap">
    <div class="stage-mission__content">
      <div class="stage-mission__headline-wrap">
        <h2 class="headline headline--1 stage-mission__headline"><span class="f-w-normal">Unsere Mission</span> <br /> Ein lebenswertes Baden-Württemberg auch für zukünftige Generationen</h2>
      </div>
      <div class="stage-mission__slider">
        <div class="mission-card-slider">
          <div class="mission-card-slider__inner">
            <div class="mission-card-slider__frame">
              <div class="mission-card-slider__items">
                <div class="mission-card-slider__item">
                  <div class="mission-card">
                    <div class="mission-card__content">
                      <h2 class="headline headline--1 mission-card__headline">Wir stiften innovative Forschung</h2>
                      <div class="mission-card__details">
                        <div class="mission-card__icon-button">
                          <div class="quickinfo">
                            <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-da55-content" id="id-da55-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d9a9-title">
                                  <title id="icon-d9a9-title">Schnellinfo zeigen</title>
                                  <use xlink:href="#icon-list"></use>
                                </svg></button></div>
                            <article class="quickinfo__panel" id="id-da55-content" aria-labelledby="id-da55-title">
                              <div class="quickinfo__content" tabindex="-1">
                                <div class="quickinfo__content-inner">
                                  <div class="quickinfo__block" id="block-id-7013">
                                    <h2 class="headline headline--3">Headline 3</h2>
                                  </div>
                                  <div class="quickinfo__block" id="block-id-07ed">
                                    <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-e40d">
                                    <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-0fd4">
                                    <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-2d04"><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-3269-title">
                                      <title id="icon-3269-title">Schnellinfo schließen</title>
                                      <use xlink:href="#icon-close"></use>
                                    </svg></button>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mission-card-slider__item">
                  <div class="mission-card">
                    <div class="mission-card__content">
                      <h2 class="headline headline--1 mission-card__headline">Wir stiften eine starke Gemeinschaft</h2>
                      <div class="mission-card__details">
                        <div class="mission-card__icon-button">
                          <div class="quickinfo">
                            <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-f2f4-content" id="id-f2f4-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-25ec-title">
                                  <title id="icon-25ec-title">Schnellinfo zeigen</title>
                                  <use xlink:href="#icon-list"></use>
                                </svg></button></div>
                            <article class="quickinfo__panel" id="id-f2f4-content" aria-labelledby="id-f2f4-title">
                              <div class="quickinfo__content" tabindex="-1">
                                <div class="quickinfo__content-inner">
                                  <div class="quickinfo__block" id="block-id-4dd5">
                                    <h2 class="headline headline--3">Headline 3</h2>
                                  </div>
                                  <div class="quickinfo__block" id="block-id-870b">
                                    <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-49b2">
                                    <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-ee42">
                                    <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-30e9"><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-4f04-title">
                                      <title id="icon-4f04-title">Schnellinfo schließen</title>
                                      <use xlink:href="#icon-close"></use>
                                    </svg></button>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mission-card-slider__item">
                  <div class="mission-card">
                    <div class="mission-card__content">
                      <h2 class="headline headline--1 mission-card__headline">Wir stiften bessere Bildung</h2>
                      <div class="mission-card__details">
                        <div class="mission-card__icon-button">
                          <div class="quickinfo">
                            <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-2b22-content" id="id-2b22-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-7eb1-title">
                                  <title id="icon-7eb1-title">Schnellinfo zeigen</title>
                                  <use xlink:href="#icon-list"></use>
                                </svg></button></div>
                            <article class="quickinfo__panel" id="id-2b22-content" aria-labelledby="id-2b22-title">
                              <div class="quickinfo__content" tabindex="-1">
                                <div class="quickinfo__content-inner">
                                  <div class="quickinfo__block" id="block-id-a97d">
                                    <h2 class="headline headline--3">Headline 3</h2>
                                  </div>
                                  <div class="quickinfo__block" id="block-id-29a8">
                                    <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-e454">
                                    <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-c83d">
                                    <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-a1d5"><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-3a8b-title">
                                      <title id="icon-3a8b-title">Schnellinfo schließen</title>
                                      <use xlink:href="#icon-close"></use>
                                    </svg></button>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mission-card-slider__item">
                  <div class="mission-card">
                    <div class="mission-card__content">
                      <h2 class="headline headline--1 mission-card__headline">Wir stiften innovative Forschung</h2>
                      <div class="mission-card__details">
                        <div class="mission-card__icon-button">
                          <div class="quickinfo">
                            <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-0e66-content" id="id-0e66-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-0119-title">
                                  <title id="icon-0119-title">Schnellinfo zeigen</title>
                                  <use xlink:href="#icon-list"></use>
                                </svg></button></div>
                            <article class="quickinfo__panel" id="id-0e66-content" aria-labelledby="id-0e66-title">
                              <div class="quickinfo__content" tabindex="-1">
                                <div class="quickinfo__content-inner">
                                  <div class="quickinfo__block" id="block-id-e6dc">
                                    <h2 class="headline headline--3">Headline 3</h2>
                                  </div>
                                  <div class="quickinfo__block" id="block-id-5ad3">
                                    <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-cee6">
                                    <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-088c">
                                    <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-3f1d"><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-4915-title">
                                      <title id="icon-4915-title">Schnellinfo schließen</title>
                                      <use xlink:href="#icon-close"></use>
                                    </svg></button>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mission-card-slider__item">
                  <div class="mission-card">
                    <div class="mission-card__content">
                      <h2 class="headline headline--1 mission-card__headline">Wir stiften eine starke Gemeinschaft</h2>
                      <div class="mission-card__details">
                        <div class="mission-card__icon-button">
                          <div class="quickinfo">
                            <div class="quickinfo__button-wrap"><button class="icon-button quickinfo__button" type="button" aria-expanded="false" aria-controls="id-7307-content" id="id-7307-title"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="img" aria-labelledby="icon-d76b-title">
                                  <title id="icon-d76b-title">Schnellinfo zeigen</title>
                                  <use xlink:href="#icon-list"></use>
                                </svg></button></div>
                            <article class="quickinfo__panel" id="id-7307-content" aria-labelledby="id-7307-title">
                              <div class="quickinfo__content" tabindex="-1">
                                <div class="quickinfo__content-inner">
                                  <div class="quickinfo__block" id="block-id-9413">
                                    <h2 class="headline headline--3">Headline 3</h2>
                                  </div>
                                  <div class="quickinfo__block" id="block-id-2b0f">
                                    <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-a3fb">
                                    <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-d2ef">
                                    <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-984b"><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-6db9-title">
                                      <title id="icon-6db9-title">Schnellinfo schließen</title>
                                      <use xlink:href="#icon-close"></use>
                                    </svg></button>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mission-card-slider__controls slider__controls"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

{
  "size": "default",
  "dark": true,
  "headline": {
    "size": 1,
    "level": 2,
    "text": "#[span.f-w-normal Unsere Mission] #[br] Ein lebenswertes Baden-Württemberg auch für zukünftige Generationen\n"
  },
  "image": {
    "cover": true,
    "src": "https://bildermangel.de/1440x600/6E7180/8E919B.png?text=1440x600",
    "width": 1440,
    "height": 600
  },
  "items": [
    {
      "use": "mission-card",
      "settings": {
        "details": null,
        "quickinfo": true,
        "headline": {
          "text": "Wir stiften innovative Forschung"
        }
      }
    },
    {
      "use": "mission-card",
      "settings": {
        "details": null,
        "quickinfo": true,
        "headline": {
          "text": "Wir stiften eine starke Gemeinschaft"
        }
      }
    },
    {
      "use": "mission-card",
      "settings": {
        "details": null,
        "quickinfo": true,
        "headline": {
          "text": "Wir stiften bessere Bildung"
        }
      }
    },
    {
      "use": "mission-card",
      "settings": {
        "details": null,
        "quickinfo": true,
        "headline": {
          "text": "Wir stiften innovative Forschung"
        }
      }
    },
    {
      "use": "mission-card",
      "settings": {
        "details": null,
        "quickinfo": true,
        "headline": {
          "text": "Wir stiften eine starke Gemeinschaft"
        }
      }
    }
  ]
}