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
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
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
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
|
