# GOV.UK Designsystem ## GOV.UK Designsystem-Oberflächenvorschau Senden Sie leere Felder ab, folgen Sie den verknüpften Fehlermeldungen, korrigieren Sie die Antworten und ändern Sie einen Wert auf der Prüfseite. Es werden keine Informationen an einen anderen Ort übermittelt. ## GOV.UK Designsystem-Designsystem-Referenz GOV.UK Frontend 6.5.1 und aktuelle Dokumentation zu v6, geprüft am 3. Oktober 2026. Hexadezimalwerte bilden eine Referenz zum aktuellen Stand; bevorzugen Sie in der Produktion benannte Sass-Funktionen. Die Vorschau lädt das lokale offizielle CSS und JavaScript mit einer alternativen Schriftart und einer eigenständigen Identität. ### Schriftart und responsiver Textsatz | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; Seitentitel. | | govuk-heading-l | 27px / 30px → 36px / 40px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; Frageüberschrift. | | govuk-heading-m | 21px / 25px → 24px / 30px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; Abschnittsüberschrift. | | govuk-body-l | 21px / 25px → 24px / 30px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; Einleitungstext. | | govuk-body | 19px / 25px → 19px / 25px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; gewöhnlicher Text. | | govuk-body-s | 16px / 20px → 16px / 20px | Schriftgröße / Zeilenhöhe unter- und oberhalb des Tablet-Breakpoints; ergänzender Text. | ### Schriftart-Eignung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | GDS Transport | service.gov.uk services | Für Dienste auf dieser Subdomain ist die offizielle Schriftart erforderlich. | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | Von den ungebundenen Frontend-Richtlinien empfohlene alternative Schriftfamilie; es werden keine Transport-Dateien geladen. | ### Responsive und feste Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 1 | 5px → 5px; static 5px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 2 | 10px → 10px; static 10px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 3 | 15px → 15px; static 15px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 4 | 15px → 20px; static 20px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 5 | 15px → 25px; static 25px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 6 | 20px → 30px; static 30px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 7 | 25px → 40px; static 40px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 8 | 30px → 50px; static 50px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | | unit 9 | 40px → 60px; static 60px | Responsiv von klein → groß; govuk-spacing(unit) bleibt statisch. | ### Funktionale Farbnamen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | Hauptinhalt mit guter Lesbarkeit | | govuk-functional-colour("secondary-text") | #484949 | Hinweise und ergänzende Informationen | | govuk-functional-colour("link") | #1a65a6 | Gewöhnliche Links | | govuk-functional-colour("link-hover") | #0f385c | Link bei Hover | | govuk-functional-colour("link-visited") | #54319f | Besuchte Ziele | | govuk-functional-colour("border") | #cecece | Strukturelle Trennelemente | | govuk-functional-colour("input-border") | #0b0c0c | Eingaberahmen | | govuk-functional-colour("focus") | #ffdd00 | Nur Tastaturfokus | | govuk-functional-colour("focus-text") | #0b0c0c | Text auf gelbem Fokus-Hintergrund | | govuk-functional-colour("error") | #ca3535 | Validierungsrückmeldung | | govuk-functional-colour("success") | #0f7a52 | Erfolgsrückmeldung | | govuk-functional-colour("body-background") | #ffffff | Lesefläche | ### Layout-Grundelemente | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | govuk-width-container | 1020px maximum | Standardbreite des äußeren Inhaltsbereichs; kann bei tatsächlichem Inhaltsbedarf überschrieben werden. | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | Fragen und Fließtext in einer gut lesbaren Spalte halten; bei kleinen Breiten untereinander anordnen. | | govuk-main-wrapper | Main content region | Innerhalb des Breitencontainers für das Hauptelement verwenden. | ### Breakpoints und Umrandungen von Steuerelementen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Sass-Breakpoint-Schlüssel, kein zusätzliches Layout, das zwingend erforderlich ist. | | $govuk-breakpoints.tablet | 641px | Standardgrenze für responsiven Textsatz, Abstände und Raster; die Style-Richtlinien beschreiben sie als breiter als 640px. | | $govuk-breakpoints.desktop | 769px | Zusätzlicher benannter Breakpoint. | | $govuk-focus-width | 3px | Breite der Fokusumrandung; zusammen mit der dokumentierten Fokusdarstellung verwenden. | ## GOV.UK Designsystem Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## GOV.UK Designsystem Version und Identität ### Eine v6-Referenz mit eigenständiger Identität > Diese Referenz folgt der v6-Dokumentation, einschließlich der größeren Schrift auf kleinen Bildschirmen und der überarbeiteten funktionalen Farben. Ältere Screenshots können daher andere Werte zeigen. Die obige Tabelle enthält die aktuell dokumentierten Standardwerte, statt unbemerkt verschiedene Versionen zu vermischen. Die Live-Studie zeigt eine fiktive Anfrage zu einer Gemeinschaftsveranstaltung. Sie verwendet weder eine Krone noch das GOV.UK-Wortzeichen, die Transport-Schriftart oder einen echten Übermittlungsendpunkt. Aufgabeninhalte und lokale Validierungsregeln sind Entscheidungen der Anwendung; der Aufbau der Komponenten orientiert sich an den verlinkten offiziellen Beispielen. Unterstützende Spezifikation lesen ### Die passende Schriftart auswählen Für einen berechtigten Dienst auf service.gov.uk gehört GDS Transport zur offiziellen Implementierung. Öffentliche Dienste auf anderen Domains müssen eine andere Schriftart verwenden. Diese unabhängige Studie folgt der empfohlenen Alternative Helvetica Neue, Helvetica, Arial, sans-serif; ein Wechsel der Schriftart macht es nicht erforderlich, die Hierarchie des Systems aufzugeben. Unterstützende Spezifikation lesen ## GOV.UK Designsystem Typografie und Leserythmus ### Das vollständige Wertepaar für Schriftgröße und Zeilenhöhe verwenden Verwenden Sie govuk-heading-l für die Frage zur Anfrage und govuk-body für den ergänzenden Text. Auf kleinen Bildschirmen ist die Überschrift 27/30px groß, auf größeren 36/40px. Der Fließtext bleibt in v6 bei 19/25px. Eine Fließtextgröße von 16px auf kleinen Bildschirmen würde eher das frühere Verhalten als diese Referenz wiedergeben. Die Größentabelle enthält beide Werte, da ein Screenshot für eine einzelne Bildschirmgröße keine Regel für responsives Verhalten belegen kann. Das produktive CSS verwendet relative Einheiten. Eine Klasse wie govuk-heading-l bestimmt das Erscheinungsbild, aber nicht, ob das semantische Element h1 oder h2 sein sollte. ``` .app-question-note { @include govuk-font($size: 19); } // Size and line-height only, without changing the font family: .app-existing-font { @include govuk-font-size($size: 19); } ``` Code-Referenz Unterstützende Spezifikation lesen ## GOV.UK Designsystem Abstände und Seitenbreite ### Responsive Einheiten entsprechen nicht festen Pixelwerten Abstandseinheit 6 eignet sich zwischen Fragegruppen: Auf einem schmalen Bildschirm ergibt sie 20px, oberhalb der Tablet-Breite 30px. Der statische Helfer govuk-spacing(6) gibt bei jeder Bildschirmbreite 30px zurück. Die Wahl des Helfers verändert also das Verhalten, auch wenn beide Varianten auf dem Desktop identisch aussehen. ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` Code-Referenz Unterstützende Spezifikation lesen ### Platzieren Sie eine Lesespalte im Container Der Container für die Standardbreite hat eine maximale Breite von 1020px. Darin begrenzt eine zweispaltige Grid-Spalte den Fragenbereich, während die äußere Seitenstruktur ausgerichtet bleibt. Auf kleinen Bildschirmen werden die Inhalte automatisch untereinander angeordnet. Unsere Vorschau behält diese Lesehierarchie bei, statt jedes Feld über eine Dashboard-Karte zu verteilen. ```

