# CMS Designsystem ## CMS Designsystem-Oberflächenvorschau Bearbeite eine Einstellung, speichere oder verwerfe den Entwurf und schließe eine lokale Prüfung ab, ohne Daten zu übermitteln. ## CMS Designsystem-Designreferenz CMS Core 18.1.0 veröffentlicht core-theme.css und die Komponente CSS. Bei Abweichungen zwischen allgemeiner Dokumentation und versioniertem Artefakt hat Letzteres Vorrang. Die Vorschau verwendet Arial als Fallback und einen anwendungsspezifischen Container mit 48rem. ### Farbrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-base | #262626 | Versionierter Core-Textwert; in älteren Übersichtstexten steht #333. | | --color-primary / primary-darker | #0071bc / #004f84 | Referenzwerte für Aktionen und dunklere Interaktionen. | | --color-error / success | #e31c3d / #12890e | Statusfarben immer mit einer textlichen Erklärung kombinieren. | | --color-border | #d9d9d9 | Wird auch von --review__border-color verwendet. | | --color-focus-dark / focus-light | #bd13b8 / #ffffff | Fokusreferenzwerte des Themes. | | --color-background / gray-lightest | #ffffff / #f2f2f2 | Seiten- und helle unterstützende Oberflächen. | ### Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | Exakte Reihenfolge der Schriftfamilien in 18.1.0; in der Vorschau wird Arial verwendet. | | --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | 14 / 16 / 18 / 21 / 24px bei einer Root-Schriftgröße von 16px. | | --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px. | | --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px. | | --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px. | | --font-line-height-base / heading | 1.5 / approximately 1.3 | Das Theme speichert den Überschriftenwert als 1.2999999523162842. | ### Abstände, Raster und Form | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | Numerische Utility-Modifikatoren werden mit 8px multipliziert. | | --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | Größerer Rhythmus für Layouts. | | --grid-columns | 12 | Rasterkomposition. | | --grid-gutter-width / grid-form-gutter-width | 32 / 16px | Im aktuellen Theme sind allgemeine und Formular-Abstände getrennt. | | --site-max-width | 1104px | Container-Referenz des Themes. | | --site-margins / site-margins-mobile | 3rem / 1.5rem | 48 / 24px bei üblicher Root-Schriftgröße. | | --radius-default / medium / large | 3 / 4 / 8px | Kein einzelner, universeller Rundungswert. | ### Responsive Breakpoints | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | sm | 544px | Kleines Präfix nach dem Mobile-first-Prinzip. | | md | 768px | Mittleres Präfix. | | lg | 1024px | Großes Präfix. | | xl | 1280px | Extra großes Präfix. | ## CMS 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. ## CMS Designsystem Core oder ein untergeordnetes Theme auswählen ### Das Paket umfasst eine Theme-Familie und ist kein einzelnes gebrandetes Design > CMS Core bietet gemeinsame Grundlagen für Benutzeroberflächen und separate untergeordnete Systeme für Healthcare.gov, Medicare.gov und CMS.gov. Diese Referenz legt @cmsgov/design-system 18.1.0 und dessen core-theme.css fest. Eine Farbe, ein Logo oder eine Komponente, die in einem untergeordneten Theme verfügbar ist, gehört nicht automatisch zu den Regeln von Core. Das Beispiel verwendet bewusst einen neutralen Workflow für Benachrichtigungseinstellungen und lässt offizielle Regierungsbanner und Identitätskennzeichen weg. Es gibt Integrationswege für React, Preact und Web Components sowie eine manuelle Integration mit HTML/CSS. Die Dokumentation empfiehlt JavaScript-Komponenten, wenn ihr integriertes Verhalten nützlich ist; die Web-Component-Sammlung ist eine Teilmenge. Unser eigenständiges Beispiel verwendet echtes Core-CSS mit anwendungsseitigem JavaScript für Bearbeiten, Speichern und Abbrechen. Es wird nicht behauptet, dass CSS Validierung, Routing oder Persistenz implementiert. Unterstützende Spezifikation lesen ## CMS Designsystem Das versionierte Theme lesen ### Beide Stylesheets einbinden index.css definiert die Komponentenregeln, und core-theme.css stellt deren Variablen bereit. Wird das Theme weggelassen, können gültige Klassennamen mit nicht aufgelösten Werten zurückbleiben. Umgekehrt führt der Import eines Medicare-Themes bei gleichzeitiger Beschreibung der Core-Typografie zu einem irreführenden Ergebnis, selbst wenn die Seite gerendert wird. Die Einrichtung bindet beide Assets aus derselben Version 18.1.0 ein. Das versionierte Theme ist die Quelle der Zahlenwerte in diesem Leitfaden. --color-base ist beispielsweise #262626, obwohl im allgemeinen Typografieabschnitt weiterhin #333 erwähnt wird. Der Wert von --grid-gutter-width im Theme entspricht --spacer-4 (32px), während --grid-form-gutter-width --spacer-2 (16px) entspricht. Ein allgemeiner Satz zu 16px breiten Spaltenabständen sollte nicht auf jede Rastervariante übertragen werden. Diese Unterschiede sind wichtig, wenn ein echtes Layout nachgebildet wird. Unterstützende Spezifikation lesen ## CMS Designsystem Core-Typografie und Hierarchie ### Eine Schriftfamilie, explizite Schriftgrößen nach Rolle Core verwendet Open Sans für Überschriften und Fließtext. Die Fallback-Kette im Theme 18.1.0 führt über Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans und Arial bis zu sans-serif. Das lokale Beispiel legt Arial ausdrücklich fest, damit keine externen Schriftdateien angefordert werden; daher weichen die Schriftmetriken von der vollständigen offiziellen Typografie ab. Die Basisschriftgröße des Fließtexts beträgt 1rem bei einer Zeilenhöhe von 1.5. Die Größenvariablen umfassen bei einer Root-Größe von 16px 14, 16, 18, 21 und 24px, gefolgt von größeren responsiven Rollen: 3xl ist auf Mobilgeräten 30px und sonst 36px; 4xl ist auf Mobilgeräten 36px und sonst 48px; 5xl ist auf Mobilgeräten 36px, auf Tablets 48px und in der größten Rolle 60px. Dies sind Theme-Werte und keine Aufforderung, die größte Größe für jeden Seitentitel zu verwenden. Verwenden Sie semantische Überschriften und die passende Zuordnung über Utilities oder ds-content. Unterstützende Spezifikation lesen ## CMS Designsystem Abstände und responsives Layout ### Acht-Pixel-Rhythmus mit halbem Schritt --spacer-1 bis --spacer-7 entsprechen 8–56px in Schritten von acht Pixeln. --spacer-half beträgt 4px und --spacer-none null. Eine Klasse wie ds-u-margin--2 steht also für 16px, nicht für 2rem. Die native CSS der Prüfzeile bietet 16px vertikales Padding und einen unteren Rahmen von 2px; das umgebende Formular benötigt nicht für jede Antwort eine zusätzliche gepolsterte Karte. Die maximale Breite für Websites in Core beträgt 1104px; die Seitenränder betragen im versionierten Theme 3rem und auf Mobilgeräten 1.5rem. Das Beispiel verwendet für zwei kurze Prüfzeilen eine schmalere Lesebreite von 48rem. Dies ist eine Anwendungsbreite und kein neuer CMS-Token. Unterstützende Spezifikation lesen ### CMS-Breakpoint-Präfixe verwenden Die dokumentierten Grenzen sind sm 544px, md 768px, lg 1024px und xl 1280px. Layouts und ausgewählte Utility-Familien unterstützen diese Präfixe, zum Beispiel ds-u-lg-display--none. Gehen Sie nicht davon aus, dass jede Komponentenklasse eine responsive Variante hat. Auf Mobilgeräten muss der lange Wert in der Prüfzeile umbrechen können, ohne dass die zugehörige Schaltfläche Bearbeiten über den Bildschirmrand hinausgeschoben wird; in der Vorschau wird außerdem die Aktionszeile der Anwendung bei Bedarf untereinander angeordnet. Unterstützende Spezifikation lesen ## CMS Designsystem Aufbau einer Prüfzeile und API ### Beschriftung, Wert und kontextbezieltes Bearbeitungsziel Review umfasst ein einzelnes Element, das überprüft werden kann. Die Überschrift ist standardmäßig h3, kann mit headingLevel festgelegt werden und wird von untergeordneten Inhalten gefolgt, die den aktuellen Wert darstellen. editHref gibt ein Ziel an; ohne diesen Wert wird kein Bearbeitungslink angezeigt. editAriaLabel sorgt für einen eindeutigen zugänglichen Namen, wenn sich der sichtbare Link Bearbeiten wiederholt. Die Typdeklaration von 18.1.0 enthält außerdem editText, onEditClick und editContent. Dabei ersetzt ein benutzerdefiniertes editContent den Standardlink. Das Beispiel mit React verwendet tatsächliche Props, die anhand der veröffentlichten Deklaration überprüft wurden. Die angegebenen Pfade sind beispielhafte Anwendungsrouten, die von der einbindenden Anwendung implementiert werden müssen. Die native Alternative mit CSS zeigt die Struktur ds-c-review, ds-c-review__content und ds-c-review__heading; auch hier muss die Anwendung Navigation und Aktualisierungen verwalten. ``` import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` Code-Referenz Unterstützende Spezifikation lesen ## CMS Designsystem Einzelantwort oder Abschnitt bearbeiten ### Den Korrekturpfad vorhersehbar gestalten Das CMS-Muster zur Formularprüfung unterscheidet zwischen dem Bearbeiten einer einzelnen Antwort und dem Bearbeiten eines ganzen Abschnitts. Unabhängige Einstellungen für Benachrichtigungsformat und Sprache eignen sich für die Bearbeitung einzelner Antworten. Zusammenhängende Antworten, etwa Angaben zu Haushaltsmitgliedern und ihren Beziehungen untereinander, müssen möglicherweise gemeinsam in einem Abschnitt bearbeitet werden, damit die Anwendung ihre Konsistenz zusammen überprüfen kann. Die offiziellen Richtlinien weisen ausdrücklich darauf hin, dass eine Bearbeitungsoption für einen ganzen Abschnitt neben dessen Überschrift nicht von der Review-Komponente selbst implementiert wird. In der Vorschau wird für die ausgewählte Zeile ein fokussiertes Fieldset geöffnet. Beim Speichern wird nur dieser Wert aktualisiert, und der Fokus kehrt zur auslösenden Schaltfläche Bearbeiten zurück; Abbrechen verwirft den Entwurf. Während der Bearbeitung bleibt die sichtbare Antwort unverändert. Ein lokaler Status meldet die tatsächliche Änderung, statt allein deshalb einen Erfolg anzukündigen, weil das Bearbeitungsformular angezeigt wurde. - Verwenden Sie bei Eingabe und Prüfung dieselben Fragen und dieselbe Reihenfolge. - Geben Sie jeder Zeile einen kontextbezogenen Bearbeitungsnamen, auch wenn der sichtbare Link Bearbeiten lautet. - Halten Sie die Abschnittsbearbeitung außerhalb der Einzelzeilenkomponente, wenn zusammengehörige Antworten gemeinsam geändert werden müssen. Unterstützende Spezifikation lesen ## CMS Designsystem Prüfung, Abschluss und Wahrheitsgehalt ### Eine Prüfung ist keine Einreichungsbestätigung Review eignet sich für bearbeitbare Formularantworten, nicht als Ersatz für Suchergebnisse. Bei einem echten Einreichungsablauf sieht das Muster nach der Prüfung eine abschließende Aktion zum Absenden vor. Diese Aktion darf erst dann eine Eingangsbestätigung anzeigen, wenn tatsächlich ein Ergebnis vom Backend vorliegt. Das Beispiel bietet stattdessen die Option Lokale Prüfung abschließen und weist ausdrücklich darauf hin, dass nichts übermittelt oder gespeichert wird. Core unterscheidet zwischen Primärblau #0071bc, Fehlerrot #e31c3d, Erfolgsgrün #12890e und Trennliniengrau #d9d9d9. Eine gespeicherte Auswahl wird zusätzlich zur Farbe durch Text gekennzeichnet. Der Fokus verwendet die hellen und dunklen Fokusreferenzen des Themes. Entfernen Sie den Indikator nicht, wenn Sie „Bearbeiten“ als minimales Steuerelement gestalten. Der Abschlussstatus ist per Tastatur erreichbar und blendet die Prüfzeilen nicht aus. Unterstützende Spezifikation lesen ## CMS Designsystem sicher installieren und erweitern ### Ein vollständiger CSS-Pfad und ein echter Komponentenpfad Installieren Sie das festgelegte Paket und importieren Sie css/index.css sowie css/core-theme.css über die Paket-Exports. React-Konsumenten importieren Review aus dem Paketstammverzeichnis; für Preact-Konsumenten gibt es einen /preact-Einstiegspunkt. Für das Beispiel ist keine Sass-Kompilierung erforderlich. Wenn Sie statische CSS kopieren, behalten Sie die relativen Pfade zu Schrift- und Bilddateien bei oder wählen Sie ausdrücklich eine unterstützte Alternative wie in diesem Beispiel. Der CMS-Namensraum unterscheidet zwischen Layouts mit ds-l-, Komponenten mit ds-c- und Hilfsklassen mit ds-u-. Anwendungsklassen sollten nicht so tun, als wären sie undokumentierte offizielle Komponenten. In der Vorschau sind die Leseansicht und der Inline-Editor lokal zusammengesetzt; für die Prüfzeile und Schaltflächen werden die bereitgestellten Styles verwendet. 1. Laden Sie die passende Core-Komponente und das Theme CSS und rendern Sie anschließend die beiden Prüfzeilen. 2. Verbinden Sie jede Bearbeitungsaktion mit einem kontrollierten Editor. Stellen Sie nach dem Speichern und Abbrechen den Fokus wieder her. 3. Testen Sie geänderte Werte, verworfene Entwürfe und den lokalen Abschlussstatus bei Desktop- und Mobilbreite. Unterstützende Spezifikation lesen ## CMS Designsystem-Designsystem: Komponentenbeispiele ### Zwei unabhängige Prüfzeilen Tatsächliche Props aus 18.1.0 React; konsumierende Anwendungen implementieren die verknüpften Bearbeitungsrouten. ``` import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` Code-Referenz - Review verwendet standardmäßig h3. - editContent ersetzt den standardmäßigen Bearbeitungslink; editHref ist erforderlich, damit dieser Link angezeigt wird. ### Nativer Aufbau von CSS-Prüfungen Eine nützliche manuelle HTML-Integration, wenn die Anwendung die Interaktionen verwaltet. ```

