# gov.cz Designsystem ## gov.cz Designsystem-Oberflächenvorschau Sieh dir sechs eigens erstellte Ressourcen auf zwei Seiten an, öffne eine Lesedetailansicht und kehre zu ihrer Aktion zurück. ## gov.cz Designsystem Designreferenz Tatsächliche Farbgrundwerte und semantische Aliase aus tokens.css von @gov-design-system-ce/styles 4.7.1. Die Vorschau verwendet das veröffentlichte Stylesheet und das Roboto-Paket. ### Primär- und Neutralfarbgrundwerte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-primary-100 | rgb(226, 238, 248) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-primary-600 | rgb(0, 70, 155) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-primary-700 | rgb(14, 53, 120) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-primary-800 | rgb(16, 38, 87) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-secondary-600 | rgb(250, 180, 19) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-neutral-0 | rgb(255, 255, 255) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-neutral-50 | rgb(246, 246, 246) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | | --color-neutral-950 | rgb(38, 38, 38) | Veröffentlichte Farbgrundwerte aus Version 4.7.1. Die Anwendung sollte normalerweise die entsprechende semantische Rolle verwenden. | ### Rollen für Lesen und Rückmeldung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --text-secondary | var(--color-neutral-700) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --text-primary-color | var(--color-primary-600) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --text-white | var(--color-neutral-0) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --text-status-error | var(--color-error-700) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --text-status-success | var(--color-success-700) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --status-focus | var(--color-focus-600) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --status-warning | var(--color-warning-400) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | | --status-error | var(--color-error-600) | Die semantischen Aliase bleiben erhalten, damit die jeweilige Rolle sichtbar bleibt. Nicht jeden Alias durch einen davon unabhängigen lokalen Hexadezimalwert ersetzen. | ### Zustände primärer Schaltflächen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-solid-primary-hover | var(--color-primary-700) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-solid-primary-active | var(--color-primary-800) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-solid-disabled | var(--color-neutral-200) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-outlined-primary | var(--color-primary-50) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-outlined-primary-hover | var(--color-primary-100) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | | --button-outlined-primary-active | var(--color-primary-200) | Tatsächliche Zustandstokens, die für das veröffentlichte Schaltflächendesign verwendet werden. Deaktiviert, Hover und Aktiv müssen unterscheidbar bleiben. | ## gov.cz 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.cz Designsystem Gov-CE-Grundlagen und Reihenfolge der Assets ### Paketversionen aufeinander abstimmen > In diesem Beispiel sind Komponenten, Styles, Icons und Schriftarten auf Version 4.7.1 festgelegt. Die fünf Stylesheets für die Grundlagen werden in der veröffentlichten Reihenfolge geladen. Sie erfüllen unterschiedliche Aufgaben: Variablen allein gestalten keine Karte, und die Registrierung eines benutzerdefinierten Elements allein bindet die globale Komponente CSS nicht ein. Der vollständige Einstieg bindet alle fünf Stylesheets vor der kleinen eigenen Kompositionsebene ein. ### Konfiguration vor der Komponentenregistrierung initialisieren Der Icon-Pfad wird festgelegt, bevor die dynamisch importierten Einstiegsmodule der Komponenten ausgeführt werden. Diese Reihenfolge ist wichtig, weil die Paginierung Pfeilsymbole als Teil ihrer eigenen Abhängigkeiten rendert. Kopieren Sie das vollständige Icon-Verzeichnis einschließlich seiner Unterverzeichnisse an den konfigurierten öffentlichen Pfad. Ein erfolgreicher Import von JavaScript beweist nicht, dass auch die separaten Icon-Anfragen erfolgreich waren. ## gov.cz Designsystem Semantische Farb- und Zustandsreferenzen ### Farbe mit einer Rolle verknüpfen Die Referenz unterscheidet zwischen dem blauen Primärfarbgrundwert und den Aliasen für Text, Fokus und Schaltflächenzustände. Würde überall dasselbe scheinbare Blau verwendet, gingen diese Zusammenhänge verloren. Das Toolkit verwendet die offiziellen ausgefüllten primären Schaltflächen und überlässt es dem Komponenten-Stylesheet, deren aktives, Hover- und deaktiviertes Erscheinungsbild festzulegen. Nur das umgebende Layout der Sammlung ist eine eigene Umsetzung CSS. ### Typografie und inhaltlichen Kontext sichtbar halten Roboto stammt aus dem passenden Schriftartenpaket. Die Karten enthalten eine kurze, handlungsorientierte Überschrift, eine Metadatenzeile und eine Zusammenfassung vor der Leseaktion. Die sechs Ressourcentexte sind eigenes Übungsmaterial OpenDesign und keine übersetzten offiziellen Anweisungen der tschechischen Regierung. Sie veranschaulichen die Hierarchie und eine vollständige lokale Interaktion, ohne vorzugeben, es handle sich um einen Regierungsdienst. ## gov.cz Designsystem Karten-Slots und Leseaktionen ### Überschrift in den vorgesehenen Slot setzen Jede gov-card erhält eine Überschrift im headline-Slot. Metadaten, Beschreibung und Schaltfläche bilden den Inhalt. Die Aktion erhält ein aria-label, das den Ressourcentitel enthält und so für assistive Technologien zwischen gleichlautenden Schaltflächen „Ressource lesen“ unterscheidet. Die Komponente überträgt ARIA-Attribute auf ihr internes interaktives Element; ein erfundenes Attribut für barrierefreie Beschriftungen würde das nicht leisten. ### Layout außerhalb des Komponentenvertrags halten Ein CSS-Raster mit drei Spalten wird auf schmalen Bildschirmen einspaltig. Das Raster und sein Breakpoint sind eigens für dieses Beispiel erstellt und keine zusätzlichen offiziellen Eigenschaften der Karte. In seinem sehr schmalen eingebetteten Container hebt die Vorschau außerdem die globale Mindestbreite des Bodys von 320px auf. Diese begrenzte Anpassung der Komposition erhält das Komponentenstyling und verhindert zugleich, dass der Inhalt über die übergeordnete Seite hinausragt. ## gov.cz Designsystem Native Paginierung und Anwendungsstatus ### Nutzdaten des nativen Ereignisses auslesen gov-pagination erhält total=6 und page-size=3. Das gov-page-Ereignis stellt detail.pagination.currentPage bereit; damit werden die passenden drei Datensätze ausgewählt. Die Paginierungskomponente verwaltet ihre Steuerelemente für die aktuelle Seite; die Anwendung verwaltet den Datensatz und den sichtbaren Ausschnitt. Alle standardmäßigen tschechischen Navigationsbeschriftungen werden ausdrücklich durch englische Beschriftungen für diese englischsprachige Anleitung ersetzt. - total bezeichnet die Anzahl der Datensätze, nicht die Anzahl der Seiten. - page-size legt die Länge des Ausschnitts fest. - gov-page stellt detail.pagination.currentPage bereit. - Die Navigationsbeschriftungen müssen zur Sprache der Benutzeroberfläche passen. ### Nach einem Seitenwechsel keine veralteten Details anzeigen Beim Seitenwechsel wird die aktuell geöffnete Ressource geschlossen, damit die Details nicht so wirken, als gehörten sie zu einer anderen Kartengruppe. Die Zählung lautet „Ressourcen 1–3 von 6“ oder „Ressourcen 4–6 von 6“. Da es sich um eine lokale Paginierung eines kleinen, bekannten Datensatzes handelt, gibt es weder einen künstlichen Ladeindikator noch den falschen Eindruck eines serverseitigen Abrufs. Eine servergestützte Implementierung bräuchte einen separaten Vertrag für ausstehende Vorgänge, Fehler und Ergebnisse. ## gov.cz Designsystem Lesefokus und Rückkehrverhalten ### Fokus auf die geöffnete Ressource setzen Die Leseaktion füllt einen lokalen Detailbereich und setzt den Fokus auf dessen Überschrift. So erhalten Tastaturnutzende ein klares Ziel, nachdem eine Aktion Inhalte unterhalb der Sammlung hinzugefügt hat. Die fokussierbare Überschrift verwendet tabindex=-1, sodass die Anwendung den Fokus darauf setzen kann, ohne einen zusätzlichen regulären Tabstopp einzuführen. Der geöffnete Inhalt bleibt gewöhnlicher, lesbarer Text. ### Zur auslösenden Aktion zurückkehren „Zurück zu den Ressourcen“ blendet die Details aus und setzt den Fokus auf die ursprüngliche interne Schaltfläche. Dies ist kein modaler Dialog: Der Fokus wird nicht eingeschlossen, es wird keine Dialogsemantik hinzugefügt und die Seite wird nicht abgedunkelt. Die ursprüngliche Sammlung bleibt verfügbar. Durch wiederholtes Öffnen und Schließen sowie Seitenwechsel lässt sich prüfen, ob Anwendungsstatus und Fokus derselben Ressource folgen. ## gov.cz Designsystem Vollständige lokale Integration ### Die bereitgestellten Dateien gemeinsam verwenden Der Einstieg enthält den vollständigen Anwendungscode, einschließlich aller sechs Datensätze, der Kartenerstellung, der Verarbeitung der Paginierung und des Fokus auf die Details. Das Stylesheet enthält ausschließlich die eigene Komposition. Installieren Sie die vier festgelegten Pakete, kopieren Sie die Icons und speichern Sie beide Dateien in einem einfachen Vite-Projekt. Die Browservorschau bündelt genau diese Komponenteneinstiege und lokalen Schriftarten-Assets. 1. Installieren Sie alle vier Gov-CE-Pakete in Version 4.7.1. 2. Kopieren Sie die Icons einschließlich ihrer Unterverzeichnisse nach public/assets/gov-cz-icons. 3. Speichern Sie JavaScript und die Komposition CSS vollständig in src. 4. Starten Sie die Anwendung und überprüfen Sie Paginierung, Fokus-Rückkehr und Icon-Anfragen. ### Interaktion und Laden der Assets überprüfen Öffnen Sie die erste Ressource, kehren Sie zu ihrer Schaltfläche zurück, wechseln Sie zur zweiten Seite und lesen Sie eine andere Ressource. Prüfen Sie, ob die Schaltflächen für „Erste“ und „Vorherige“ am Anfang und die Schaltflächen für „Nächste“ und „Letzte“ am Ende deaktiviert sind. Untersuchen Sie denselben Ablauf bei Desktop- und Smartphone-Breite sowie bei einer schmaleren eingebetteten Breite. Prüfen Sie im Netzwerkbereich auch auf fehlende Symbole und JavaScript-Fehler. ## gov.cz Designsystem-Designsystem-Komponentenbeispiele ### main.js — vollständiges paginiertes Toolkit Vollständige Daten, native Komponentenregistrierung, Seiteneinteilung und Lesefokus. ``` import '@gov-design-system-ce/styles/tokens.css'; import '@gov-design-system-ce/styles/styles.css'; import '@gov-design-system-ce/styles/layout.css'; import '@gov-design-system-ce/styles/components.css'; import '@gov-design-system-ce/styles/animations.css'; import '@gov-design-system-ce/fonts/lib/roboto.css'; import './gov-cz.css'; window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'}; const resources=[ {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'}, {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'}, {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'}, {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'}, {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'}, {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'} ]; document.querySelector('#root').innerHTML=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; await import('@gov-design-system-ce/components/dist/components/gov-card.js'); await import('@gov-design-system-ce/components/dist/components/gov-pagination.js'); let page=1,opened=-1; const cards=document.querySelector('#cards'), detail=document.querySelector('#detail'); function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;} cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();}); document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();}); document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render(); ``` Code-Referenz - Die Konfiguration wird vor den Importen der Komponenteneinstiegspunkte ausgeführt. ARIA-Bezeichnungen verwenden aria-label. ### gov-cz.css — ursprünglicher Aufbau der Sammlung Responsives Raster und gut lesbare lokale Detailansicht unter Beibehaltung der nativen Komponentenstile. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` Code-Referenz - Das Rasterlayout und die eingebettete Mindestbreitenüberschreibung sind originale Anwendungs-CSS. ## gov.cz Designsystem-Agent einrichten ### Ausgangspunkt für die Implementierung Behalten Sie die Unterverzeichnisse für Symbole bei. Dieses Beispiel importiert direkte Komponenteneinstiegsmodule; eine kopierte Laufzeit für verzögertes Laden ist nicht erforderlich. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 mkdir -p public/assets/gov-cz-icons cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/ # Save the supplied files as src/main.js and src/gov-cz.css. # The root index.html must contain
and load /src/main.js. npm run dev ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie das bereitgestellte Gov CE 4.7.1-Toolkit mit nativen Karten, Schaltflächen und Seitennavigation. Behalten Sie die tatsächliche Reihenfolge der Stylesheets und die Konfiguration der Symbolpfade bei. Verwenden Sie gov-page detail.pagination.currentPage, aussagekräftige englische ARIA-Bezeichnungen, schließen Sie veraltete Detailansichten bei Seitenwechseln und geben Sie nach dem Lesen den Fokus zurück. Bewahren Sie die Quellenangabe der ursprünglichen Beispielinhalte. ``` ## gov.cz Designsystem Quellen und Geltungsbereich Eine originale OpenDesign-Studie zu Service-Toolkits mit Komponenten, Stilen, Symbolen und Schriftarten aus Gov Design System CE 4.7.1. Beispieltexte und Sammlungsverhalten sind original; dies ist kein offizieller Behördendienst. - HTML-Integration Reihenfolge der Assets, Registrierung und Zusammensetzung der Komponenten. - Seitennavigation Seitensteuerung und Navigationssemantik. - Card Karteninhalt und Überschriften-Slot. - Farb-Token Primitive und semantische Farbrollen. - Typografie Schrift- und Texthierarchie. ## gov.cz Designsystem Verwandte Ressourcen ### GOV.UK Designsystem Erstellen Sie einen Frage- und Antwortablauf im GOV.UK-Stil mit der aktuellen Typografieskala v6, responsiven Abständen, funktionalen Farben, verknüpfter Validierung und konkreter Frontend-Integration. ### 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. - [Implementierungsreferenz](https://designsystem.gov.cz/komponenty/pagination) - [Quelle](https://designsystem.gov.cz/principy/barevne-tokeny) - [Code-Referenz](https://designsystem.gov.cz/zaciname/developers/html) - [Code-Referenz](https://designsystem.gov.cz/komponenty/card) - [HTML-Integration Reihenfolge der Assets, Registrierung und Zusammensetzung der Komponenten.](https://designsystem.gov.cz/zaciname/developers/html) - [Seitennavigation Seitensteuerung und Navigationssemantik.](https://designsystem.gov.cz/komponenty/pagination) - [Card Karteninhalt und Überschriften-Slot.](https://designsystem.gov.cz/komponenty/card) - [Farb-Token Primitive und semantische Farbrollen.](https://designsystem.gov.cz/principy/barevne-tokeny) - [Typografie Schrift- und Texthierarchie.](https://designsystem.gov.cz/principy/typografie)