1. Header
2. Inhaltsbereich
3. Footer

Die Infobox wird mit den Regionen Header (Regionsbeschriftung “Titelzeile-Infobox”), Main (Regionsbeschriftung “Inhalt-Infobox”) und Footer (Regionsbeschriftung “Fußzeile-Infobox”) ausgezeichnet.

Der Kopfbereich (Header) der Infobox enthält: 

• Kritischer Badge (optional): Damit die wichtige Information für Nutzende sofort zu erkennen ist, wird das kritische Badge am Anfang des Infoboxtitels hinterlegt und gemeinsam ausgelesen. Die Überschrift der Infobox setzt sich also in diesem Fall aus kritischen Badge und Titel zusammen.
• Titel “Weitere Informationen zu „[Bezeichnung]”” (Im Code H2 gekennzeichnet): Dabei benennt die Bezeichnung das Objekt, auf das sich die dargestellten Detailinformationen beziehen 
• Status Badge (optional)
• Hinweistext (optional)

Im Inhaltsbereich (Main) der Infobox dürfen diese Komponenten platziert werden:

• Eingabefelder (read-only) 
• Mehrzeilige Eingabefelder (read-only) 
• Mehrfachauswahlfelder (read-only)
• Links 
• Buttons 
• Mit Ausnahme der Buttons dürfen die Elemente nur untereinander platziert werden.

Es darf kein Info-Button innerhalb einer Infobox platziert werden. 

Um die Größe des Inhaltsbereichs zu beschränken, darf der Inhaltsbereich jedoch nie mehr als drei Eingabe- bzw. Auswahlfelder und zusätzlich drei Buttons oder Links beinhalten (also maximal sechs Elemente).

Der Fußbereich (Footer) enthält einen Tertiär-Button mit Icon auf der linken Seite. Der Button hat das Label “Schließen”.

Die Infobox wird mit dem Info-Button geöffnet (Programmatische Beschriftung “Weitere Informationen”). Nach dem Öffnen der Infobox liegt der Tastaturfokus auf dem ersten fokussierbaren Element.

Der Tastaturfokus kann die Infobox nicht verlassen, solange die Infobox geöffnet ist.
Interaktive Elemente außerhalb der Infobox reagieren nicht auf Mausinteraktion. 

Die Infobox kann durch den Button “Schließen” im Footer geschlossen werden.
Der Tastaturfokus liegt dann wieder auf dem Info-Button.

Fensterbreite mindestens 448px:

• Die Infobox hat eine Breite von 400px und einen äußeren Abstand zum Fenster von mindestens 24px. 
• Die Höhe der Infobox wird durch ihren Inhalt bestimmt.

Fensterbreite unter 448px:

• Die Infobox wird bildschirmfüllend dargestellt.
• Breite der Infobox entspricht der Fensterbreite. 
• Wäre die Infobox kleiner als die Fensterhöhe, wird der Inhaltsbereich verlängert, bis die Infobox die volle Höhe des Fensters einnimmt.
• Ist die Infobox länger als die Fensterhöhe, wird die Infobox scrollbar.

Die Infobox öffnet sich immer im sichtbaren Bereich des Fensters und soll mit einer Ecke den Info-Button / Kalendereintrag berühren (horizontal und vertikal jeweils 8px vom Rand des Buttons/Kalendereintrags versetzt).

Wenn horizontal zu beiden Seiten des Info-Buttons genug Platz für die Infobox vorhanden ist, soll sich die Infobox zur rechten Seite öffnen. Wenn vertikal in beide Richtungen ausreichend Platz vorhanden ist, soll sich die Infobox nach unten hin öffnen.

Wenn der Abstand vom Info-Button zum Fensterrand in der Vertikalen oder Horizontalen nicht ausreicht, die Fenster-Breite aber mindestens 448px beträgt, darf die Infobox den Info-Button partiell oder vollständig überlagern.

• Ist in alle Richtungen ausreichend Platz vorhanden, öffnet sich die Infobox nach rechts unten (Abb. 1).
• Ist vertikal in beide Richtungen ausreichend Platz vorhanden, öffnet sich die Infobox nach unten (Abb. 2).
• Ist horizontal in beide Richtungen ausreichend Platz vorhanden, öffnet sich die Infobox nach rechts (Abb. 3).

• Ist horizontal zu keiner Seite ausreichend Platz vorhanden, öffnet sich die Infobox zu der Seite mit dem größten Abstand zwischen Info-Button und Fensterrand (Abb. 4).
• Ist vertikal zu keiner Seite ausreichend Platz vorhanden, öffnet sich die Infobox nach oben mit einem Abstand von 24px zum oberen Fensterrand (Abb. 5). Ist die Infobox zudem länger als die Fensterhöhe, erstreckt sie sich über den sichtbaren Bereich nach unten.

• Ist zwischen Info-Button und Fensterrand zu keiner Seite genügend Platz vorhanden, überlagert die Infobox den Info-Button (Abb. 6).
• Ist die Infobox zudem länger als die Fensterhöhe, erstreckt sie sich über den sichtbaren Bereich nach unten (Abb. 7).

Ist die Infobox länger als der Seiteninhalt, wird die Seite nach unten verlängert, so dass die Infobox zuzüglich 24px Abstand nach unten darstellbar und somit auch über vertikales Scrollen erreichbar ist. Befinden sich Nutzende auf einer Seite mit grauem Hintergrund (z. B. Tabellen-Seiten oder Seiten mit Split-View), so wird die graue Fläche nach unten verlängert. Befinden sich Nutzende beispielsweise in einem Fullscreen-Formular, so wird der Weißraum zwischen letztem Formularelement und Formularfooter entsprechend verlängert.

Nach dem Schließen der Infobox bleibt die Scrollposition bestehen (es wird nicht zurück zu der Position gescrollt, die vor Öffnen der Infobox aktiv war). Falls die Seite durch Öffnen der Infobox “künstlich verlängert” wurde, so wird diese Verlängerung entfernt, sobald die Infobox geschlossen wird. Falls sich Nutzende innerhalb dieses verlängerten Bereichs befunden haben, so befinden sie sich nach Schließen der Infobox am untersten Punkt der wieder verkürzten Seite.

Bei zu wenig Platz für beide Buttons, rutscht der zweite Button in die nächste Zeile. 

Liegt die Breite der Infobox unter 448px, gibt es nur einen Button pro Zeile. Jeder Button nimmt die volle Breite ein.

Von der Vorlesesoftware werden die Elemente in der Infobox in der visuellen Reihenfolge von oben nach unten und innerhalb einer Zeile von links nach rechts ausgegeben.

• Siehe Button: Tastaturbedienung
• Siehe Links: Tastaturbedienung
• Infobox kann zusätzlich mit ESC geschlossen werden

• Siehe Button: Mausbedienung
• Siehe Links: Mausbedienung
• Infobox kann zusätzlich durch Klicken außerhalb der Infobox geschlossen werden