Inhaltsbereich Navigation Navigation Fußzeile

Banner

Verwendung

Beispielhafter Banner

Banner sind gestaltete statische Elemente mit werblichem Charakter, die zum Beispiel auf Neuerungen bei Dienstleistungen hinweisen und die Navigation zu weiterführenden Inhalten ermöglichen.

Banner enthalten immer nur ein Bild, einen begleitenden Text und idealerweise eine Überschrift, sowie bei Bedarf einen oder mehrere Call to Action-Links oder Linkbuttons. Texte und Bildinhalte müssen so prägnant gewählt werden, dass sie den zur Verfügung stehenden, fest bemaßten Raum nicht überfrachten.

Bilder müssen einen hellen Hintergrund haben, sodass sie nach links in die Hintergrundfarbe des Banners ausblenden können. Bedeutungstragende Texte und Bildinhalte dürfen sich nicht überlagern, da ansonsten bei der responsiven Darstellung keine ausreichenden Kontraste mehr gewährleistet werden können.

Karussell

Eine Abfolge von Bannern wird zum Karussell, wenn mehrere Banner an gleicher Stelle in einer linearen Reihenfolge navigiert werden können. Slides in einem Karussell stehen in keinem inhaltlichen Bezug zueinander.

Banner und insbesondere auch Banner in Karussells enthalten niemals Formular-Eingabeelemente oder tabellarische Daten. Wenn komplexere Funktionalitäten oder Inhalte abgebildet werden müssen, dann muss hier ein geeigneteres Muster wie z. B. ein Tab-Interface verwendet werden.

Positionierung

Ab dem Breakpoint XS (≥ 0px)

  • Das Banner nimmt die volle Breite des Viewports ein.
  • Die Inhalte des Banners und die Navigation liegen zwischen der ersten und letzten Gridspalte.

Ab dem Breakpoint MD (≥ 768px)

  • Die Inhalte des Banners sind linksbündig an der ersten Gridspalte ausgerichtet und haben eine Maximalbreite.
  • Das Bild des Banners kann auf der rechten Seite des Banners angezeigt werden.

Ab dem Breakpoint XL (≥ 1200px)

  • Das Banner erstreckt sich von der ersten bis zur letzten Gridspalte.

Best Practices

  • Mehrere Karussells pro Seite dürfen nicht verwendet werden. Bei einer Vielzahl von Bannern müssen diese in einem gemeinsamen Karussell zusammengeführt werden.
  • Karussells enthalten nie nur eine Abfolge von reinen Text-Slides, hierfür kann ein geeigneteres Muster wie z. B. ein Akkordeon verwendet werden.
  • In den Slides dürfen keine aufeinanderfolgenden Schritte im Prozess abgebildet werden, jede Slide hat ihren eigenen Kontext.
<section class="ds-carousel ds-carousel--static container-xl" aria-label="Banner aktuelles Thema">
      <div class="carousel-inner">
        <div class="ds-carousel__slide ds-carousel__slide--bg-1">

          <div class="ds-carousel__image-container px-lg-0">
            <img class="d-block ds-carousel__image" src="/assets/images/pictures/tokens/Banner_Slide-1_Elektr-Bescheide_h540_1.jpg" alt="">
          </div>

          <div class="container ds-carousel__content">
            <div class="row align-items-center flex-nowrap">
              <div class="col-12 col-md-7 px-6"> <h3 class="pt-0">Erhalten Sie Ihre Bescheide digital in Ihrem Postkorb</h3> <p>Wechseln Sie zur digitalen Bereitstellung Ihrer Bescheide, um diese schnell und einfach in Ihrem Posteingang abzurufen. Wir informieren Sie per E-Mail, wenn ein neuer Bescheid bereitsteht.</p> <div class="row row-cols-1 row-cols-sm-auto gx-0 gap-6"> <a href="" class="btn btn--primary"><span class="btn__text">Jetzt aktivieren</span></a> </div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Banner - dynamisch