Notice format

Large print

Edit
``` Code-Referenz ### 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. ``` Notice preferences — CMS Core specimen

CMS Core component example

Review your notice preferences

Check these fictional preferences before completing the local review. This example does not collect health information or contact details.

Notice preferences

Notice format

Standard print

Preferred language

English

``` 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. ## CMS Designsystem-Agent-Einrichtung ### Ausgangspunkt für die Implementierung Paket-Exports und Review-Props wurden in den veröffentlichten Metadaten und Typen von 18.1.0 überprüft. Das React-Beispiel dient der Integration; die eigenständige Vorschau führt natives CSS zusammen mit lokalem Anwendungs-JavaScript aus. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel unter Sources enthält außerdem die exakten 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/cms.html. Öffnen Sie modulbasierte Beispiele nicht über file://. ``` // npm install @cmsgov/design-system@18.1.0 import { Review } from '@cmsgov/design-system'; import '@cmsgov/design-system/css/index.css'; import '@cmsgov/design-system/css/core-theme.css'; export default function ContactReview() { return

Contact preferences

Large print

English
; } ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie einen CMS-Core-Prüfbildschirm mit Version 18.1.0. Laden Sie index.css und core-theme.css gemeinsam. Verwenden Sie für jede unabhängig bearbeitbare Antwort Review mit heading, children, editHref und editAriaLabel; die Bearbeitung auf Abschnittsebene wird separat in der Anwendung zusammengesetzt. Behalten Sie die Reihenfolge der Fragen und die sichtbaren gespeicherten Werte bei, während Entwürfe bearbeitet werden. Stellen Sie beim Speichern und Abbrechen den Fokus wieder her und geben Sie tatsächliche Aktualisierungen bekannt. Verwenden Sie Core-Tokens wie #262626 für den Grundtext, Abstände von 8px mit einer halben Stufe von 4px, einen allgemeinen Rasterabstand von 32px und einen Formularabstand von 16px. Mischen Sie keine Logos von Child-Themes ein und erwecken Sie nicht den Eindruck, eine lokale Prüfung würde ein Formular übermitteln. ``` ## CMS Designsystem Quellen und Geltungsbereich Technische Referenz zum Core-Theme. Fiktive Präferenzwerte und ausschließlich lokale Änderungen; keine Beratung zur Anspruchsberechtigung im Gesundheitswesen, keine Zugehörigkeit zum CMS und kein übermitteltes Formular werden dargestellt. - CMS Design System Offizielle Einführung, Grundlagen und Komponentenverzeichnis. - Entwicklerhinweise Offizielle Integrationspfade und Paketdokumentation. - Formularprüfung Muster zum Prüfen von Formularangaben. - 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. ## CMS Designsystem Verwandte Ressourcen ### Det Fælles Designsystem Entdecken Sie das DKFDS-Design von Dänemark, die tatsächlichen Sass-Skalen und barrierefreie Tabellenmuster anhand eines umfassenden Ressourcenvergleichs mit numerischer Sortierung, Suche nach dem Absenden und einer Wiederherstellung bei leeren Ergebnissen. ### Designsystem .italia Setzen Sie eine gut lesbare Schrittfolge für einen Dienst mit der echten Typografie von Bootstrap Italia, einer responsiven Stepper-Struktur und einem lokal wiederherstellbaren Formularstatus um. ### Designsystemet Entdecken Sie die tatsächlichen Theme-Rollen, Größenmodi und das native Verhalten von Eingabefeldern in Designsystemet anhand eines vollständigen Editors für Aufgabenbeschreibungen mit Zeichenfeedback und beibehaltenem Darstellungszustand. - [Implementierungsreferenz](https://design.cms.gov/components/review/) - [Quelle](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css) - [Quelle](https://design.cms.gov/foundation/layout-grid/responsive-design/) - [Unterstützende Spezifikation lesen](https://design.cms.gov/getting-started/for-developers/) - [Unterstützende Spezifikation lesen](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css) - [Unterstützende Spezifikation lesen](https://design.cms.gov/foundation/spacing/) - [Unterstützende Spezifikation lesen](https://design.cms.gov/foundation/layout-grid/responsive-design/) - [Code-Referenz](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/react-components/types/Review/Review.d.ts) - [Unterstützende Spezifikation lesen](https://design.cms.gov/components/review/) - [Unterstützende Spezifikation lesen](https://design.cms.gov/patterns/Forms/form-review/) - [Code-Referenz](https://design.cms.gov/components/review/) - [CMS Design System Offizielle Einführung, Grundlagen und Komponentenverzeichnis.](https://design.cms.gov/) - [Entwicklerhinweise Offizielle Integrationspfade und Paketdokumentation.](https://design.cms.gov/getting-started/for-developers/) - [Formularprüfung Muster zum Prüfen von Formularangaben.](https://design.cms.gov/patterns/Forms/form-review/)