# CFPB Designsystem

## CFPB Designsystem-Oberflächenvorschau

Öffnen Sie die nativen Erläuterungen, führen Sie eine separate Checkliste und setzen Sie den lokalen Status zurück. Ändern Sie die Fenstergröße, um zu sehen, wie das zwölfspaltige Layout umbricht.

## CFPB Designsystem-Designreferenz

Kompiliertes CSS-Paket CFPB 5.10.2 und ES-Modul; aktuelle öffentliche Empfehlungen zur Grundlage. Die Demo verwendet native Klassen für aufklappbare Elemente und JavaScript. Das globale Basis-CSS wurde unverändert aus der Zeichenfolge mit den Basisstilen des veröffentlichten Moduls übernommen und nutzt Systemschriften als Fallback. Die Werte für font-size-adjust und den Zeilenabstand der Überschriften orientieren sich weiter unten an der versionierten Codebasis, da sie von der vereinfachten Tabelle der Grundlagen abweichen. Es wird weder ein CFPB-Logo noch eine Zugehörigkeit zum CFPB suggeriert.

### Farben und tatsächliche benutzerdefinierte Eigenschaften

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --black | #101820 | Standardtext; Grün als Markenakzent verwenden, nicht als Standardfarbe für Fließtext. |
| --green | #20aa3f | Akzentfarbe für Slug-Überschriften und Referenz für die institutionelle Farbpalette. |
| --pacific | #0072ce | Farbfamilie für Links und interaktive Elemente. |
| --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Hintergrund und Rahmen für aufklappbare Elemente in Version 5.10.2. |
| --red / --gold | #d14124 / #ff9e1b | Ergänzende Farbpalette; Status nicht ausschließlich durch Farbe vermitteln. |
### Typografie aus den versionierten Basisstilen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Current brand font | Source Sans 3 | Im Juli 2025 durch Avenir Next ersetzt; die Demo verwendet den system-ui-Fallback des Pakets. |
| Body | 16px / 1.375 | Zeilenhöhe von 22px bei der standardmäßigen Stammgröße des Browsers. |
| H1 | 34px / 1.25; weight 600 | 26px bei <=600px; die Code-Zeilenhöhe beträgt auf Desktop 42.5px. |
| H2 | 26px / 1.25; weight 600 | 22px bei <=600px. |
| H3 / H4 | 22px weight 400 / 18px weight 500 | 18px / 16px auf kleinen Bildschirmen; für beide gilt ein Zeilenabstand von 1.25. |
| H5 | 14px / 1.25; weight 600 | VERSALIEN, Zeichenabstand 1px. |
| Normalization | base .517; step .0054 | Versionierte benutzerdefinierte Eigenschaften sorgen bei Überschriften für schrittweise größere Anpassungen; das weicht von der vereinfachten Grundlagen-Tabelle ab. |
### Raster, Abstände und responsive Größenbereiche

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Grid | 12 columns; 30px gutters | Dokumentiertes Layoutmodell; die Demo kombiniert eine redaktionelle Aufteilung im Verhältnis 8/4. |
| Maximum width | 1230px | Responsive Außenabstände statt einer festen Inhaltsbreite verwenden. |
| Edge spacing | 15px mobile; 30px tablet/desktop | Auf schmalen Bildschirmen ausreichend gut lesbare Abstände beibehalten. |
| Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | Exportierte varsBreakpoints im Modul 5.10.2 überprüft. |
| Text rhythm | 15px paragraph gap; 30px stacked headings | Redaktionelle Abstände, keine Behauptung eines universellen 4px-Tokenrasters. |
| Measure | 66 characters ideal; 45–90 range | Typografieempfehlungen für fortlaufenden Text; die Vorschau hat eine maximale Breite von 66ch. |
### Aufklappbare Struktur und Laufzeit

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Root | o-expandable | Modifikatoren für Hintergrund und Rahmen können unabhängig voneinander verwendet werden. |
| Required descendants | __header, __label, __content | Der Header ist ein natives Schaltflächenelement. Zur Laufzeit ergänzt die Bibliothek Verhaltens-Hooks und den ARIA-Status. |
| Initialization | Expandable.init(container) | Gibt initialisierte Instanzen für die passenden Wurzelelemente zurück. |
| Instance API | expand(), collapse(), isExpanded(), getLabelText() | Anhand der veröffentlichten Version 5.10.2 überprüft, nicht anhand eines älteren Dokumentationseintrags zu toggleTargetState. |
| Initial expanded state | o-expandable--onload-open | Vor der Initialisierung festlegen; Sichtbarkeitsklassen der Laufzeit nicht manuell überschreiben. |
| Group choice | o-expandable-group--accordion | Optionales Verhalten, bei dem jeweils nur ein Element geöffnet sein kann. Die Vorschau ermöglicht bewusst den Vergleich geöffneter Bereiche. |
## CFPB Designsystem Vollständige Anleitung

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.

