Navigation und Service

Webanwendungen

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.

Web Component Library

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.

Basiselemente & Assets

Die CD-Basiselemente werden für Webanwendungen um zusätzliche medienspezifische Angaben und Ressourcen ergänzt. mehr

Beispielseiten

In den Beispielseiten wird das Zusammenspiel der Organismen – und damit auch Moleküle und Atome – sichtbar. Sie dienen als Orientierungshilfe für den Aufbau der Webanwendung. mehr

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