1. Titel der Gruppe
2. Link oder Button

Jede Gruppe hat einen Titel, welcher so kurz und präzise wie möglich zu formulieren ist. Es handelt sich visuell um eine Überschrift vom Typ “Subhead”.

Unter dem Gruppentitel kann eine Liste an Links oder Buttons hinterlegt werden.

Nach Möglichkeit sollten pro Gruppe Links und Buttons eines einheitlichen Typs verwendet werden. Beispielsweise: 

• Nur Links mit Icon auf der Linken Seite
• Nur Primäre/Sekundäre Buttons mit Icon auf der Linken Seite
• Nur Sekundäre Buttons ohne Icon

Eine zu starke Mischung unterschiedlicher Elemente ist zu vermeiden, damit visuell kein zu unruhiges Bild entsteht.

Hinweis: Links im Hauptmenü können ohne Unterstreichung dargestellt werden.

Bei ausreichend Platz ist es möglich, mehrere Gruppen nebeneinander anzuordnen (maximal 5). Jede einzelne Gruppe muss dabei jedoch mindestens 272 Pixeln breit sein und zwischen Gruppen muss in der Horizontalen ein Mindestabstand von 48 Pixeln bestehen bleiben.   
Können bei kleiner werdendem Fenster Mindestabstand und Minimalbreite nicht mehr erreicht werden, so bricht die letzte Gruppe innerhalb einer Reihe in die nächste Zeile um. Es bleibt nach oben ein Abstand von 64 Pixeln zur längsten Gruppe der darüberliegenden Zeile bestehen.

Somit ergeben sich folgende Umbruchpunkte:  
(Die angegebenen Pixelwerte in der nachfolgenden Liste bezieht sich jeweils auf alle Spalten des Formularrasters des Containers, in dem sich die “Gruppen-Gruppe” befindet. )

• Über 1552px: Max. 5 Gruppen/Zeile
• Unter 1552px: Max. 4 Gruppen/Zeile
• Unter 1232px: Max. 3 Gruppen/Zeile
• Unter 912px: Max. 2 Gruppen/Zeile
• Unter 592px: Max. 1 Gruppe/Zeile

Die Breite aller Gruppen innerhalb eines Blocks muss dabei gleich sein.

Siehe Button und Link.

Je nach Verwendung auf der Seite sollte die Überschrift im Code ggf. als eine übergeordnete Hierarchiestufe klassifiziert sein (Beispiel: Im GeFa Hauptmenü ist diese als H3 auszuzeichnen.)

• Mit Tab wird das erste Element einer Gruppe fokussiert.
• Enter- oder Leertaste führt die Funktion aus.
• Mit Tab wird zum nächsten interaktiven Element gewechselt und dieses erhält den Fokus.

• Klicken mit linker Maustaste auf einen Button oder Link innerhalb einer Gruppe führt die Aktion aus.
• Klick mit linker Maustaste auf ein anderes interaktives Element auf der Seite, lässt den Tastaturfokus zu diesem wechseln.