## CFPB Designsystem Implementierungsrahmen des CFPB

### Verbraucherinformationen vor dekorativen Elementen

> Das CFPB verbindet eine redaktionelle Informationsarchitektur mit Formular- und Offenlegungskomponenten. Sein Raster, die typografische Hierarchie und die kleinen Überschriften in Versalien sind ebenso prägend wie das vertraute Grün. Das Beispiel ist ein eigens entwickeltes Arbeitsblatt zum Lesen: Die wesentliche Orientierung bleibt sichtbar, während optionale Erläuterungen native Expandables verwenden. Es handelt sich weder um eine Finanzempfehlung noch um eine Beschwerdeeinreichung oder eine staatliche Dienstleistung.

Das Paket ist öffentlich zugänglich, doch für das Staatssiegel und die CFPB-Identität gelten gesonderte Einschränkungen. Die Wiederverwendung des Codes macht einen Dienst nicht zu einem offiziellen Angebot. Dieses Beispiel enthält daher weder Siegel noch Logo, Banner für offizielle Websites oder einen nachgeahmten Behörden-Header.

Unterstützende Spezifikation lesen

## CFPB Designsystem Typografie und Leserhythmus

### Source Sans 3 und Versionsunterschiede

Die aktuellen Richtlinien zur Schriftart nennen Source Sans 3. Damit wurde im Juli 2025 Avenir Next abgelöst. Das lokale Beispiel hat keine Abhängigkeit von extern gehosteten Schriftarten und verwendet bewusst den kompilierten Fallback mit Systemschriften. Eine echte Markenimplementierung sollte die autorisierten Schriftdateien über das dokumentierte Mix-in für lizenzierte Schriftarten bereitstellen.

Die veröffentlichte Überschriften-Tabelle und der aktuelle Base-Style-String stimmen nicht vollständig überein. In Paket 5.10.2 hat H1 eine Größe von 2.125em und einen Zeilenabstand von 1.25. Bei einer Root-Schriftgröße von 16px ergibt das 34/42.5 statt der in der Tabelle angegebenen Zeilenhöhe von 60px. Die obige Referenz folgt diesem ausführbaren Quellcode. Auch die Normalisierung von Überschriften verwendet Anpassungen je Ebene; leite aus der vereinfachten Tabelle keine globale Überschreibung ab.

Absätze sollten etwa 66 Zeichen breit sein und einen Abstand von 15px haben. Überschriften stehen in Satzschreibung, mit Ausnahme der kompakten Darstellung von H5 und Slugs. So lässt sich ein Ratgeberartikel schnell überfliegen, ohne jeden Absatz in eine Karte zu packen.

Unterstützende Spezifikation lesen

## CFPB Designsystem Farben und redaktionelle Gestaltung

### Die Rolle ist wichtiger als das Grün allein

Das kompilierte CSS stellt --black, --green, --pacific und die abgestuften ergänzenden Farbpaletten bereit. Für Text wird Schwarz verwendet; Pacific sorgt für einen besser erkennbaren Interaktionshinweis. Der hellgraue Hintergrund von Expandable markiert eine Lesegrenze und keinen deaktivierten Zustand. Native Slug-Überschriften kombinieren eine dünne graue Linie über die ganze Breite mit einem kurzen, stärkeren grünen Abschnitt.

Das Arbeitsblatt lässt seine zentrale Lesefläche bewusst weiß. Grün kommt am Abschnittstrenner zum Einsatz, während der Fortschrittszähler als gewöhnlicher, gut lesbarer Text dargestellt wird. Ein erledigter oder markierter Punkt bleibt verständlich, ohne dass man Grün von Rot unterscheiden muss. Die Seite weist nicht jedem Farbfeld der Palette eigenmächtig eine Erfolgs- oder Fehlerbedeutung zu.

- Verwenden Sie --gray-5 für eine zurückhaltende Hintergrundfläche des Expandable und --gray-40 für dessen Umrandung.