Tell us about the event

``` Code-Referenz Unterstützende Spezifikation lesen ## GOV.UK Designsystem Farbe und Fokus ### Verwenden Sie Rollen, statt alte Screenshots nachzubilden Die funktionale Linkfarbe in v6 ist #1a65a6, die Fehlerfarbe #ca3535. Verwenden Sie in einem echten Sass-Build govuk-functional-colour("link") und govuk-functional-colour("error"), damit bei einem Upgrade die Palette des Projekts übernommen werden kann. Diese funktionalen Rollen unterscheiden sich von der Wahl einer allgemeinen Rot- oder Blaufarbe für Illustrationen. Das Fokusgelb ist ausschließlich dem Fokus vorbehalten. Es sollte nicht als Standardfarbe für Auswahlmöglichkeiten oder als Werbeakzent dienen. In der Vorschau wird Gelb mit dunklem Text und einer deutlich sichtbaren dunklen Umrandung kombiniert. Ein Fehler wird durch Text und Platzierung kenntlich gemacht, nicht allein durch Rot. ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` Code-Referenz Unterstützende Spezifikation lesen ## GOV.UK Designsystem Fragekomponenten ### Ein Feld ist eine zusammenhängende Struktur Das Eingabebeispiel kombiniert govuk-form-group, govuk-label, govuk-hint und govuk-input. Das Label verweist auf die ID des Eingabefelds; aria-describedby verweist auf den Hinweis. Bei ungültiger Eingabe fügen Sie zusätzlich zu den Fehlerklassen die ID der Fehlermeldung hinzu. Ein roter Rahmen ohne diese Verknüpfung ist keine vollständige Nachbildung. In dieser Anfrage gehören der Name der Veranstaltung und die Kontakt-E-Mail-Adresse zusammen. Es handelt sich um zwei separat beschriftete Werte innerhalb einer kurzen Aufgabe, nicht um eine Aufforderung, jedes Feld auf einer eigenen Seite zu platzieren. In der Vorschau sind beide Angaben nur zur Demonstration der Validierung erforderlich; daraus ergibt sich keine tatsächliche Genehmigungsanforderung. - Permanentes Label: Name der Veranstaltung. - Permanenter Hinweis: Verwenden Sie den Namen, der in den Informationen zu Ihrer Veranstaltung steht. - Behebbarer Fehler: Geben Sie den Namen der Veranstaltung ein. Unterstützende Spezifikation lesen ### Native Auszeichnung und Anwendungsverhalten haben unterschiedliche Aufgaben GOV.UK Frontend gestaltet die Komponenten und erweitert sie um Funktionen. Es entscheidet nicht, welche E-Mail-Adresse für diesen Dienst zulässig ist, speichert keinen Entwurf und nimmt keine Anfrage entgegen. In der Vorschau validiert JavaScript die beiden Felder und speichert ihre Werte nur auf der aktuellen Seite. Beim Neuladen wird die Eingabe gelöscht. Unterstützende Spezifikation lesen ## GOV.UK Designsystem Fehlerkorrektur über Links ### Machen Sie die Zusammenfassung zum Weg zur Korrektur Zeigen Sie nach einem ungültigen Klick auf „Weiter“ die Fehlerzusammenfassung vor dem Formular an und setzen Sie den Fokus darauf. Jeder Listenlink verweist auf die entsprechende Antwort. Bei einem einzelnen Textfeld verweist der Link auf dessen Eingabe-ID. Bei einer Gruppe von Auswahlmöglichkeiten sollte er, wie in der offiziellen Anleitung beschrieben, auf das erste passende Steuerelement verweisen. Die native Fehlerzusammenfassung verwendet zur Erweiterung data-module="govuk-error-summary". Die Vorschau fügt die Zusammenfassung nur bei fehlgeschlagener Validierung ein und erstellt dann ErrorSummary aus dem lokalen Modul in Version 6.5.1. Die Bibliothek übernimmt den Fokus und die verknüpfte Navigation; die Anwendung stellt die Meldungen bereit, behält die eingegebenen Werte bei und entfernt nicht mehr zutreffende Fehler. Unterstützende Spezifikation lesen ### Probieren Sie den tatsächlichen Ablauf zur Fehlerkorrektur aus Klicken Sie auf „Weiter“, wenn beide Felder leer sind. Folgen Sie dem Fehler zum Veranstaltungsnamen, geben Sie einen fiktiven Titel ein und tragen Sie dann eine ungültige E-Mail-Adresse ein. Klicken Sie erneut auf „Weiter“: Nun sollte nur noch der verbleibende Fehler angezeigt werden, während der Titel erhalten bleibt. Korrigieren Sie die Adresse, um zur Überprüfung zu gelangen. So wird das Verhalten bei verschiedenen Zuständen sichtbar, statt dauerhaft ein beispielhaftes Fehlermuster anzuzeigen. Unterstützende Spezifikation lesen ## GOV.UK Designsystem Antworten prüfen und ändern ### Verwenden Sie eine Definitionsliste statt einer Datentabelle Die Seite zum Prüfen der Antworten enthält eine govuk-summary-list. Jede Zeile besteht aus einem dt-Schlüssel, einem dd-Wert und einem dd-Bereich für Aktionen. Ein ausgeblendetes Label hinter „Ändern“ gibt an, um welche Antwort es sich handelt. Lange Veranstaltungsnamen werden im Wertebereich umbrochen, ohne den Bearbeitungslink zu verdecken. Die Aktion „Ändern“ stellt das Formular wieder her und setzt den Fokus auf das ausgewählte Feld. Beim Fortfahren wird die Eingabe erneut validiert und die aktualisierte Prüfseite angezeigt. Der Rückweg wird durch Anwendungscode festgelegt; das Designsystem stellt die Darstellungsstruktur bereit. Unterstützende Spezifikation lesen ### Beenden Sie den Ablauf an der wahrheitsgemäßen Grenze Diese Studie endet auf der Prüfseite, da kein Dienst die Daten entgegennimmt. Bei einer echten Prüfseite müssen vor dem tatsächlichen Senden die Informationen angezeigt werden, die übermittelt werden. Eine Anwendung mit Erklärungen oder einer Backend-Bestätigung benötigt zusätzliche Dienstlogik; ein grünes Feld allein kann dieses Ergebnis nicht herbeiführen. 1. Vervollständigen Sie die beiden fiktiven Antworten und fahren Sie mit der Prüfung fort. 2. Wählen Sie „Veranstaltungsnamen ändern“ und bearbeiten Sie nur diese Antwort. 3. Fahren Sie fort und prüfen Sie, ob sowohl der korrigierte Titel als auch die beibehaltene E-Mail-Adresse angezeigt werden. Unterstützende Spezifikation lesen ## GOV.UK Designsystem Frontend-Integration ### Kompilieren Sie den Sass-Einstieg ohne Branding Die folgende Einrichtung verwendet govuk-frontend@6 und Dart Sass mit dem Node-Paketimporter. Sie kompiliert die dokumentierte Schriftkonfiguration ohne Branding und kopiert die Browser-Distribution von JavaScript. Speichern Sie die aufgelöste Lockdatei im Repository, damit die genaue Version des Projekts festgehalten wird. Das Beispiel lädt weder Transport noch Bildmaterial der Regierung. Ein Dienst, der Markenressourcen verwenden darf, muss außerdem die offiziellen Assets über den dokumentierten Asset-Pfad bereitstellen. Anwendungen mit einem anderen Build-Tool können dasselbe Sass-Modul und denselben initAll-Einstieg verwenden und lediglich ihre Bündelung entsprechend anpassen. Unterstützende Spezifikation lesen ### Initialisieren Sie die Komponenten, sobald das Markup vorhanden ist Laden Sie auf einer statischen Seite das kopierte Modul und rufen Sie initAll auf. Initialisieren Sie in einer clientseitig gerenderten Anwendung einen neu eingefügten Bereich mit initAll({ scope: element }), sobald dieser Bereich vorhanden ist. Initialisieren Sie beim Start keine verborgene Fehlerbeispielansicht und halten Sie sie nicht für einen aktiven Validierungsablauf. Die eigenständige Vorschau verwendet die offiziellen, lokal kopierten CSS und JavaScript in Version 6.5.1. Eine eng begrenzte Schriftüberschreibung ersetzt Transport im gesamten Beispiel. Die Formularvalidierung und der Überprüfungsbildschirm sind Anwendungscode, während die Verbesserungen für Button und ErrorSummary aus der Bibliothek stammen. Das separate Sass-Build-Rezept dokumentiert die empfohlene konfigurierbare Einrichtung; diese Kompilierung wurde hier nicht ausgeführt. Unterstützende Spezifikation lesen ## GOV.UK Designsystem: Beispiele für Design-System-Komponenten ### Texteingabe: Beschriftung, Hinweis und Inline-Fehler Der Beispielzustand fügt der Gruppe und dem Eingabefeld den Fehlermodifikator hinzu. Die Beschreibung des Eingabefelds verweist über die ID auf den dauerhaften Hinweis und den aktuellen Fehler. ```
Use the name shown on your event information.

