Pega Bolt Designsystem.

Pega Bolt-Designsystem: Die passende Bolt-Implementierung auswählen

Twig und React haben unterschiedliche Verträge

Dieser Leitfaden konzentriert sich auf die öffentliche Bolt-Twig-/Pattern-Lab-Implementierung. Die aktuelle Bolt-Homepage bietet außerdem BoltDS React für Anwendungen und Portale an; für die beiden Implementierungen gelten separate Dokumentationen und Versionsstände. Die Vorschau ist eine unabhängige Interpretation mit HTML und keine Bolt-Laufzeitumgebung.

Dieses Beispiel ist eine Workshop-Ressource mit einer sichtbaren Zusammenfassung und optionalen Fragen. Die inhaltsorientierte Twig-Implementierung eignet sich dafür besonders gut: Die redaktionelle Hierarchie steht im Vordergrund, während das Akkordeon ergänzende Informationen bei Bedarf zugänglich macht. Eine mit BoltDS React erstellte Anwendung sollte dessen Dokumentation verwenden, statt Twig-Namespace-Pfade zu übernehmen.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Marineblaue Struktur mit gezielten, leuchtenden Akzenten

Eine markengerechte Lesefläche

Die veröffentlichte Palette umfasst Marineblau #001f5f, Türkis #10a5ac und Orange #f76923. Im Beispiel dient Marineblau als kräftige redaktionelle Kopffläche, Türkis und Orange setzen Akzente in der Illustration. Diese Farbtöne gehören zur Grundlage, belegen aber nicht, dass sich jede Farbkombination für kleine Texte eignet.

Die Fakten zur Ressource stehen auf weißen und hellen marineblauen Flächen. Das dekorative Verzweigungsdiagramm veranschaulicht einen Workshop zur Vereinfachung eines Serviceablaufs. Es handelt sich um eine eigens erstellte Grafik, nicht um ein Pega-Logo oder ein offizielles Diagramm.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Fließende Typografie und gut lesbare Zeilenlängen

Rem-Werte sind keine festen Pixelangaben

Bolt gibt 1rem als reguläre Größe an, 1.4rem als groß, 2.35rem als xxlarge und 3.75rem als display. Die Root-Größe skaliert je nach Viewport und Dichte. Wer die gesamte Tabelle anhand einer festen Basis von 16 px umrechnet, verliert das vorgesehene Verhalten.

Die typografische Grundlage sieht Open Sans für Fließtext und Überschriften vor. Die eigenständige Vorschau verwendet eine lokale Systemschrift als Ersatz, da keine Schriftdateien enthalten sind. Sie bietet einen klaren Titel, eine kompakte Dachzeile und angenehm lesbare Absätze, ohne eine typografische Übereinstimmung bis auf den Pixel zu behaupten.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Horizontaler und vertikaler Rhythmus unterscheiden sich

Ersetze die Skalen nicht durch eine allgemeine 8-Punkt-Skala

Der mittlere horizontale Abstand beträgt 1.55rem, der mittlere vertikale Abstand dagegen 1.35rem. Bei großen Abständen gilt dieselbe Unterscheidung: 3.1rem horizontal und 2.7rem vertikal. Verwende die x-Skala zwischen benachbarten Objekten und die y-Skala zwischen übereinander angeordneten Abschnitten.

In der Vorschau stehen Einleitung und Fragenliste auf breiten Bildschirmen in getrennten Spalten. An einem lokalen Breakpoint von 700 px werden sie untereinander angeordnet. Dieser Breakpoint ist eine Anwendungsentscheidung und kein Bolt-Token. Lange Fragenbeschriftungen werden neben einem Symbol umgebrochen, ohne dass der Text verkleinert wird.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Fragenliste mit Twig erstellen

Elemente werden als Inhalt erfasst, nicht als Daten-Prop übergeben

Jeder Aufruf von accordion-item.twig übergibt Auslöser und Inhalt. Ein Twig-set-Block erfasst die gerenderten Elemente; der übergeordnete Block erhält dieses Markup über content. Das vollständige Beispiel oben klappt die erste Frage aus und verwendet single: true.

spacing steuert die Innenabstände der Elemente und icon_valign die Ausrichtung des Symbols. Behalte Trennlinien bei, wenn die Fragen klar voneinander abgegrenzt werden sollen. Das Flag inactive ist kein deaktiviertes Formularsteuerelement: Es klappt den Inhalt ein und blendet das Symbol aus.

• Datumsangaben, Voraussetzungen und Verfügbarkeit gehören außerhalb eingeklappter Antworten.
• Formuliere den Auslöser als konkrete Frage.
• Füge kein weiteres Akkordeon in eine Antwort ein.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Aufklappen, ohne die Leseposition zu verlieren

Immer nur eine Antwort gleichzeitig

Die Interpretation mit HTML verwendet echte Schaltflächen, aria-expanded, aria-controls und ausgeblendete Antwortbereiche. Beim Klicken auf eine geschlossene Frage wird sie geöffnet und die vorherige Antwort geschlossen. Beim Klicken auf die geöffnete Frage wird sie eingeklappt. Der Fokus bleibt auf der auslösenden Schaltfläche.

So wird das ausgewählte Verhalten mit jeweils nur einem geöffneten Element nachgebildet, unabhängig von Bolt JavaScript. Die Vorschau implementiert kein Deep Linking von Bolt und beansprucht nicht, die native Komponentenlaufzeitumgebung auszuführen. In nativem Bolt hat bei aktiviertem Einzelmodus ein per Deep Link aufgerufenes Element Vorrang vor einem zunächst geöffneten Element.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Die Dichte gilt für die ganze Seite

Einstellung für die Root, kein Komponenten-Prop

Bolt erkennt comfortable, regular und compact über data-bolt-info-density am html-Element. Regular ist die Standardeinstellung. Comfortable vergrößert Schrift und Abstände, compact verkleinert beides.

Wende das Root-Attribut nicht auf ein Akkordeon an, um eine unterstützte Dichteänderung nur für diese Komponente zu erwarten. Für diese Leseseite behält die Vorschau eine durchgehend komfortable redaktionelle Gestaltung bei, statt die native Dichtesteuerung vorzutäuschen.

Unterstützende Spezifikation lesen

Pega Bolt-Designsystem: Die echte Komponente in den Kontext einbinden

Die dokumentierte Umgebung verwenden

Der Installationsbefehl ist für eine Bolt-Twig-Anwendung gedacht, die Komponentennamespaces auflöst und die erforderlichen Assets kompiliert. Das öffentliche Repository bietet mit yarn setup und yarn start eine vollständige Entwicklungsumgebung. Sie ist als Referenzumgebung gedacht, nicht als Produktionsbereitstellung mit zwei Befehlszeilen.

1. Wähle Twig für die serverseitige Inhaltsimplementierung und bestätige die Version in deiner Anwendung.
2. Installiere das Accordion-Paket, registriere dessen vorhandenen Twig-Namespace über die Bolt-Anwendungskonfiguration und binde die kompilierten Projektressourcen ein.
3. Rendere das vollständige Fragenbeispiel und prüfe anschließend im tatsächlichen Projekt, ob nur ein Element gleichzeitig geöffnet ist, die Bedienelemente umbrechen und die Bedienung per Tastatur funktioniert.

Unterstützende Spezifikation lesen

Beispiele für Komponenten des Pega Bolt-Designsystems

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>

{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}