- Links sollten nicht nur durch ihre Farbe, sondern auch durch Unterstreichung oder Interaktionsgestaltung erkennbar sein.

- Verwenden Sie die Identitätsmerkmale nur mit entsprechender Berechtigung. Eine Lizenz für die Farbpalette ist keine Erlaubnis, eine Zugehörigkeit vorzutäuschen.

Unterstützende Spezifikation lesen

## CFPB Designsystem Zwölf Spalten und eine zweckmäßige Informationsdichte

### Ein Artikel mit ausreichend Rand

Das dokumentierte Raster umfasst zwölf Spalten, feste Zwischenräume von 30px und eine maximale Breite von 1230px. Auf Mobilgeräten beträgt der Außenabstand 15px, bei größeren Layouts 30px. Die Vorschau setzt dieses Raster ab 901px Breite mit einem acht Spalten breiten Lesebereich und einer vier Spalten breiten Arbeits-Checkliste um. Darunter wird die Checkliste unter dem Artikel angeordnet. Diese Aufteilung ist eine Anwendungskomposition auf Grundlage des veröffentlichten Rasters und keine offizielle universelle Seitenvorlage.

Längere Texte behalten eine eigene maximale Breite von 66ch, selbst wenn die Seite breiter werden kann. Schaltflächen werden bei Bedarf umgebrochen; die Seitenleiste hat weder eine fixierte Höhe noch einen verschachtelten Scrollbereich. Wird eine Erläuterung aufgeklappt, wächst die normale Dokumenthöhe. So eignet sich dieselbe Komposition auch für die eingebettete Vorschau auf der Ressourcenseite.

Unterstützende Spezifikation lesen

## CFPB Designsystem Aufbau nativer Expandables

### Auslöser und optionale Inhalte getrennt halten

Ein Expandable-Wurzelelement der älteren Version enthält einen __header-Button, einen __label und einen __content-Bereich. Der Button erhält den Tastaturfokus. In diesem Beispiel liefert ein span die Beschriftung; dekorative Plus-/Minuszeichen sind im zugänglichen Namen verborgen. Die Bibliothek weist bei der Initialisierung den Status und die Verhaltens-Hooks zu. Die Anwendung bildet diese Änderungen nicht nach.

Die Modifikatoren --background und --border sorgen für die umrandete Darstellung. Der Modifikator --padded bietet eine größere Variante mit entsprechend größerer Beschriftung und ist nicht für jedes aufklappbare Element erforderlich. Wichtige Anweisungen zum Arbeitsblatt stehen außerhalb des ausgeblendeten Bereichs, damit Leser die Aufgabe verstehen, bevor sie optionale Erläuterungen öffnen.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

## CFPB Designsystem Verhalten von Offenlegungen und Checkliste

### Zwei voneinander unabhängige Arten von Status

Die native Bibliothek verwaltet den Offenlegungsstatus. Das Arbeitsblatt verwaltet seine drei gewöhnlichen Checkbox-Werte und den daraus ermittelten Zählerstand. Das Öffnen eines Bereichs markiert keine Aufgabe als erledigt, und das Markieren einer Aufgabe klappt keine Informationen ein. Diese Modelle sind bewusst getrennt: Sichtbarkeit ist kein Beleg für Verständnis.

Die Instanz in Version 5.10.2 stellt expand, collapse und isExpanded bereit. Auf der öffentlichen Expandables-Seite findet sich ein älterer Verweis auf toggleTargetState. Daher verwendet diese Anleitung die tatsächlich versionierte API. „Alle öffnen“ und „Alle schließen“ durchlaufen die initialisierten Instanzen. Unabhängige Bereiche sind hier vorzuziehen, da Leser die beiden Erläuterungen möglicherweise miteinander vergleichen möchten.

Beim Zurücksetzen werden alle Checkbox-Werte gelöscht und die Bereiche über die API der Bibliothek eingeklappt. Dabei wird keine Bestätigung für eine Einreichung vorgetäuscht. Der Fortschritt wird über ein höfliches Status-Element angekündigt, ohne bei jeder Änderung einer Checkbox den Tastaturfokus zu verschieben.

Unterstützende Spezifikation lesen

## CFPB Designsystem Kompilierte Assets und Basisstile

### Ein ES-Modul, kein klassisches Skript

