In diesem Kapitel finden Sie Informationen zum Design und Einsatzzweck unterschiedlicher User-Interface-Komponenten für Webanwendungen sowie Beispielseiten, die deren Einsatz und Zusammenspiel zeigen.
Für Web-Entwickler werden die Code-Ressourcen über die Web Component Library unter https://styleguide.bundesregierung.de/web-components/ zur Verfügung gestellt. Der Zugang zur Web Component Library ist mit Benutzername und Passwort geschützt. Zugang hierzu erhalten grundsätzlich nur Mitarbeiterinnen und Mitarbeiter von Bundesbehörden. Externe Auftragnehmer von Bundesbehörden wenden sich bitte zum Erhalt der Daten an ihren jeweiligen Auftraggeber.
Der Aufbau der Komponenten folgt dem Atoms-Modell. Dabei werden die Komponenten basierend auf ihren Einzelbestandteilen und ihrer html-Struktur in die drei Typen Atome, Moleküle und Organismen gegliedert. Nachfolgend werden alle Komponenten ihrer Zugehörigkeit nach aufgelistet und deren Haupteigenschaft beschrieben. Abbildungen und eine Beschreibung der jeweiligen Komponente können über den Link „Details“ aufgerufen werden. Der zugehörige Code und eventuelle Ressourcen können von Web-Entwicklern über den Link „Code“ direkt in der Component Library aufgerufen werden.
Die Dokumentation der Komponenten befindet sich, wie die Komponenten selbst, in stetiger Weiterentwicklung. Sollten Sie bestimmte Komponenten oder Code-Ressourcen nicht vorfinden, wenden Sie sich gern an corporate-design@bpa.bund.de.
Atome sind die kleinstmöglichen Bestandteile. Sie bestehen meist nur aus 1–3 html-Elementen und bilden die Grundlage weiterer Komponenten-Typen.
| Icon | Bildsymbole, die Informationen platzsparend auf kleinstem Raum vermitteln | Details | Code |
| Heading | Text-Überschriften innerhalb eines Textes | Details | Code |
| Paragraph | Textabsätze innerhalb eines Fließtextes | Details | Code |
| Title | Haupt-Überschrift eines Inhalts | Details | Code |
Moleküle bilden die nächstgrößere Einheit. Sie bestehen aus mehreren html-Elementen und können dabei auch mehrere Atome beinhalten. Sie selbst können Bestandteile von Organismen sein.
| Button | Ermöglichen es, Aktionen auszulösen | Details | Code |
| Listen-Teaser | Besteht aus kurzen Text- und Bildelementen, die auf andere Website-Inhalte aufmerksam machen sollen und auf diese verweisen | Details | Code |
| Zitat | Stellt Zitate dar und hebt diese hervor | Details | Code |
Organismen sind die umfangreichsten Komponenten. Sie bestehen aus vielen html-Elementen, Atom- und Molekül-Komponenten und bilden damit die die wesentlichen Inhalts- und Funktions-Bestandteile einer Webseite.
| Eigenwerbung | Bewirbt eine Veranstaltung | Details | Code |
| Eilmeldungs-Ticker | Hebt Kurznachrichten oberster Priorität hervor | Details | Code |
| Footer | Fuß-Bereich einer jeden Seite | Details | Code |
| Form | Formular | Details | Code |
| Header | Kopf-Bereich einer jeden Seite | Details | Code |
| Hero-Teaser | Größter und prominentester Teaser | Details | Code |
| Teaser-Liste | Liste, die mehrere Text-Teaser enthält | Details | Code |
| Teaser-Banner | Großzügiger Teaser für Audio-, Livestream- oder Newsletter-Inhalte | Details | Code |
