Opener: Fullwidth Image with Overlay

Für die Eröffnung einer Seite eines Auftritts, empfiehlt sich ein auffälliges und einnehmendes Element, das den Zweck oder Inhalt der Seite vermittelt. Hierfür gibt es verschiedene Möglichkeiten (Opener), die abhängig von dem bezweckten Kommunikationsauftrag der Seite gewählt werden können. Es darf jeweils nur ein Opener auf einer Seite verwendet werden und das Element muss das erste Inhaltselement der Seite sein.

For the Opener for a page of a site, you should use an eye-catching and engaging element that conveys the purpose or content of the page. There are various possibilities (Opener) for this; the choice should be made according to the communication task of the page. Only one Opener can be used on a page and the element must be the first content element on the page.

Table of contents

Opener ohne abgedunkelten Hintergrund

.@organisms/herounit/homepage/herounit-image-with-overlay.twig

@copyright

Pagetitle

Lorem ipsum dolor sit

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                    <p class="text">Lorem ipsum dolor sit</p>
                </div>
    
                
                <form role="search" >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField4543">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField4543" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

Opener ohne abgedunkelten Hintergrund

Mit der .image-Klasse .no-darken kann die Abdunklung des Bildes deaktiviert werden. Bitte genug Kontrast zum Text sicherstellen.

@copyright

Pagetitle

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                </div>
                        
                <form role="search" >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField449">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField449" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

Opener mit Teasern (optional)

Drei optionale Teaser im unteren .tiles Bereich des Bildes.

@copyright

Pagetitle

Teasertile Bühne

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology.

Teasertile Bühne

Lorem ipsum philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.

Teasertile Bühne

Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                </div>
    
                
                <form role="search" >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField1439">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField1439" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="tiles">
        <div class="flexgrid grid--3">

                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    
<h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>

                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    
<h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Lorem ipsum philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>
            
                <div class="modul-teasertile_buehne" data-add-clickable-area="full" >
                    
<h2 class="title">Teasertile Bühne</h2>
                        <p class="text">
                            Philosophy is considered a science but it is difficult to say, when one has to compare with an ordinary science, for example biology, or chemistry. This is a question that turns into.
                        </p>
                        <span class="action">
                            <a href="#" class="more" aria-label="Teaser" title="Teaser">Mehr lesen</a> 
                        </span>
                </div>
        </div>
    </div>
  </div>

Opener mit Texthintergrund

Mit der Klasse .textbox.textbox--white kann der Hintergrund eingefärbt werden.

@copyright

Ich bin der Titel

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox textbox--color-white">
                    <h1 class="title">Ich bin der Titel</h1>
                    <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.</p>
                </div>
            </div>
        </div>
    </div>
  </div>

Mit der Klasse .textbox.textbox--dark kann der Hintergrund eingefärbt werden.

@copyright

Ich bin der Titel

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image">
            <img src="../../styleguide/static/placeholder_16x9.jpg" alt="Alternative Bildbeschreibung" >
        </div>
        <p class="image__copyright">@copyright</p>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox textbox--color-dark">
                    <h1 class="title">Ich bin der Titel</h1>
                    <p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.</p>
                </div>
            </div>
        </div>
    </div>
  </div>

SVG-Animation mit Start-/Stop Button

Alle sichtbaren Bewegungen müssen durch den vom Design System bereitgestellten Pause-/Start-Mechanismus vollständig angehalten und an derselben Position fortgesetzt werden. Bitte beachten Sie außerdem die Sicherheitsvorgaben für die Verwendung von SVG-Dateien und des object-Elements.

Aufbau der SVG
- Die SVG-Animation darf mit SMIL, CSS-Keyframes oder einer Kombination aus beiden umgesetzt werden.
- SMIL-Animationen müssen über SVGSVGElement.pauseAnimations() und SVGSVGElement.unpauseAnimations() steuerbar sein.
- CSS-Keyframe-Animationen müssen für animation-play-state die Custom Property --animation-play-state verwenden.
- JavaScript, Event-Handler und eingebettete HTML-Inhalte sind innerhalb der SVG-Datei nicht zulässig. Weitere Vorgaben enthält der Reiter "Sicherheitsregeln".
- Die SVG-Datei selbst darf keine externen Bilder, Schriften, Stylesheets, Skripte oder sonstigen Dateien nachladen.
- Die SVG muss eine gültige viewBox besitzen, zum Beispiel viewBox="0 0 1920 1080".
- Für vollflächige Darstellung: preserveAspectRatio="xMidYMid slice"
- Wichtige Inhalte müssen in einem sicheren, zentralen Bildbereich, der sogenannten Safe Area, platziert werden, da durch slice Randbereiche abgeschnitten werden können.
- Die SVG muss sich responsiv skalieren lassen. Feste width- und height-Werte dürfen die Skalierung im Container nicht einschränken.
- Dekorativer Text kann für eine konsistente Darstellung in Pfade umgewandelt werden. Inhaltlich relevanter Text muss außerhalb der SVG als HTML ausgegeben werden.
Wichtig Sicherheitsregeln
Eine SVG-Datei darf nicht wie ein normales Foto behandelt werden. Sie kann Programmcode, Verweise und interaktive Inhalte enthalten. Deshalb darf nur eine automatisch geprüfte und bereinigte Kopie veröffentlicht werden.