Installieren Sie das festgelegte Paket, kopieren Sie die beiden kompilierten Assets in Ihr statisches Verzeichnis und importieren Sie Expandable mit einem Modulskript. Die veröffentlichte Datei index.js in Version 5.10.2 enthält ES-Modulexporte. Ein klassisches Skript-Tag aus dem älteren Integrationsbeispiel würde daher einen Syntaxfehler verursachen. Außerdem initialisiert die Datei die älteren Expandable-Elemente nicht automatisch.

Das Stylesheet der Komponente allein enthält nicht die seitenweiten Regeln für Überschriften und Fließtext. Produktionsprojekte können das Basis-SCSS des Pakets wie in der offiziellen Integrationsanleitung beschrieben kompilieren. Dieses isolierte Beispiel verwendet stattdessen weiterhin exakt die Basis-CSS-Zeichenfolge, die in dasselbe veröffentlichte Modul eingebettet ist, und stellt sie als separat dokumentierte lokale Datei bereit. Diese Extraktion ist eine lokale Entscheidung zur Paketierung und kein neu veröffentlichter CFPB-Einstiegspunkt.

Wenn Sie SCSS-Quelldateien mit Symbolverweisen kompilieren, binden Sie die dokumentierte PostCSS-SVG-Ersetzung des Projekts ein. Im kompilierten Snapshot sind diese Verweise bereits aufgelöst. Vermeiden Sie eine nur auf Sass basierende Konfiguration, bei der --cfpb-background-icon-svg nicht aufgelöst wird.

1. Installieren Sie Version 5.10.2 und legen Sie TERMS.md zusammen mit den lokal bereitgestellten Assets ab.

2. Laden Sie die Komponenten-CSS und zusätzlich die gewählten globalen Basisstile; konfigurieren Sie die Schriftarten ausdrücklich.

3. Verwenden Sie einen Modulimport, initialisieren Sie den Container, sobald sein Markup vorhanden ist, und weisen Sie anschließend den zurückgegebenen Instanzen die Anwendungsaktionen zu.

Unterstützende Spezifikation lesen

## CFPB Designsystem Leseablauf prüfen

### Ein Aufklappbereich ist nicht der ganze Barrierefreiheitstest

Bei schmaler Ansichtsbreite wird der Haupttitel durch die nativen Basisstile verkleinert, und die Checkliste folgt auf den Artikel. Auf Desktop-Bildschirmen zeigt die zweispaltige Anordnung optionale Lese- und Arbeitsnotizen nebeneinander. Testen Sie beide Ansichten mit geöffneten Bereichen, nicht nur im eingeklappten Zustand.

Navigieren Sie mit der Tab-Taste zu jeder nativen Schaltfläche und schalten Sie den Bereich mit Enter oder der Leertaste um. Prüfen Sie, ob die Bibliothek aria-expanded aktualisiert und ausgeblendete Inhalte nicht mehr in der Tab-Reihenfolge erscheinen. Markieren Sie dann zwei Aufgaben, öffnen und schließen Sie alle Erläuterungen und vergewissern Sie sich, dass die Anzahl bis zum Zurücksetzen bei zwei bleibt. Mit diesen Tests lassen sich Konflikte zwischen Anwendungs- und Bibliotheksstatus erkennen, die auf einem Screenshot nicht sichtbar wären.

Dieses lokale Beispiel verwendet weder Speicher noch Analysen, Netzwerkübermittlung oder echte personenbezogene Daten. Die native Verwendung der Komponente allein gewährleistet nicht die Barrierefreiheit der fertigen Website. Kontrast, Inhalt, Browserunterstützung und Verhalten mit assistiven Technologien müssen im Dienst, der die Komponente einbindet, weiterhin geprüft werden.

Unterstützende Spezifikation lesen

## CFPB Designsystem Beispiele für Designsystem-Komponenten

### Ein natives Expandable

Erforderliche Legacy-Struktur, visuelle Hinweise und optionale Erläuterungen.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

Code-Referenz

### Aufklappbereiche initialisieren und steuern

Verwenden Sie das Modul in Version 5.10.2 und die zurückgegebenen Instanzen; globale Basisstile sind eine separate Entscheidung.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

Code-Referenz

- Die veröffentlichte Version 5.10.2 ist ein ESM-Modul. Laden Sie sie nicht als klassisches Skript.

- Das Beispiel verwendet wortgetreu extrahierte Basisstile des Pakets, die in der zugehörigen SOURCE.md dokumentiert sind.

