Navigation und Service

Komponenten

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