Beim Hochladen
- Nur berechtigte Personen dürfen SVG-Dateien hochladen.
- Jede SVG-Datei wird unabhängig von ihrer Herkunft automatisch geprüft.
- Die SVG-Datei sollte nach der Optimierung maximal 300 KB groß sein. Dateien über 500 KB werden vom CMS abgelehnt.
- Das System muss anhand des Dateiinhalts prüfen, ob es sich tatsächlich um eine gültige SVG-Datei handelt. Die Dateiendung allein reicht nicht aus.
- Der Dateiname wird vom System neu vergeben, bevor die Datei gespeichert wird.
Prüfung des SVG-Inhalts
- Die SVG muss vor der Veröffentlichung serverseitig geprüft und bereinigt werden. Dabei dürfen nur ausdrücklich freigegebene SVG-Elemente und Attribute erhalten bleiben.
- Die SVG darf keine script-Elemente, JavaScript-URLs oder anderen ausführbaren Programmcode enthalten.
- Automatisch ausgeführte Aktionen über Attribute, wie onload, onclick, onerror oder onmouseover, müssen entfernt werden. Alternativ muss die Datei abgelehnt werden.
- Das Element foreignObject ist nicht zulässig und muss entfernt oder die SVG-Datei abgelehnt werden.
- Die SVG darf keine externen Bilder, Schriften, Stylesheets, Skripte oder sonstigen Dateien nachladen.
- Interne Verweise innerhalb der SVG, beispielsweise href="#element" oder fill="url(#gradient)", müssen weiterhin erlaubt sein.
- XML-Funktionen zum Einbinden oder Nachladen zusätzlicher Inhalte müssen deaktiviert werden. Dazu gehören DOCTYPE, DTDs und externe XML-Entities.
- Die Datei muss sicher als XML verarbeitet werden und ein svg-Element als oberstes Element besitzen.
Verarbeitung und Speicherung
- Die hochgeladene Originaldatei darf nicht direkt veröffentlicht werden. Auf der Website wird ausschließlich die geprüfte, bereinigte und neu gespeicherte Version verwendet.
- Fehlerhafte Dateien und Dateien mit nicht erlaubten Inhalten werden abgelehnt.
- Die verwendeten Programme und Bibliotheken zur Prüfung und Bereinigung werden regelmäßig aktualisiert.
Auslieferung auf der Website
- Die SVG-Datei wird ausschließlich von der eigenen Website oder einer ausdrücklich freigegebenen Quelle geladen.
- Die Website beschränkt über ihre Content Security Policy, kurz CSP, aus welchen Quellen SVG-Dateien geladen werden dürfen.
- SVG-Dateien werden vom Server mit dem korrekten Dateityp image/svg+xml ausgeliefert.
- Die SVG enthält keine eigenen Schaltflächen, Links oder anderen Bedienelemente.
- Start und Pause werden ausschließlich über den Button der Design-System-Komponente gesteuert.
Prüfung vor der Veröffentlichung
- Die SVG lädt keine zusätzlichen Inhalte von fremden Servern.
- Die Browser-Konsole zeigt beim Laden und Bedienen der Animation keine Sicherheits- oder Ladefehler.
- Die geprüfte Datei wurde von einer technisch verantwortlichen Person freigegeben.

Pagetitle

  <div class="herounit-homepage herounit-image-with-overlay fullwidth">
    <div class="image image--herounit-coverall-with-overlay no-darken">
        <div class="image__image image__image--animation js-svg-animation">
            <object
                class="image__animation" 
                type="image/svg+xml" 
                data="../../styleguide/static/svg/test-animation-css-smil.svg" 
                tabindex="-1"
                aria-hidden="true">
            </object>
        </div>
        <button
            class="image__animation-toggle" 
            type="button" 
            hidden>
            <i class="bicon bicon-pause" aria-hidden="true"></i>
            <span class="image__animation-toggle-label">Animation anhalten</span>
            <span class="image__animation-messages" hidden>
                <span data-role="pause">Animation anhalten</span>
                <span data-role="play">Animation starten</span>
            </span>
        </button>
        <div class="image__overlay">
            <div class="inner"> 
                <div class="textbox">
                    <h1 class="title">Pagetitle</h1>
                </div>
    
                
                <form role="search" >
                    <div class="searchform-slot ">
                        <div class="form-group">
                            <label class="aural" for="myInputField5255">Suchbegriff</label> 
                            <div class="searchterm">
                                <div class="input-wrapper">
                                    <i class="bicon bicon-search lens" aria-hidden="true"></i>
                                    <input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="myInputField" id="myInputField5255" >
                                </div>
                                <button class="submit " type="submit" title="Suchen">
                                    <span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
  </div>

Opener: Fullwidth Image with Overlay

Opener ohne abgedunkelten Hintergrund

Pagetitle

Opener ohne abgedunkelten Hintergrund

Pagetitle

Opener mit Teasern (optional)

Pagetitle

Teasertile Bühne

Teasertile Bühne

Teasertile Bühne

Opener mit Texthintergrund

Ich bin der Titel

Ich bin der Titel

SVG-Animation mit Start-/Stop Button

Beim Hochladen

Prüfung des SVG-Inhalts

Verarbeitung und Speicherung

Auslieferung auf der Website

Prüfung vor der Veröffentlichung

Pagetitle