### 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.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Separate a question from a request</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
  </div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>
```

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.

## CFPB Designsystem Einrichtung des KI-Agenten

### Ausgangspunkt für die Implementierung

Die lokale Demo führt das kompilierte native Modul in Version 5.10.2 und CSS aus. Die npm-Kopieranleitung ist für Projekte gedacht. Für Builds aus SCSS-Quelldateien ist zusätzlich die dokumentierte Symbolverarbeitung erforderlich. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel finden Sie unter „Sources“. Es enthält auch die exakten Abhängigkeiten für die 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/cfpb.html. Öffnen Sie Beispiele mit Modulen nicht über file://.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

### Ein Prompt für dein Projekt

```
Erstellen Sie ein eigenständiges redaktionelles Arbeitsblatt, das sich an CFPB orientiert und das tatsächliche Expandable-Modul in Version 5.10.2 verwendet. Fügen Sie die erforderliche Struktur aus Kopfzeile, Bezeichnung und Inhalt, separate Aktionen zum Öffnen und Schließen aller Bereiche sowie eine gewöhnliche Checkliste mit Kontrollkästchen ein, deren Werte bei Änderungen an den Aufklappbereichen erhalten bleiben. Verwenden Sie eine Aufteilung im Verhältnis 8/4 über zwölf Spalten, die unter 901px untereinander angeordnet wird, mobile Seitenränder von 15px und eine Lesebreite von 66ch. Stellen Sie die typografischen Basisstile getrennt von der Komponenten-CSS bereit. Fügen Sie weder CFPB-Kennzeichen noch Finanzberatung oder eine vorgetäuschte Übermittlung hinzu und importieren Sie das ESM-Bundle nicht über klassische Skripte.
```

## CFPB Designsystem Quellen und Geltungsbereich

Referenz für eine unabhängige Implementierung. Die nativen Paketkomponenten begründen keine Zugehörigkeit zum CFPB. Eigene Lerninhalte, keine Finanzberatung und keine Übermittlung; prüfen Sie TERMS.md, bevor Sie die Inhalte wiederverwenden.

- Schriftarten Aktuelle Schriftart, Normalisierung und Leserhythmus.

- Überschriften Responsive Überschriftenhierarchie; mit dem versionsgebundenen Code vergleichen.

- Farbe CFPB-Farbpalette und Verwendungshinweise.

- Raster Zwölf Spalten, Abstände und maximale Breite.

- Aufklappen Komponentenstruktur und Varianten.

- Installieren Paket- und Quellcodeintegration.

- Tokens Geltungsbereich der neueren Token-Pipeline.

- 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.

## CFPB Designsystem Verwandte Ressourcen

### CMS Designsystem

Implementieren Sie CMS Core mit versionierten Theme-Variablen, den tatsächlichen APIs der Review-Komponente und einem funktionsfähigen Bearbeitungs- und Prüfablauf, der die Antworten und den Fokus der Nutzenden beibehält.

### 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.


- [Implementierungsreferenz](https://cfpb.github.io/design-system/components/expandables)
- [Quelle](https://cfpb.github.io/design-system/foundation/color)
- [Quelle](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Quelle](https://cfpb.github.io/design-system/foundation/grid)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/foundation/fonts)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/foundation/color)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/foundation/grid)
- [Code-Referenz](https://cfpb.github.io/design-system/components/expandables)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/components/expandables)
- [Unterstützende Spezifikation lesen](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Unterstützende Spezifikation lesen](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Code-Referenz](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Schriftarten Aktuelle Schriftart, Normalisierung und Leserhythmus.](https://cfpb.github.io/design-system/foundation/fonts)
- [Überschriften Responsive Überschriftenhierarchie; mit dem versionsgebundenen Code vergleichen.](https://cfpb.github.io/design-system/foundation/headings)
- [Farbe CFPB-Farbpalette und Verwendungshinweise.](https://cfpb.github.io/design-system/foundation/color)
- [Raster Zwölf Spalten, Abstände und maximale Breite.](https://cfpb.github.io/design-system/foundation/grid)
- [Aufklappen Komponentenstruktur und Varianten.](https://cfpb.github.io/design-system/components/expandables)
- [Installieren Paket- und Quellcodeintegration.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Tokens Geltungsbereich der neueren Token-Pipeline.](https://cfpb.github.io/design-system/development/design-tokens)