Error: Enter an event name

``` Code-Referenz - Entfernen Sie im gültigen Zustand den Fehlerabsatz, die Fehlermodifikatoren und die Fehler-ID aus aria-describedby. - Behalten Sie bei einem Validierungsfehler den tatsächlichen Wert bei. Verwenden Sie maskierte Serverausgabe oder weisen Sie Text und Wert über das DOM zu. ### Fehlerzusammenfassung: zur Antwort navigieren Platzieren Sie die Zusammenfassung vor dem Frageninhalt. Ihre Meldung stimmt mit dem Inline-Fehler überein, und der Link verweist auf das Eingabefeld, nicht auf einen anderen Container. ```

There is a problem

``` Code-Referenz - Die Frontend-Initialisierung übernimmt bei einer nativen Implementierung das Fokusverhalten der Zusammenfassung. - Die Live-Studie erstellt nach dem Einfügen jeder Fehlerzusammenfassung für eine fehlgeschlagene Validierung eine neue ErrorSummary; die Validierung der Anwendung bleibt davon getrennt. ### Antworten überprüfen: eine semantische Zusammenfassungsliste Eine Definitionsliste verknüpft die Antwortbezeichnung mit ihrem Wert und einem gezielten Bearbeitungsziel. Das verborgene Suffix unterscheidet gleichlautende „Ändern“-Links. ```
Event name
Riverside community picnic
Change event name
``` Code-Referenz - Der Parameter returnTo ist hier eine Konvention der Anwendung, nicht von Frontend API. - Kehren Sie von der Bearbeitung zur Überprüfung zurück und behalten Sie alle nicht betroffenen Antworten bei. ### Vollständiges eigenständiges Beispiel Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit. ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` Code-Referenz - Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl. - Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden. ## GOV.UK Designsystem Agenteneinrichtung ### Ausgangspunkt für die Implementierung Legen Sie die Shell-Befehle, den Inhalt von app.scss und die HTML-Fragmente an den jeweils angegebenen Stellen ab. Die Vorschau verwendet lokal kopierte offizielle Assets der Version 6.5.1 mit einer Schriftüberschreibung; dieses Sass-Build-Rezept ist dokumentiert, wurde in diesem Arbeitsbereich jedoch nicht kompiliert. Das vollständige ZIP mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die genauen Abhängigkeiten der Vorschau und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/gov-uk.html. Öffnen Sie Beispiele mit Modulen nicht über file://. ``` # Run in a project directory npm install govuk-frontend@6.5.1 npm install --save-dev sass mkdir -p public/assets # Save the following as app.scss @use "pkg:govuk-frontend" as * with ( $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif) ); # Compile, then copy the browser module npx sass --pkg-importer=node app.scss public/assets/app.css cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/ ``` ### Ein Prompt für dein Projekt ``` Implementieren Sie die Anfrage zu einer Veranstaltung mit zwei Feldern mithilfe von GOV.UK Frontend v6 und der in dieser Anleitung beschriebenen unmarkierten Helvetica-Schriftkonfiguration. Verwenden Sie die tatsächlichen Strukturen für form-group, Eingabefeld, Fehlerzusammenfassung und Zusammenfassungsliste, verknüpfte Inline-Fehler, beibehaltene Antworten, gezielte „Ändern“-Links und einen Abschluss, der nur der Überprüfung dient. Setzen Sie die dokumentierte responsive Typografie und Abstände mithilfe der Frontend-Klassen um. Behalten Sie die tatsächliche Projektidentität bei und erstellen Sie weder eine offizielle Übermittlung noch ein erfundenes Backend-Ergebnis. Prüfen Sie die Zustände „leer“, „ungültige E-Mail-Adresse“, „korrigiert“, „Überprüfung“ und „Antwort ändern“. ``` ## GOV.UK Designsystem Quellen und Geltungsbereich Eigenständige Anwendungsstudie zu OpenDesign mit Komponenten-CSS und JavaScript aus GOV.UK Frontend 6.5.1. Es werden weder ein Regierungslogo noch die Schrift Transport, ein offizieller Dienst, eine tatsächliche Übermittlung oder eine Konformitätszertifizierung impliziert. Die Formularregeln und die Navigation zur Überprüfung sind eigens entwickelter Anwendungscode. - Typografische Skala v6 Größen-/Zeilenhöhenpaare für kleine und große Bildschirme. - Responsive Abstände Statische und responsive Einheiten sowie Sass-Hilfsfunktionen. - Funktionale Farben Aktuelle Rollen und Sass-Zugriffsfunktionen. - Layout Zusammensetzung von Container und Raster. - Texteingabe Struktur für Beschriftung, Hinweis und Fehler. - Fehlerzusammenfassung Verknüpfte Korrektur und Fokusverhalten. - Zusammenfassungsliste Bezeichnungen, Werte und kontextbezogene Bearbeitungsaktionen. - Ohne GOV.UK-Branding Schrift, Identität und Sass-Konfiguration. - CSS einbinden Dart Sass und Paketintegration. - JavaScript importieren Browsermodule und initAll. - Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich. ## GOV.UK Designsystem Verwandte Ressourcen ### HarvardSites Designsystem Verstehen Sie HarvardSites als redaktionelle Plattform: Vergleichen Sie Website-Stile, wählen Sie dokumentierte Schriftkombinationen und gestalten Sie Universitätsseiten mit eigens dafür entwickelten Inhaltskomponenten. ### Helsinki Kombinieren Sie native HDS-Auswahlgruppen, semantische Feedbackfarben und verknüpfte Fehlerübersichten zu einem vollständigen lokalen Ablauf zum Prüfen und Korrigieren. ### Rivet Erstellen Sie Universitätsseiten mit der tatsächlichen Tokenskala von Rivet, der Komponentenstruktur von HTML und nativen Tastaturinteraktionen. Entdecken Sie eine kompakte Detailseite zu einem Workshop mit barrierefreien Tabs zu Besuchsinformationen. - [Implementierungsreferenz](https://design-system.service.gov.uk/components/error-summary/) - [Quelle](https://design-system.service.gov.uk/styles/type-scale/) - [Quelle](https://design-system.service.gov.uk/styles/typeface/) - [Quelle](https://design-system.service.gov.uk/styles/spacing/) - [Quelle](https://design-system.service.gov.uk/styles/colour/) - [Quelle](https://design-system.service.gov.uk/styles/layout/) - [Quelle](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [Unterstützende Spezifikation lesen](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/styles/typeface/) - [Code-Referenz](https://design-system.service.gov.uk/styles/type-scale/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/styles/type-scale/) - [Code-Referenz](https://design-system.service.gov.uk/styles/spacing/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/styles/spacing/) - [Code-Referenz](https://design-system.service.gov.uk/styles/layout/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/styles/layout/) - [Code-Referenz](https://design-system.service.gov.uk/styles/colour/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/styles/colour/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/components/text-input/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/patterns/question-pages/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/components/error-summary/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/components/summary-list/) - [Unterstützende Spezifikation lesen](https://design-system.service.gov.uk/patterns/check-answers/) - [Unterstützende Spezifikation lesen](https://frontend.design-system.service.gov.uk/include-css/) - [Unterstützende Spezifikation lesen](https://frontend.design-system.service.gov.uk/import-javascript/) - [Code-Referenz](https://design-system.service.gov.uk/components/text-input/) - [Code-Referenz](https://design-system.service.gov.uk/components/error-summary/) - [Code-Referenz](https://design-system.service.gov.uk/components/summary-list/) - [Typografische Skala v6 Größen-/Zeilenhöhenpaare für kleine und große Bildschirme.](https://design-system.service.gov.uk/styles/type-scale/) - [Responsive Abstände Statische und responsive Einheiten sowie Sass-Hilfsfunktionen.](https://design-system.service.gov.uk/styles/spacing/) - [Funktionale Farben Aktuelle Rollen und Sass-Zugriffsfunktionen.](https://design-system.service.gov.uk/styles/colour/) - [Layout Zusammensetzung von Container und Raster.](https://design-system.service.gov.uk/styles/layout/) - [Texteingabe Struktur für Beschriftung, Hinweis und Fehler.](https://design-system.service.gov.uk/components/text-input/) - [Fehlerzusammenfassung Verknüpfte Korrektur und Fokusverhalten.](https://design-system.service.gov.uk/components/error-summary/) - [Zusammenfassungsliste Bezeichnungen, Werte und kontextbezogene Bearbeitungsaktionen.](https://design-system.service.gov.uk/components/summary-list/) - [Ohne GOV.UK-Branding Schrift, Identität und Sass-Konfiguration.](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [CSS einbinden Dart Sass und Paketintegration.](https://frontend.design-system.service.gov.uk/include-css/) - [JavaScript importieren Browsermodule und initAll.](https://frontend.design-system.service.gov.uk/import-javascript/)