<section id="ds-carousel" class="carousel slide carousel-fade ds-carousel container-xl" aria-label="Text-Bild-Karussell für aktuelle Themen" aria-roledescription="Karussell" data-desy-carousel data-desy-carousel-play-text="starten" data-desy-carousel-pause-text="pausieren">

    <div class="carousel-inner" aria-atomic="false" aria-live="off" data-desy-carousel-inner>

      <div id="slide-1" class="carousel-item active ds-carousel__slide ds-carousel__slide--bg-1" role="tabpanel" aria-labelledby="shows-slide-1" tabindex="0" data-desy-carousel-slide>
        <div class="ds-carousel__image-container px-lg-0">
          <img class="d-block ds-carousel__image" src="/assets/images/pictures/tokens/Banner_Slide-1_Elektr-Bescheide_h540_1.jpg" alt=""></img>
        </div>
        <div class="container ds-carousel__content">
          <div class="row align-items-center flex-nowrap">
            <div class="col-12 col-md-7 px-6">
              <h3 class="pt-0">Erhalten Sie Ihre Bescheide digital in Ihrem Postkorb</h3>
              <p>Wechseln Sie zur digitalen Bereitstellung Ihrer Bescheide, um diese schnell und einfach in Ihrem Posteingang abzurufen. Wir informieren Sie per E-Mail, wenn ein neuer Bescheid bereitsteht.</p>
              <div class="row row-cols-1 row-cols-sm-auto gx-0 gap-6">
                
    
    
    
    
    
    
    
    
        <a href=""class="btn btn--primary" >
            
            <span class="btn__text">Jetzt aktivieren</span>
       </a>
    

              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="slide-2" class="carousel-item ds-carousel__slide ds-carousel__slide--bg-2" role="tabpanel" aria-labelledby="shows-slide-2" tabindex="0" data-desy-carousel-slide>
        <div class="ds-carousel__image-container px-lg-0">
          <img class="d-block ds-carousel__image" src="/assets/images/pictures/tokens/Banner_Slide-2_Zoll-Ident-App_h540.jpg" alt=""></img>
        </div>
        <div class="container ds-carousel__content">
          <div class="row align-items-center flex-nowrap">

            <div class="col-12 col-md-7 px-6">
              <h3 class="pt-0">Kinderleicht anmelden mit der Zoll-Ident App</h3>
              <p>Sicher & schnell im Zoll-Portal anmelden - so geht’s: App einrichten, QR-Code scannen und einfach das Zoll-Portal nutzen.</p>
              <div class="row gx-0 gap-6 flex-nowrap mt-8">
                <a href="#" class="anchor col-auto">
                  <img src="/assets/images/logos/apple-app-store-badge-de.svg" alt="Laden im Apple App Store" height="48">
                </a>
                <a href="#" class="anchor col-auto">
                  <img src="/assets/images/logos/google-play-badge-de.svg" alt="Jetzt bei Google Play" height="48">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="slide-3" class="carousel-item ds-carousel__slide ds-carousel__slide--bg-3" role="tabpanel" aria-labelledby="shows-slide-3" tabindex="0" data-desy-carousel-slide>
        <div class="ds-carousel__image-container px-lg-0">
          <img class="d-block ds-carousel__image" src="/assets/images/pictures/tokens/Banner_Slide-3_Pers-Daten-aktuell_h540.jpg"  alt=""></img>
        </div>
        <div class="container ds-carousel__content">

          <div class="row align-items-center flex-nowrap">

            <div class="col-12 col-md-7 px-6">
              <h3 class="pt-0">Halten Sie Ihre persönlichen Daten aktuell</h3>
              <p>Bitte halten Sie Ihre Daten auf dem neusten Stand oder vervollständigen Sie diese. In den Konto-Einstellungen können Sie außerdem festlegen, zu welchen Themen Sie Meldungen erhalten möchten.</p>
              <div class="row row-cols-1 row-cols-sm-auto gx-0 gap-6">
                
    
    
    
    
    
    
    
    
        <a href=""class="btn btn--secondary" >
            
            <span class="btn__text">Zu meinen persönlichen Daten</span>
       </a>
    

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="container-sm d-flex justify-content-center pt-4 px-xl-0" data-desy-carousel-pagination>

      <div class="d-flex justify-content-center align-items-center ds-carousel__controls-wrapper">

        <div class="ds-carousel__pagination-controls" data-desy-carousel-pagination-controls role="tablist" aria-labelledby="ds-carousel">
          <button type="button" id="shows-slide-1" data-desy-slide-index="0" class="ds-carousel__progressbar active" aria-controls="slide-1" role="tab" aria-selected="true" data-desy-carousel-progressbar>
            <span class="ds-carousel__progressbar__visible-bar"></span>
            <span class="visually-hidden">Folie 1 anzeigen</span>
          </button>
          <button type="button" id="shows-slide-2" data-desy-slide-index="1" class="ds-carousel__progressbar" aria-controls="slide-2" role="tab" aria-selected="false" tabindex="-1" data-desy-carousel-progressbar>
            <span class="ds-carousel__progressbar__visible-bar"></span>
            <span class="visually-hidden">Folie 2 anzeigen</span>
          </button>
          <button type="button" id="shows-slide-3" data-desy-slide-index="2" class="ds-carousel__progressbar" aria-controls="slide-3" role="tab" aria-selected="false" tabindex="-1" data-desy-carousel-progressbar>
            <span class="ds-carousel__progressbar__visible-bar"></span>
            <span class="visually-hidden">Folie 3 anzeigen</span>
          </button>
        </div>

        <button class="btn btn--close btn--icon-only ds-carousel__play-pause-button playing" type="button" data-desy-carousel-play-pause aria-controls="ds-carousel">
          
    <span class="ds-icon-videoplayer" aria-hidden="true"></span>

          
    <span class="ds-icon-pause" aria-hidden="true"></span>

        </button>

      </div>

    </div>
  </section>