diff --git a/src/de/accessibility/introduction/about-this-guide/about-this-guide.md b/src/de/accessibility/introduction/about-this-guide/about-this-guide.md index 1d85aa28a..14cdd7b16 100644 --- a/src/de/accessibility/introduction/about-this-guide/about-this-guide.md +++ b/src/de/accessibility/introduction/about-this-guide/about-this-guide.md @@ -12,7 +12,7 @@ Produktteams, welche das Thema Barrierefreiheit in ihrem Projekt berücksichtige Der Guide ist nach den verschiedenen Rollen eines typischen Produktteams strukturiert. Dazu gehören: Product Owner, User Research, Interaction Design, Visual Design, Development, Content Design und Testing. Für jede dieser Rollen sind die vier wichtigsten Empfehlungen erwähnt. Werden alle diese Punkte berücksichtigt, ist die Barrierefreiheit bereits auf einem guten Stand. {.lead} -Oft überschneiden sich die Rollen eines Produktteams. Beispielsweise wird eine Entwicklerin oder ein Entwickler häufig auch statischen Content einpflegen. Es ist also sinnvoll, sich auch mit den Empfehlungen der anderen Rollen vertraut zu machen. {.lead} +Oft überschneiden sich die Rollen eines Produktteams. Beispielsweise wird eine Entwicklerin oder ein Entwickler häufig auch statischen Content einpflegen. Es ist also sinnvoll, sich auch mit den Empfehlungen der anderen Rollen vertraut zu machen. {.lead} Dieser Guide bietet eine Anleitung, wie die wichtigsten Punkte zur barrierefreien Produktentwicklung angegangen werden können. Für ein vollständig barrierefreies Produkt, das entsprechend zertifiziert werden kann, sind jedoch noch zusätzliche Schritte notwendig. Die dazu nötigen Dokumente sind in den weiteren Informationen vermerkt. {.lead} diff --git a/src/de/design-system/getting-started/faq/items/other-stakeholders.md b/src/de/design-system/getting-started/faq/items/other-stakeholders.md index 891a4eabe..48d9b665c 100644 --- a/src/de/design-system/getting-started/faq/items/other-stakeholders.md +++ b/src/de/design-system/getting-started/faq/items/other-stakeholders.md @@ -5,4 +5,4 @@ permalink: false order: 1 --- -Ja, du kannst gerne der SBB UX Community beitreten. \ No newline at end of file +Ja, du kannst gerne der SBB UX Community beitreten. \ No newline at end of file diff --git a/src/de/design-system/lean/basics/typography/typography.md b/src/de/design-system/lean/basics/typography/typography.md index 2d368ad56..3874331a1 100644 --- a/src/de/design-system/lean/basics/typography/typography.md +++ b/src/de/design-system/lean/basics/typography/typography.md @@ -21,7 +21,7 @@ Für gewisse Anwendungsbereiche ist der Einsatz einer Monospaced Schrift sinnvol * DejaVu Sans Mono ## Stile -Die hier definierten Schriftstile bilden die Basis von Webapplikationen und deren Komponenten. Werden andere eingesetzt ist auf eine klare Hierarchie zu achten ebenso wie auf ausreichenden Kontrast und entsprechenden Zeilen- / Absatzabstand. Für die Schriftfarben gelten die SBB-Farben. {.lead} +Die hier definierten Schriftstile bilden die Basis von Webapplikationen und deren Komponenten. Werden andere eingesetzt ist auf eine klare Hierarchie zu achten ebenso wie auf ausreichenden Kontrast und entsprechenden Zeilen- / Absatzabstand. Für die Schriftfarben gelten die SBB-Farben. {.lead} ### Überschrift H1 {{ imageOnGreyBackground({ diff --git a/src/de/design-system/lean/components/filter/overview.md b/src/de/design-system/lean/components/filter/overview.md index 6234d4fdf..35e298072 100644 --- a/src/de/design-system/lean/components/filter/overview.md +++ b/src/de/design-system/lean/components/filter/overview.md @@ -19,6 +19,6 @@ permalink: false ## Regeln * Ein Filter hat immer einen Indikator, welcher angibt, dass der Filter aktiv ist und wie viele Ergebnisse in der gefilterten Ansicht dargestellt werden, z.B. 100/500 Einträge. {.lead} -* Ein Filter kann über unterschiedliche Komponenten verfügen, z.B. Autocomplete, Checkboxen, Chips, Datepicker, Radiobuttons, Selects (Dropdowns), Tags, Freitextfelder, Toggle Buttons. {.lead} +* Ein Filter kann über unterschiedliche Komponenten verfügen, z.B. Autocomplete, Checkboxen, Chips, Datepicker, Radiobuttons, Selects (Dropdowns), Tags, Freitextfelder, Toggle Buttons. {.lead} * Ein Filter muss mit einer Aktion zurückgesetzt werden können (z.B. Button «Filter zurücksetzen»). {.lead} * Mehrere Filter-Elemente können ausgewählt oder abgewählt werden. {.lead} diff --git a/src/de/design-system/legacy/basics/images/images.md b/src/de/design-system/legacy/basics/images/images.md index 108d1a08a..01e0c59e3 100644 --- a/src/de/design-system/legacy/basics/images/images.md +++ b/src/de/design-system/legacy/basics/images/images.md @@ -37,7 +37,7 @@ Bei Bildern werden folgende Stile unterschieden: {.lead} * Bilder und Videos werden grundsätzlich gleich behandelt. {.lead} * Keyvisuals haben nie Bildunterschriften oder Copyright-Infos. {.lead} * Keyvisuals haben je Endgerät ein festes Format, der Bildausschnitt passt sich dem Viewport an. {.lead} -* Keyvisuals können als Mediaslider umgesetzt werden. {.lead} +* Keyvisuals können als Mediaslider umgesetzt werden. {.lead} * Kein Beschreibungstext erlaubt. {.lead} ### Formate diff --git a/src/de/design-system/legacy/basics/typography/typography.md b/src/de/design-system/legacy/basics/typography/typography.md index e362e0e9b..63ff8be91 100644 --- a/src/de/design-system/legacy/basics/typography/typography.md +++ b/src/de/design-system/legacy/basics/typography/typography.md @@ -80,7 +80,7 @@ Die hier definierten Schriftstile bilden die Basis von Webseiten und deren Kompo }) }} * Gilt als Standardlink innerhalb von Texten. {.lead} -* Zusätzliche Ausführungen von Links sind unter Link zu finden. {.lead} +* Zusätzliche Ausführungen von Links sind unter Link zu finden. {.lead} ### Subtext {{ imageOnGreyBackground({ @@ -96,7 +96,7 @@ Die hier definierten Schriftstile bilden die Basis von Webseiten und deren Kompo title: 'Tabellenheader' }) }} -* Definition der Tabelle als Komponente ist unter Table zu finden. {.lead} +* Definition der Tabelle als Komponente ist unter Table zu finden. {.lead} ### Tabellendaten {{ imageOnGreyBackground({ @@ -105,7 +105,7 @@ Die hier definierten Schriftstile bilden die Basis von Webseiten und deren Kompo title: 'Tabellendaten' }) }} -* Definition der Tabelle als Komponente ist unter Table zu finden. {.lead} +* Definition der Tabelle als Komponente ist unter Table zu finden. {.lead} ### Liste geordnet {{ imageOnGreyBackground({ diff --git a/src/de/design-system/legacy/components/autocompletion/overview.md b/src/de/design-system/legacy/components/autocompletion/overview.md index d58affd8e..3c8ed5271 100644 --- a/src/de/design-system/legacy/components/autocompletion/overview.md +++ b/src/de/design-system/legacy/components/autocompletion/overview.md @@ -18,7 +18,7 @@ Unterstützt den Benutzer bei der Eingabe mit Vorschlägen. {.lead} ## Regeln * Die Autocompletion hat immer ein Label. {.lead} * Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} * Während der Eingabe werden direkt Vorschläge eingeblendet (typischerweise nach drei Zeichen, kann aber projektspezifisch angepasst werden). {.lead} * Die aufgelisteten Einträge können mittels Pfeiltasten durchlaufen und mit Enter übernommen werden. {.lead} * Es werden maximal 10 Vorschläge angezeigt. {.lead} diff --git a/src/de/design-system/legacy/components/breadcrumb/overview.md b/src/de/design-system/legacy/components/breadcrumb/overview.md index 65a104316..7eccd81dd 100644 --- a/src/de/design-system/legacy/components/breadcrumb/overview.md +++ b/src/de/design-system/legacy/components/breadcrumb/overview.md @@ -15,7 +15,7 @@ Dient zur Anzeige der Navigationshierarchie der aktuellen Seite. {.lead} Auf jeder Seite, bei denen der Benutzer schnell auf eine Schwester-oder Eltern-Seite navigieren können soll. {.lead} ## Regeln -* Der Breadcrumb ist immer direkt unter dem Header zu positionieren. Ausnahme wenn eine Ghettobox angezeigt wird, dann folgt der Breadcrumb unmittelbar nach der letzten Ghettobox. {.lead} +* Der Breadcrumb ist immer direkt unter dem Header zu positionieren. Ausnahme wenn eine Ghettobox angezeigt wird, dann folgt der Breadcrumb unmittelbar nach der letzten Ghettobox. {.lead} * Der Breadcrumb kann bei langen Einträgen mehrzeilig werden. {.lead} * Bei Desktop und Tablet werden immer alle Ebenen angezeigt. {.lead} * Auf Mobile wird lediglich die letzte Ebenen ausgeschrieben. Vorangehende Ebenen werden durch eine einzige mit «...» dargestellt. Bei Klick auf «...» werden alle Zwischenebenen eingeblendet. {.lead} diff --git a/src/de/design-system/legacy/components/button/overview.md b/src/de/design-system/legacy/components/button/overview.md index 28164be46..5c96bc219 100644 --- a/src/de/design-system/legacy/components/button/overview.md +++ b/src/de/design-system/legacy/components/button/overview.md @@ -20,7 +20,7 @@ Löst eine Aktion auf einer Seite aus. {.lead} * Darf nicht innerhalb von Fliesstext eingesetzt werden. {.lead} * Darf nicht im Header als Navigation oder Funktion eingesetzt werden. {.lead} * Die Mindestbreite beträgt 60px, die Maximalbreite 400px. {.lead} -* Die Breite wächst mit der Textlänge. Beim Einsatz im Next Best Click (NBC) oder in mobilen Ansichten ist die Breite 100%. {.lead} +* Die Breite wächst mit der Textlänge. Beim Einsatz im Next Best Click (NBC) oder in mobilen Ansichten ist die Breite 100%. {.lead} * Ist der Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «\...» abgekürzt. {.lead} * Der Text ist immer einzeilig. {.lead} * In Ausnahmefällen darf das Pfeil-Icon durch ein anderes, passendes Icon ersetzt werden. {.lead} diff --git a/src/de/design-system/legacy/components/checkbox/overview.md b/src/de/design-system/legacy/components/checkbox/overview.md index 75d656979..6758ee4a2 100644 --- a/src/de/design-system/legacy/components/checkbox/overview.md +++ b/src/de/design-system/legacy/components/checkbox/overview.md @@ -24,4 +24,4 @@ Dient zur Eingabe von Ja/Nein-Werten. {.lead} * Der Text kann mehrzeilig sein. {.lead} * Nebst der eigentlich Checkbox dient auch der gesamte Text als Click-Target. {.lead} * Oberhalb einer Checkbox-Gruppe kann ein Titel eingesetzt werden. {.lead} -* Für detaillierte Erklärungen zu einer Checkbox-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen zu einer Checkbox-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} diff --git a/src/de/design-system/legacy/components/datepicker/overview.md b/src/de/design-system/legacy/components/datepicker/overview.md index 2f87b5d8e..2a6718497 100644 --- a/src/de/design-system/legacy/components/datepicker/overview.md +++ b/src/de/design-system/legacy/components/datepicker/overview.md @@ -18,7 +18,7 @@ Immer wenn vom Benutzer ein Datumswert verlangt wird. {.lead} * Datumsangaben sind immer einzeilig. {.lead} * Die Datumswahl hat immer ein Label. {.lead} * Optionale Datumseingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} * Mit Klick ins Datumsfeld kann das Datum von Hand eingetragen werden. Bei Touch-Geräten erscheint die Zahlen-Eingabetastatur des entsprechenden Systems. {.lead} * Bei der manuellen Eingabe muss der Punkt immer vom Benutzer eingegeben werden. Danach übernimmt die Komponente die korrekte Formatierung, d.h. es müssen Eingaben wie 1.1.18 akzeptiert und ins gewünschte Format umgesetzt werden. {.lead} * Bei Klick auf das Kalender-Icon öffnet sich ein Kalender-Layer zur Auswahl des Datums. Mittels Klick ausserhalb des Kalender-Layers wird dieser wieder geschlossen. {.lead} diff --git a/src/de/design-system/legacy/components/dialog/overview.md b/src/de/design-system/legacy/components/dialog/overview.md index a7b5364b6..b9b7e5a7e 100644 --- a/src/de/design-system/legacy/components/dialog/overview.md +++ b/src/de/design-system/legacy/components/dialog/overview.md @@ -12,7 +12,7 @@ permalink: false Dient zur Darstellung von Detailinformationen einer Content-Seite. {.lead} ## Wann soll die Komponente eingesetzt werden? -* Wenn zu einem Teil einer Seite on-demand detailliertere oder zusätzliche Informationen angezeigt werden soll (beispielsweise erweiterte Hilfestellungen, bei denen der Tooltip nicht ausreicht). {.lead} +* Wenn zu einem Teil einer Seite on-demand detailliertere oder zusätzliche Informationen angezeigt werden soll (beispielsweise erweiterte Hilfestellungen, bei denen der Tooltip nicht ausreicht). {.lead} * Zur Darstellung des Editiermodus bei Formularen. {.lead} * Zur vergrösserten Ansicht von Bildern. {.lead} diff --git a/src/de/design-system/legacy/components/fileselector/overview.md b/src/de/design-system/legacy/components/fileselector/overview.md index 18c03e4f4..7aa508c19 100644 --- a/src/de/design-system/legacy/components/fileselector/overview.md +++ b/src/de/design-system/legacy/components/fileselector/overview.md @@ -15,9 +15,9 @@ Dient zum Hochladen von Dateien. {.lead} Wenn eine Anwendung eine oder mehrere Dateien eines Benutzers verlangt. {.lead} ## Regeln -* Mit Klick auf den Button «Datei hochladen» öffnet sich der Datei-Browser des Systems. {.lead} +* Mit Klick auf den Button «Datei hochladen» öffnet sich der Datei-Browser des Systems. {.lead} * Die hochgeladenen Dateien werden in einer Liste angezeigt. {.lead} * Die Liste ist sortiert nach der chronologischen Reihenfolge des Hochladens. {.lead} * Mittels «Löschen» Button (Papierkorb) kann eine einzelne Datei wieder aus der Liste entfernt werden. {.lead} * Der Listeneintrag beinhaltet das Icon des Dateityps, den Dateinamen sowie in Klammern den Dateityp und die Dateigrösse. {.lead} -* Der Datei-Upload hat über dem Button immer einen Hinweis, welche Dateitypen und -grössen hochgeladen werden können. {.lead} \ No newline at end of file +* Der Datei-Upload hat über dem Button immer einen Hinweis, welche Dateitypen und -grössen hochgeladen werden können. {.lead} \ No newline at end of file diff --git a/src/de/design-system/legacy/components/ghettobox/variants-states.md b/src/de/design-system/legacy/components/ghettobox/variants-states.md index 74cb7c7de..d026cab70 100644 --- a/src/de/design-system/legacy/components/ghettobox/variants-states.md +++ b/src/de/design-system/legacy/components/ghettobox/variants-states.md @@ -27,7 +27,7 @@ Diese Variante hat folgende Zustände: {.lead} title: 'Darstellung der Komponente Ghettobox mit Link' }) }} -* Sofern der Text einen weiterführenden Link beinhaltet, unterscheidet die Ghettobox die Zustände Normal und Hover. {.lead} +* Sofern der Text einen weiterführenden Link beinhaltet, unterscheidet die Ghettobox die Zustände Normal und Hover. {.lead} * Am Ende des Textes folgt immer ein Pfeil-Icon. {.lead} * Die ganze Fläche der Ghettobox ist klickbar und öffnet den hinterlegten Link (ausser über dem X-Icon). {.lead} diff --git a/src/de/design-system/legacy/components/link/overview.md b/src/de/design-system/legacy/components/link/overview.md index 371246ae1..bb0adbee9 100644 --- a/src/de/design-system/legacy/components/link/overview.md +++ b/src/de/design-system/legacy/components/link/overview.md @@ -12,10 +12,10 @@ permalink: false Links stellen Verbindungen zwischen Informationen, bzw. Seiten her. {.lead} ## Wann soll die Komponente eingesetzt werden? -Wenn von einer Seite auf eine andere (interne oder externe) Seite oder auf eine Lightbox gesprungen werden muss. {.lead} +Wenn von einer Seite auf eine andere (interne oder externe) Seite oder auf eine Lightbox gesprungen werden muss. {.lead} ## Regeln * Eine visuelle Unterscheidung zwischen internen und externen Links gibt es nicht. {.lead} * Hover und On-Click haben das gleiche visuelle Interaktionsverhalten. {.lead} -* Links können auf Texte, Icons und Bilder gesetzt werden. {.lead} +* Links können auf Texte, Icons und Bilder gesetzt werden. {.lead} * Textlinks auf Teile von Wörtern sind nicht erlaubt. {.lead} \ No newline at end of file diff --git a/src/de/design-system/legacy/components/link/variants-states.md b/src/de/design-system/legacy/components/link/variants-states.md index c97b45bed..f3e3e61f5 100644 --- a/src/de/design-system/legacy/components/link/variants-states.md +++ b/src/de/design-system/legacy/components/link/variants-states.md @@ -58,7 +58,7 @@ Die Komponente hat folgende Zustände: }) }} ### Spezifikationen -Der Standard-Link ist keine eigenständige Komponente sonder ist direkt im Bereich Typografie definiert. +Der Standard-Link ist keine eigenständige Komponente sonder ist direkt im Bereich Typografie definiert. {{ specificationLinks({ figma: 'https://www.figma.com/file/BQzBsQBWB0TAIbpWMhss7P/Web-(Legacy)?node-id=13%3A7875&t=8HES1IZKZfP9aXCY-1' diff --git a/src/de/design-system/legacy/components/nbc/variants-states.md b/src/de/design-system/legacy/components/nbc/variants-states.md index f17318a60..1c81aa45e 100644 --- a/src/de/design-system/legacy/components/nbc/variants-states.md +++ b/src/de/design-system/legacy/components/nbc/variants-states.md @@ -67,7 +67,7 @@ Der Next Best Click Container hat keine Viewport übergreifenden Zustände, da s #### Sonderfall NBC-Box innerhalb eines Accordion -* Bei der Anwendung einer NBC-Box innerhalb eines Accordion wird diese nie minimiert. {.lead} +* Bei der Anwendung einer NBC-Box innerhalb eines Accordion wird diese nie minimiert. {.lead} * Es darf nur eine NBC-Box in einem Accordion eingesetzt werden. {.lead} * Beim Scrollen bleibt die NBC-Box sticky am oberen Rand bis zum Ende der Content-Area des Accordions, dannach wird die Box mit dem Content weitergescrollt. {.lead} diff --git a/src/de/design-system/legacy/components/processflow/overview.md b/src/de/design-system/legacy/components/processflow/overview.md index 65cb784dc..8a2d8eb78 100644 --- a/src/de/design-system/legacy/components/processflow/overview.md +++ b/src/de/design-system/legacy/components/processflow/overview.md @@ -15,6 +15,6 @@ Dient zur Anzeige in welchem Schritt eines Prozesses sich ein Benutzer befindet. Bei sämtlichen Prozessen bei denen ein Benutzer mehrere Schritte/Seiten durchläuft um diesen abschliessen zu können. {.lead} ## Regeln -* Der Processflow ist immer zuoberst, direkt nach dem Breadcrumb positioniert. {.lead} +* Der Processflow ist immer zuoberst, direkt nach dem Breadcrumb positioniert. {.lead} * Der Benutzer kann im Processflow auf einen bereits durchlaufenen Prozesschritt zurücknavigieren. {.lead} * Vorwärtsnavigation im Prozess ist nur durch den Call-to-Action der entsprechenden Seite erlaubt. Ein Überspringen (vorwärts) von Schritten ist nicht erlaubt. {.lead} \ No newline at end of file diff --git a/src/de/design-system/legacy/components/radiobutton/overview.md b/src/de/design-system/legacy/components/radiobutton/overview.md index f4ff9dd19..f146cb40e 100644 --- a/src/de/design-system/legacy/components/radiobutton/overview.md +++ b/src/de/design-system/legacy/components/radiobutton/overview.md @@ -23,4 +23,4 @@ Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig a * Der Text kann mehrzeilig sein. {.lead} * Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target. {.lead} * Oberhalb einer Radiobutton-Gruppe kann ein Titel eingesetzt werden. {.lead} -* Für detaillierte Erklärungen zu einer Radiobutton-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} \ No newline at end of file +* Für detaillierte Erklärungen zu einer Radiobutton-Gruppe kann neben dem Titel ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} \ No newline at end of file diff --git a/src/de/design-system/legacy/components/select/overview.md b/src/de/design-system/legacy/components/select/overview.md index 4824e592b..a1ae6e758 100644 --- a/src/de/design-system/legacy/components/select/overview.md +++ b/src/de/design-system/legacy/components/select/overview.md @@ -13,14 +13,14 @@ Dient zur Auswahl einer oder mehrerer Optionen aus einer vorgegebenen Liste. {.l ## Wann soll die Komponente eingesetzt werden? * Bei einer Auswahl aus mehreren Optionen (Einfach- oder Mehrfachauswahl) einer Liste. {.lead} -* Wenn eine Auswahl getroffen werden muss, bei der sich die Einträge gegenseitig ausschliessen und kein Defaultwert gesetzt werden soll (anders als beim Element Radiobutton). {.lead} +* Wenn eine Auswahl getroffen werden muss, bei der sich die Einträge gegenseitig ausschliessen und kein Defaultwert gesetzt werden soll (anders als beim Element Radiobutton). {.lead} * Wenn Auswahloptionen gruppiert werden sollen. {.lead} ## Regeln * Es müssen mindestens zwei Optionen zur Auswahl stehen. {.lead} * Die Komponente hat immer ein Label. {.lead} * Optionale Auswahlen werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} * Der Text des Labels ist immer einzeilig. {.lead} * Ist ein Eintrag länger als die verfügbare Breite der Komponente, wird der Text des Eintrages mit «...» abgekürzt. {.lead} * Bei einem Pflichtfeld ist eine Vorauswahl nicht erlaubt. {.lead} diff --git a/src/de/design-system/legacy/components/textarea/overview.md b/src/de/design-system/legacy/components/textarea/overview.md index 3f9bc3155..7cbf7ad4f 100644 --- a/src/de/design-system/legacy/components/textarea/overview.md +++ b/src/de/design-system/legacy/components/textarea/overview.md @@ -17,7 +17,7 @@ Wenn vom Benutzer längere Texteingaben verlangt werden. {.lead} ## Regeln * Die Textarea hat immer ein Label. {.lead} * Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} * Unten rechts wird die noch verfügbare Anzahl Zeichen angezeigt (ausser die Textarea ist disabled). {.lead} * Die Breite der Textarea entspricht immer der ganzen Formularbreite. {.lead} * Die Basishöhe kann beim Gestalten des Formulars gesetzt werden. {.lead} diff --git a/src/de/design-system/legacy/components/textfield/overview.md b/src/de/design-system/legacy/components/textfield/overview.md index 5fb29f840..0cd5dace6 100644 --- a/src/de/design-system/legacy/components/textfield/overview.md +++ b/src/de/design-system/legacy/components/textfield/overview.md @@ -17,7 +17,7 @@ Wenn vom Benutzer eine Eingabe benötigt. wird. {.lead} ## Regeln * Ein Eingabefeld hat immer ein Label. {.lead} * Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label-Text versehen. Bei kurzen Feldern darf der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann neben dem Label ein Fragezeichen im Kreis dargestellt werden. Beim Klick auf dieses Fragezeichen öffnet sich ein Tooltip. {.lead} * Der Eingabetext ist immer einzeilig. {.lead} * Wird der Text während der Eingabe länger als die Breite des Eingabefeldes wird der geschriebene Text nach links verdrängt, damit das aktuell Geschriebene immer gesehen wird. {.lead} * Nach dem Verlassen des Eingabefeldes mit einem langen Text wird dieser am Ende abgeschnitten und mit «\...» gekennzeichnet. {.lead} diff --git a/src/de/design-system/legacy/components/tooltip/overview.md b/src/de/design-system/legacy/components/tooltip/overview.md index f98ecbe3d..82f39e661 100644 --- a/src/de/design-system/legacy/components/tooltip/overview.md +++ b/src/de/design-system/legacy/components/tooltip/overview.md @@ -17,9 +17,9 @@ Bei kontextspezifischen Erklärungen zu Interaktionselementen oder Text. {.lead} ## Regeln * Der Tooltip besteht aus dem Icon und dem Overlay. → In Ausnahmefällen darf auch ein anderes Icon für den Tooltip verwendet werden (z.B. ein Info-Icon). {.lead} * Das Overlay öffnet sich bei Klick auf das Icon {.lead} -* Im Overlay dürfen nur Freitext und Links eingesetzt werden. Der Text darf auch als Liste dargestellt werden. {.lead} +* Im Overlay dürfen nur Freitext und Links eingesetzt werden. Der Text darf auch als Liste dargestellt werden. {.lead} * Der Tooltip-Text darf maximal 300 Zeichen umfassen. {.lead} -* Ein Link darf Inhalt in einer Lightbox oder auf einer neuen Seite (neuer Tab) öffnen; es darf nicht im aktuellen Browserfenster geladen werden. {.lead} +* Ein Link darf Inhalt in einer Lightbox oder auf einer neuen Seite (neuer Tab) öffnen; es darf nicht im aktuellen Browserfenster geladen werden. {.lead} * Das Overlay enthält ein 'X'-Icon zum schliessen des Overlays. {.lead} * Das Overlay kann auch wieder ausgeblendet werden, indem irgendwo neben das Overlay geklickt wird. {.lead} * Der Spickel des Overlays, der zum Icon zeigt, kann horizontal irgendwo platziert werden (kommt auf die Position des Tooltips auf der Seite an). {.lead} \ No newline at end of file diff --git a/src/de/design-system/mobile/components/container/overview.md b/src/de/design-system/mobile/components/container/overview.md index 5bc6ae534..7f77bc9ee 100644 --- a/src/de/design-system/mobile/components/container/overview.md +++ b/src/de/design-system/mobile/components/container/overview.md @@ -17,4 +17,4 @@ parent: container-mobile_de ## Regeln * Die Content-Box kann an einer beliebigen Stelle verwendet werden. {.lead} * Header-Box und Footer-Box liegen fixiert positioniert vor den anderen Inhalten. {.lead} -* Die Footer-Box schliesst oberhalb an die Tabbar an. {.lead} \ No newline at end of file +* Die Footer-Box schliesst oberhalb an die Tabbar an. {.lead} \ No newline at end of file diff --git a/src/de/design-system/mobile/components/header/overview.md b/src/de/design-system/mobile/components/header/overview.md index 988fc5766..89301ad8c 100644 --- a/src/de/design-system/mobile/components/header/overview.md +++ b/src/de/design-system/mobile/components/header/overview.md @@ -15,7 +15,7 @@ parent: header-mobile_de * Die Komponente erscheint auf jeder Seite direkt unter der Status Bar. {.lead} ## Regeln -* Der Header besteht aus Titel, Signet und optional einem Toggle oder dem Navigationsicon («Pfeil links»). {.lead} +* Der Header besteht aus Titel, Signet und optional einem Toggle oder dem Navigationsicon («Pfeil links»). {.lead} * Der «Pfeil links» navigiert zurück auf die vorhergehende Seite. {.lead} -* Der Toggle navigiert zwischen zwei oder drei Tabs. {.lead} +* Der Toggle navigiert zwischen zwei oder drei Tabs. {.lead} * Titel beschreibt den Inhalt der Funktion/Seite. {.lead} \ No newline at end of file diff --git a/src/de/design-system/mobile/components/list-view/overview.md b/src/de/design-system/mobile/components/list-view/overview.md index dee8d8e67..6c564e539 100644 --- a/src/de/design-system/mobile/components/list-view/overview.md +++ b/src/de/design-system/mobile/components/list-view/overview.md @@ -15,4 +15,4 @@ parent: list-view-mobile_de * Bei der Auflistung von mehreren, gleichartigen Elementen. {.lead} ## Regeln -* Die Liste enthält Elemente gemäss der Beschreibung unter Listen-Eintrag. {.lead} \ No newline at end of file +* Die Liste enthält Elemente gemäss der Beschreibung unter Listen-Eintrag. {.lead} \ No newline at end of file diff --git a/src/de/design-system/mobile/components/message/overview.md b/src/de/design-system/mobile/components/message/overview.md index 61e235d97..c2793f72d 100644 --- a/src/de/design-system/mobile/components/message/overview.md +++ b/src/de/design-system/mobile/components/message/overview.md @@ -17,5 +17,5 @@ parent: message-mobile_de * Beim Durchführen von länger dauernden Aktionen. {.lead} ## Regeln -* Für Fehleingaben werden Feldvalidierungen (z.B. beim text input) verwendet. +* Für Fehleingaben werden Feldvalidierungen (z.B. beim text input) verwendet. * Wird die Illustration von SBB Mitarbeitenden verwendet, wird zufällig eine Frau oder ein Mann dargestellt. diff --git a/src/de/design-system/mobile/components/textarea/overview.md b/src/de/design-system/mobile/components/textarea/overview.md index 78135de0f..16157b49b 100644 --- a/src/de/design-system/mobile/components/textarea/overview.md +++ b/src/de/design-system/mobile/components/textarea/overview.md @@ -17,7 +17,7 @@ parent: textarea-mobile_de ## Regeln * Die Textarea hat immer ein Label. {.lead} * Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label-Text versehen. Bei kurzen Feldern darf der Text «(optional)» mit «(opt.)» abgekürzt werden. {.lead} -* Für detaillierte Erklärungen kann im Eingabefeld ein Infoicon dargestellt werden. Beim Klick auf dieses Infoicon öffnet sich ein Tooltip. {.lead} +* Für detaillierte Erklärungen kann im Eingabefeld ein Infoicon dargestellt werden. Beim Klick auf dieses Infoicon öffnet sich ein Tooltip. {.lead} * Die Breite der Textarea entspricht immer der ganzen Formularbreite. {.lead} * Die Basishöhe kann beim Gestalten des Formulars gesetzt werden. {.lead} * Wird der Text länger als die Basishöhe der Textarea, verschiebt sich der bereits eingegebene Text nach oben. Die Textarea behält ihre ursprüngliche Grösse. {.lead} \ No newline at end of file diff --git a/src/en/accessibility/introduction/about-this-guide/about-this-guide.md b/src/en/accessibility/introduction/about-this-guide/about-this-guide.md index 3415c3c2d..004c67df0 100644 --- a/src/en/accessibility/introduction/about-this-guide/about-this-guide.md +++ b/src/en/accessibility/introduction/about-this-guide/about-this-guide.md @@ -12,7 +12,7 @@ Product teams wanting to consider the topic of accessibility in their project of The guide is structured using the different roles within a typical product team. These include: Product Owner, User Research, Interaction Design, Visual Design, Development, Content Design und Testing. The four most important recommendations are discussed for each of these roles. If all these points are considered, accessibility will already be at a good level. {.lead} -Often the roles of a product team overlap. For example, a developer will often also deal with static content. It is also sensible to get to know the recommendations for the other roles. {.lead} +Often the roles of a product team overlap. For example, a developer will often also deal with static content. It is also sensible to get to know the recommendations for the other roles. {.lead} This guide provides guidance on how to address the key issues of barrier-free product development. However, for a completely accessible product that can be certified as such, further steps are required. Additional documents are noted in further information. {.lead} diff --git a/src/en/design-system/getting-started/faq/items/other-stakeholders.md b/src/en/design-system/getting-started/faq/items/other-stakeholders.md index 048b6dcd8..d683915da 100644 --- a/src/en/design-system/getting-started/faq/items/other-stakeholders.md +++ b/src/en/design-system/getting-started/faq/items/other-stakeholders.md @@ -5,5 +5,5 @@ permalink: false order: 1 --- -Yes, you are welcome to join the SBB UX Community +Yes, you are welcome to join the SBB UX Community diff --git a/src/en/design-system/lean/basics/brand/brand.md b/src/en/design-system/lean/basics/brand/brand.md index fe1a4d810..906f4331b 100644 --- a/src/en/design-system/lean/basics/brand/brand.md +++ b/src/en/design-system/lean/basics/brand/brand.md @@ -14,7 +14,7 @@ order: 10 * The logo is used in all SBB applications. {.lead} ## Rules -* The logo appears exactly once per page and is always located in the header. {.lead} +* The logo appears exactly once per page and is always located in the header. {.lead} * It is always positioned top right. {.lead} * Variations of the logo are not permitted. {.lead} * The logo is not linked. {.lead} diff --git a/src/en/design-system/lean/basics/icon/icon.md b/src/en/design-system/lean/basics/icon/icon.md index 5a8c276f3..74f1af118 100644 --- a/src/en/design-system/lean/basics/icon/icon.md +++ b/src/en/design-system/lean/basics/icon/icon.md @@ -11,7 +11,7 @@ order: 30 --- ## Use -Icons are used to visually support themes and actions. Icons are used in SBB style for use in SBB applications. Details on this and a set of already available icons can be found here. {.lead} +Icons are used to visually support themes and actions. Icons are used in SBB style for use in SBB applications. Details on this and a set of already available icons can be found here. {.lead} ## Rules * The use of icons within body copy should be avoided as far as possible. {.lead} diff --git a/src/en/design-system/lean/basics/typography/typography.md b/src/en/design-system/lean/basics/typography/typography.md index 3a57444c6..31e6a7e47 100644 --- a/src/en/design-system/lean/basics/typography/typography.md +++ b/src/en/design-system/lean/basics/typography/typography.md @@ -21,7 +21,7 @@ The use of a mono-spaced font is recommended for some applications. The font req * DejaVu Sans Mono ## Style -The font styles defined here form the basis of web applications and their components. If others are used, a clear hierarchy must be ensured as well as sufficient contrast and appropriate line/paragraph spacing. The SBB colors apply to the font colors. {.lead} +The font styles defined here form the basis of web applications and their components. If others are used, a clear hierarchy must be ensured as well as sufficient contrast and appropriate line/paragraph spacing. The SBB colors apply to the font colors. {.lead} ### Heading H1 {{ imageOnGreyBackground({ @@ -30,7 +30,7 @@ The font styles defined here form the basis of web applications and their compon title: 'Heading H1' }) }} -* Before H1 (above), a divider of variant «Big» is inserted, afterwards (below) a Divider of variant «Medium». {.lead} +* Before H1 (above), a divider of variant «Big» is inserted, afterwards (below) a Divider of variant «Medium». {.lead} ### Heading H2 {{ imageOnGreyBackground({ @@ -39,7 +39,7 @@ The font styles defined here form the basis of web applications and their compon title: 'Heading H2' }) }} -* Before H2 (above), a divider of variant «Medium» is inserted, afterwards (below) a Divider of variant «Small». {.lead} +* Before H2 (above), a divider of variant «Medium» is inserted, afterwards (below) a Divider of variant «Small». {.lead} ### Heading H3 {{ imageOnGreyBackground({ @@ -48,7 +48,7 @@ The font styles defined here form the basis of web applications and their compon title: 'Heading H3' }) }} -* Before H3 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} +* Before H3 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} ### Heading H4 {{ imageOnGreyBackground({ @@ -57,7 +57,7 @@ The font styles defined here form the basis of web applications and their compon title: 'Heading H4' }) }} -* Before H4 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} +* Before H4 (above), a divider of variant «Small» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} ### Body (copy) {{ imageOnGreyBackground({ @@ -66,7 +66,7 @@ The font styles defined here form the basis of web applications and their compon title: 'Body (copy)' }) }} -* Before the copy (above), a divider of variant «Thin» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} +* Before the copy (above), a divider of variant «Thin» is inserted, afterwards (below) a Divider of variant «Thin». {.lead} ### Link {{ imageOnGreyBackground({ @@ -76,7 +76,7 @@ The font styles defined here form the basis of web applications and their compon }) }} * Is used as a standard link within texts. {.lead} -* Further information about links can be found at link. {.lead} +* Further information about links can be found at link. {.lead} ### Table header diff --git a/src/en/design-system/lean/components/autocompletion/overview.md b/src/en/design-system/lean/components/autocompletion/overview.md index 44a783dea..0ff5f411b 100644 --- a/src/en/design-system/lean/components/autocompletion/overview.md +++ b/src/en/design-system/lean/components/autocompletion/overview.md @@ -18,7 +18,7 @@ permalink: false ## Rules * The auto-completion always has a label. {.lead} * Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be shortened to ‘(opt.)’ in short fields. {.lead} -* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} +* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} * During entry three suggestions appear (usually after three symbols but this can be modified on a project-specific base). {.lead} * The listed entries can be scrolled through using arrow keys and accepted with ‘Enter’. {.lead} * A maximum of ten suggestions are shown. {.lead} diff --git a/src/en/design-system/lean/components/breadcrumb/overview.md b/src/en/design-system/lean/components/breadcrumb/overview.md index 92210ee13..f8bdf01d4 100644 --- a/src/en/design-system/lean/components/breadcrumb/overview.md +++ b/src/en/design-system/lean/components/breadcrumb/overview.md @@ -15,6 +15,6 @@ permalink: false * On any page where the user should be able to quickly navigate to the parent page. {.lead} ## Rules -* The breadcrumb is always positioned directly beneath the header. {.lead} +* The breadcrumb is always positioned directly beneath the header. {.lead} * The breadcrumb can be multi-line for long entries. {.lead} * All levels are always shown. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/button/overview.md b/src/en/design-system/lean/components/button/overview.md index 5652cef5c..abe728bd4 100644 --- a/src/en/design-system/lean/components/button/overview.md +++ b/src/en/design-system/lean/components/button/overview.md @@ -18,7 +18,7 @@ permalink: false ## Rules * Cannot be used within body copy. {.lead} -* Cannot be used in the header as navigation or a function. {.lead} +* Cannot be used in the header as navigation or a function. {.lead} * The minimum width is 60px. {.lead} * The width increases with the text length. The width is 100% for mobile views. {.lead} * If the text is still too long when the maximum length is reached, it is shortened with “...”. {.lead} diff --git a/src/en/design-system/lean/components/button/variants-states.md b/src/en/design-system/lean/components/button/variants-states.md index c3c7a2bfa..d9f29dca7 100644 --- a/src/en/design-system/lean/components/button/variants-states.md +++ b/src/en/design-system/lean/components/button/variants-states.md @@ -52,7 +52,7 @@ The component has the following states: {.lead} title: 'Icon Button' }) }} -When hovering over an icon button, a tooltip should be used to make the underlying action clearer. {.lead} +When hovering over an icon button, a tooltip should be used to make the underlying action clearer. {.lead} ### Multiple actions {{ imageOnGreyBackground({ diff --git a/src/en/design-system/lean/components/buttonbar/overview.md b/src/en/design-system/lean/components/buttonbar/overview.md index 5bde0b7d4..856d7bed6 100644 --- a/src/en/design-system/lean/components/buttonbar/overview.md +++ b/src/en/design-system/lean/components/buttonbar/overview.md @@ -18,4 +18,4 @@ permalink: false * The button bar should always be placed at the bottom right of a container (e.g. form or dialog). {.lead} * The buttons are always placed to the right within the button bar. {.lead} * The primary action is placed to the left of the secondary actions. {.lead} -* No more than three buttons may be placed. If more actions are necessary, then a contextmenu should be used. This is placed to the right of the other buttons. {.lead} +* No more than three buttons may be placed. If more actions are necessary, then a contextmenu should be used. This is placed to the right of the other buttons. {.lead} diff --git a/src/en/design-system/lean/components/checkbox/overview.md b/src/en/design-system/lean/components/checkbox/overview.md index e10cafdc0..f859835fb 100644 --- a/src/en/design-system/lean/components/checkbox/overview.md +++ b/src/en/design-system/lean/components/checkbox/overview.md @@ -22,4 +22,4 @@ permalink: false * The text can be multi-line. {.lead} * In addition to the actual checkbox, the entire text can also be used as a click target. {.lead} * A title can be used above a checkbox group. {.lead} -* A question mark in the circle can be show – in addition to the title – for detailed explanations on a checkbox group. A tooltip opens when this question mark is clicked on. {.lead} \ No newline at end of file +* A question mark in the circle can be show – in addition to the title – for detailed explanations on a checkbox group. A tooltip opens when this question mark is clicked on. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/chip/overview.md b/src/en/design-system/lean/components/chip/overview.md index 036fa00ab..fd97686a8 100644 --- a/src/en/design-system/lean/components/chip/overview.md +++ b/src/en/design-system/lean/components/chip/overview.md @@ -18,7 +18,7 @@ permalink: false ## Rules * The term in the chip is always single-line (no line breaks) and the chip itself increases in width with the text. {.lead} * If a chip is too long for the viewport because of the text, the text is shortened with “…”. {.lead} -* The input chips are shown in a textfield. This can also be multi-line depending on the number of chips and available space. {.lead} +* The input chips are shown in a textfield. This can also be multi-line depending on the number of chips and available space. {.lead} * The chips in the textfield can be deleted by using backspace. {.lead} * The chips can be generated via ‘autocomplete’ selection or with free text depending on the use case. {.lead} diff --git a/src/en/design-system/lean/components/datepicker/overview.md b/src/en/design-system/lean/components/datepicker/overview.md index d5b7d5220..1e1eb5d94 100644 --- a/src/en/design-system/lean/components/datepicker/overview.md +++ b/src/en/design-system/lean/components/datepicker/overview.md @@ -17,7 +17,7 @@ permalink: false ## Rules * Date details are always single-line. {.lead} * The date selection always has a label. {.lead} -* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when clicking on this question mark. {.lead} +* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when clicking on this question mark. {.lead} * The date can be entered by hand by clicking in the date field. {.lead} * Manual entry allows the following entries, which are automatically formatted correctly by the component (e.g. 1 January 2020): {.lead} * '010120' {.lead} diff --git a/src/en/design-system/lean/components/fieldset/overview.md b/src/en/design-system/lean/components/fieldset/overview.md index 9cf09561e..d57cd12cb 100644 --- a/src/en/design-system/lean/components/fieldset/overview.md +++ b/src/en/design-system/lean/components/fieldset/overview.md @@ -17,4 +17,4 @@ permalink: false ## Rules * A section always has a title. {.lead} * Sections can also be used as sub-grouping in other sections or also in accordions. {.lead} -* A question mark in the circle can also be shown – in addition to the title – for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the title – for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} diff --git a/src/en/design-system/lean/components/fileselector/overview.md b/src/en/design-system/lean/components/fileselector/overview.md index fb17887fd..535700f45 100644 --- a/src/en/design-system/lean/components/fileselector/overview.md +++ b/src/en/design-system/lean/components/fileselector/overview.md @@ -15,9 +15,9 @@ permalink: false * When an application requires one or more user files. {.lead} ## Rules -* The system’s file browser opens when the ‘upload file’ button is clicked. {.lead} +* The system’s file browser opens when the ‘upload file’ button is clicked. {.lead} * The uploaded files are shown in a list. {.lead} * The list is sorted in chronological order of the upload. {.lead} * An individual file can be removed from the list using the trash icon. {.lead} * The list entry contains the icon of the file type, the file name and the file type and file size in brackets. {.lead} -* The file upload always indicates above the button which file types and sizes can be uploaded. {.lead} \ No newline at end of file +* The file upload always indicates above the button which file types and sizes can be uploaded. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/filter/overview.md b/src/en/design-system/lean/components/filter/overview.md index d4e50f887..ed701714e 100644 --- a/src/en/design-system/lean/components/filter/overview.md +++ b/src/en/design-system/lean/components/filter/overview.md @@ -16,6 +16,6 @@ permalink: false ## Rules * A filter always has an indicator which shows that the filter is active and how many results are displayed in the filtered view, e.g. 100/500 entries. {.lead} -* A filter can have different components, e.g. autocomplete, checkboxes, chips, components, radiobuttons, selects (dropdowns), tags, textfields, toggle buttons. {.lead} +* A filter can have different components, e.g. autocomplete, checkboxes, chips, components, radiobuttons, selects (dropdowns), tags, textfields, toggle buttons. {.lead} * It must be possible to reset a filter with an action (e.g. button «Reset filter»). {.lead} * Several filter elements can be selected or deselected. {.lead} diff --git a/src/en/design-system/lean/components/header/overview.md b/src/en/design-system/lean/components/header/overview.md index a629d9ff7..7bded4e00 100644 --- a/src/en/design-system/lean/components/header/overview.md +++ b/src/en/design-system/lean/components/header/overview.md @@ -15,6 +15,6 @@ permalink: false * A header must be inserted in any application. {.lead} ## Rules -* The header is composed of app chooser (optional, for application groups), environment banner (except Prod), application name and version, main navigation (if necessary), search (optional), display for notifications (optional), user menu and logo. {.lead} +* The header is composed of app chooser (optional, for application groups), environment banner (except Prod), application name and version, main navigation (if necessary), search (optional), display for notifications (optional), user menu and logo. {.lead} * For Tablet, the main navigation is moved to the burgernavigation. For Mobile additionally the search, notifications and the user menu. {.lead} * The application name is truncated with "..." on mobile if it does not have enough space. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/link/overview.md b/src/en/design-system/lean/components/link/overview.md index f5b910e49..c550cff5d 100644 --- a/src/en/design-system/lean/components/link/overview.md +++ b/src/en/design-system/lean/components/link/overview.md @@ -17,5 +17,5 @@ permalink: false ## Rules * There is no visual differentiation between internal and external links. {.lead} * Hover and on-click have the same visual interaction behaviour. {.lead} -* Links can be created in text and icons. {.lead} +* Links can be created in text and icons. {.lead} * Text links in parts of words are not permitted. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/menuitem/overview.md b/src/en/design-system/lean/components/menuitem/overview.md index 405edea19..f25f97ad9 100644 --- a/src/en/design-system/lean/components/menuitem/overview.md +++ b/src/en/design-system/lean/components/menuitem/overview.md @@ -12,7 +12,7 @@ permalink: false * Provides a menu item for use in different components. {.lead} ## When should the component be used? -In menus, e.g. in the header in the variant «Suite» or the sidebar. {.lead} +In menus, e.g. in the header in the variant «Suite» or the sidebar. {.lead} ## Rules * Icons can optionally be inserted before the text to make navigation clearer. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/processflow/overview.md b/src/en/design-system/lean/components/processflow/overview.md index 0bca99d95..6b6590e7f 100644 --- a/src/en/design-system/lean/components/processflow/overview.md +++ b/src/en/design-system/lean/components/processflow/overview.md @@ -15,6 +15,6 @@ permalink: false * In all processes where a user has to go through several steps/pages to complete them. {.lead} ## Rules -* The process flow is always at the top, positioned directly after the breadcrumb. {.lead} +* The process flow is always at the top, positioned directly after the breadcrumb. {.lead} * The user can navigate back to a process step already passed through in the process flow. {.lead} * Forward navigation in the process is only permitted through the call-to-action of the page concerned. Skipping (forward) of steps is not permitted. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/radiobutton/overview.md b/src/en/design-system/lean/components/radiobutton/overview.md index 467a0a547..8cb2c0549 100644 --- a/src/en/design-system/lean/components/radiobutton/overview.md +++ b/src/en/design-system/lean/components/radiobutton/overview.md @@ -22,4 +22,4 @@ permalink: false * The text can be multi-line. {.lead} * In addition to the actual radio button, the entire text can also be used as a click target. {.lead} * A title can be used above a radio button group. {.lead} -* A question mark in the circle can also be shown – in addition to the title – for detailed explanations on a radio button group. A tooltip opens if this question mark is clicked on. {.lead} \ No newline at end of file +* A question mark in the circle can also be shown – in addition to the title – for detailed explanations on a radio button group. A tooltip opens if this question mark is clicked on. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/select/overview.md b/src/en/design-system/lean/components/select/overview.md index d6bcd4411..ee6dd3a8f 100644 --- a/src/en/design-system/lean/components/select/overview.md +++ b/src/en/design-system/lean/components/select/overview.md @@ -13,13 +13,13 @@ permalink: false ## When should the component be used? * For the selection of several options (selection of single or multiple options) from a list. {.lead} -* If a selection must be made where the entries mutually exclude one another and no default value is to be set (in contrast to the radiobutton element). {.lead} +* If a selection must be made where the entries mutually exclude one another and no default value is to be set (in contrast to the radiobutton element). {.lead} * When selection options are to be grouped. {.lead} ## Rules * There must be a choice of at least two options. {.lead} * The component always has a label. {.lead} -* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The text in the select component is always single-line. {.lead} * If an entry is longer than the available width of the component, the entry’s text is abbreviated with ‘…’. {.lead} * A pre-selection is not permitted with a mandatory field. {.lead} diff --git a/src/en/design-system/lean/components/sidebar/variants-states.md b/src/en/design-system/lean/components/sidebar/variants-states.md index ca824a123..e443693c4 100644 --- a/src/en/design-system/lean/components/sidebar/variants-states.md +++ b/src/en/design-system/lean/components/sidebar/variants-states.md @@ -21,7 +21,7 @@ This variant has following states: {.lead} }) }} * The menu items can be divided into categories / areas. {.lead} -* For the categories you can choose between accordion and fieldset when using the sidebar. {.lead} +* For the categories you can choose between accordion and fieldset when using the sidebar. {.lead} ### Icon bar This variant has following states: {.lead} @@ -53,7 +53,7 @@ This variant has following states: {.lead} * The default state (collapsed, expanded) can be defined per application. {.lead} * The menu items can be divided into categories / areas. {.lead} -* For the categories you can choose between accordion and fieldset when using the sidebar. {.lead} +* For the categories you can choose between accordion and fieldset when using the sidebar. {.lead} ## Specifications {{ specificationLinks({ diff --git a/src/en/design-system/lean/components/status/overview.md b/src/en/design-system/lean/components/status/overview.md index f3dc40f5b..a3eb96d42 100644 --- a/src/en/design-system/lean/components/status/overview.md +++ b/src/en/design-system/lean/components/status/overview.md @@ -15,4 +15,4 @@ permalink: false * When the status of an object has to be shown permanently and prominently. {.lead} ## Rules -* The images below show examples of states. The states are defined specifically for each application and the colors and icons are therefore also selected appropriately. {.lead} +* The images below show examples of states. The states are defined specifically for each application and the colors and icons are therefore also selected appropriately. {.lead} diff --git a/src/en/design-system/lean/components/tab/overview.md b/src/en/design-system/lean/components/tab/overview.md index a0c75dedc..64fe3f011 100644 --- a/src/en/design-system/lean/components/tab/overview.md +++ b/src/en/design-system/lean/components/tab/overview.md @@ -19,5 +19,5 @@ permalink: false * The first tab is always selected by default. {.lead} * The tab names are always single-line. {.lead} * The tab name should be as simple and concise as possible so that the themes can be quickly understood. {.lead} -* If the tab is too long for the viewport, the width is shortened and the names are shortened with “…”. When hovering over the tab, the complete name appears in a tooltip. {.lead} +* If the tab is too long for the viewport, the width is shortened and the names are shortened with “…”. When hovering over the tab, the complete name appears in a tooltip. {.lead} * Another tab component is not permitted within a tab (tab-in-tab). {.lead} diff --git a/src/en/design-system/lean/components/table/overview.md b/src/en/design-system/lean/components/table/overview.md index 5a579d48c..c30d0bf97 100644 --- a/src/en/design-system/lean/components/table/overview.md +++ b/src/en/design-system/lean/components/table/overview.md @@ -23,5 +23,5 @@ permalink: false * Units of measurement in content are ideally entered on the second line of the column header. Alternatively, they can appear directly next to the column header name in round brackets. {.lead} * Horizontal scrolling should be avoided as far as possible. {.lead} * Columns can be put into logical groups. There is no dividing line between grouped columns. {.lead} -* Large amounts of data can be divided up using pagination. Alternatively, infinite scrolling can be used if required. {.lead} +* Large amounts of data can be divided up using pagination. Alternatively, infinite scrolling can be used if required. {.lead} * Keyboard operation: between the lines can be navigated using the arrow keys (up, down). {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/table/variants-states.md b/src/en/design-system/lean/components/table/variants-states.md index 4c0041be1..330bd40cb 100644 --- a/src/en/design-system/lean/components/table/variants-states.md +++ b/src/en/design-system/lean/components/table/variants-states.md @@ -64,8 +64,8 @@ This variant has the following states: {.lead} title: 'table, filterable' }) }} -* The individual columns can be filtered according to content type (text, date, value, etc.) using the appropriate components (Textfield, Datepicker, Select, etc.). {.lead} -* A separate Filter can also be used to restrict large amounts of data. {.lead} +* The individual columns can be filtered according to content type (text, date, value, etc.) using the appropriate components (Textfield, Datepicker, Select, etc.). {.lead} +* A separate Filter can also be used to restrict large amounts of data. {.lead} * It is advisable to display the number of filtered items to the users, e.g. "34 out of 3890". {.lead} ### Inline actions @@ -76,8 +76,8 @@ This variant has the following states: {.lead} }) }} * When hovering over rows or focusing them using tab navigation via the keyboard, actions can be offered on the elements. {.lead} -* The actions are offered by using icon button. Depending on the use case, it is decided in which column (first or last column) they are placed. There they overlay the existing content. {.lead} -* A maximum of 3 actions should be offered. If more are needed, a contextmenu should be used. {.lead} +* The actions are offered by using icon button. Depending on the use case, it is decided in which column (first or last column) they are placed. There they overlay the existing content. {.lead} +* A maximum of 3 actions should be offered. If more are needed, a contextmenu should be used. {.lead} * Keyboard operation: if the focus is on a row in the table, it's possible to navigate to the actions using 'Tab'-key of the keyboard. {.lead} ### Batch actions @@ -88,9 +88,9 @@ This variant has the following states: {.lead} }) }} * Batch actions can be offered on selection of (multiple) elements. {.lead} -* All versions of buttons can be used for the actions. {.lead} +* All versions of buttons can be used for the actions. {.lead} * The primary action is on the left, the secondary actions are on the right. {.lead} -* A maximum of 3 actions should be offered. If more are needed, a contextmenu should be used. {.lead} +* A maximum of 3 actions should be offered. If more are needed, a contextmenu should be used. {.lead} * The batch actions are placed above the table on the right. {.lead} ## Example application diff --git a/src/en/design-system/lean/components/textarea/overview.md b/src/en/design-system/lean/components/textarea/overview.md index e945eae98..8fc1f2c23 100644 --- a/src/en/design-system/lean/components/textarea/overview.md +++ b/src/en/design-system/lean/components/textarea/overview.md @@ -16,7 +16,7 @@ permalink: false ## Rules * The text area always has a label. {.lead} -* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The number of characters still available is shown bottom right (outside the text area is disabled). {.lead} * The basic height can be set when designing the form. {.lead} * If the text is longer than the basic height of the text area, the element increases in height with the content. {.lead} \ No newline at end of file diff --git a/src/en/design-system/lean/components/textexpand/overview.md b/src/en/design-system/lean/components/textexpand/overview.md index 7269a851b..db1e59673 100644 --- a/src/en/design-system/lean/components/textexpand/overview.md +++ b/src/en/design-system/lean/components/textexpand/overview.md @@ -16,7 +16,7 @@ permalink: false ## Rules * The text expand can only be used for texts. {.lead} -* Apart from the link ‘show less’, no further interaction elements can be used when expanded. {.lead} +* Apart from the link ‘show less’, no further interaction elements can be used when expanded. {.lead} * The separation of the texts must ensure that the context of all the information is clear when expanded. {.lead} * Can only be used in multi-line texts. {.lead} * Multiple complex structures are not permitted. {.lead} diff --git a/src/en/design-system/lean/components/textfield/overview.md b/src/en/design-system/lean/components/textfield/overview.md index 29c6598da..48d3cee55 100644 --- a/src/en/design-system/lean/components/textfield/overview.md +++ b/src/en/design-system/lean/components/textfield/overview.md @@ -16,7 +16,7 @@ permalink: false ## Rules * An entry field always has a label. {.lead} -* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The entry text is always single-line. {.lead} * If the text becomes longer than the width of the entry field during the entry, the text entered is pushed to the left so that what is currently being written can always be seen. {.lead} * After leaving the entry field with a long text, this is cut off at the end and designated with “…”. {.lead} diff --git a/src/en/design-system/lean/components/tooltip/overview.md b/src/en/design-system/lean/components/tooltip/overview.md index 06078ef4f..b113c79bf 100644 --- a/src/en/design-system/lean/components/tooltip/overview.md +++ b/src/en/design-system/lean/components/tooltip/overview.md @@ -18,7 +18,7 @@ permalink: false * The tooltip consists of an icon and the overlay. The info-icon is standard and can be replaced by another icon if required. {.lead} * The tooltip can also be positioned/made accessible on texts or images. {.lead} * The overlay opens when the icon is clicked on. Alternatively the tooltip could be opened on hover. {.lead} -* Only free text and links can be used in the overlay. The text can also be displayed as a list. {.lead} +* Only free text and links can be used in the overlay. The text can also be displayed as a list. {.lead} * The tooltip text can have a maximum of 300 characters. {.lead} * The overlay can contain an ‘X’ icon to close the overlay. {.lead} * The overlay can also be hidden again by clicking anywhere next to the overlay. {.lead} diff --git a/src/en/design-system/legacy/basics/images/images.md b/src/en/design-system/legacy/basics/images/images.md index 32ae2c08a..c3ef5de84 100644 --- a/src/en/design-system/legacy/basics/images/images.md +++ b/src/en/design-system/legacy/basics/images/images.md @@ -37,7 +37,7 @@ The following styles are distinguished for images: {.lead} * Pictures and videos are always treated equally. {.lead} * Key visuals never have captions or copyright information. {.lead} * Key visuals have a fixed format for each end device, the image section adapts to the viewport. {.lead} -* Key visuals can be implemented as mediaslider. {.lead} +* Key visuals can be implemented as mediaslider. {.lead} * No description text is allowed. {.lead} ### Formats diff --git a/src/en/design-system/legacy/basics/typography/typography.md b/src/en/design-system/legacy/basics/typography/typography.md index c83259451..651c77202 100644 --- a/src/en/design-system/legacy/basics/typography/typography.md +++ b/src/en/design-system/legacy/basics/typography/typography.md @@ -80,7 +80,7 @@ The font styles defined here form the base of web applications and their compone }) }} * Is used as a standard link within texts. {.lead} -* Further information about links can be found at link. {.lead} +* Further information about links can be found at link. {.lead} ### Subtext {{ imageOnGreyBackground({ @@ -96,7 +96,7 @@ The font styles defined here form the base of web applications and their compone title: 'Table header' }) }} -* The definition of the table as a component can be found under table. {.lead} +* The definition of the table as a component can be found under table. {.lead} ### Table data @@ -106,7 +106,7 @@ The font styles defined here form the base of web applications and their compone title: 'Table data' }) }} -* The definition of the table as a component can be found under table. {.lead} +* The definition of the table as a component can be found under table. {.lead} ### Structured list {{ imageOnGreyBackground({ diff --git a/src/en/design-system/legacy/components/autocompletion/overview.md b/src/en/design-system/legacy/components/autocompletion/overview.md index ab52ad8e0..1f71ef4a6 100644 --- a/src/en/design-system/legacy/components/autocompletion/overview.md +++ b/src/en/design-system/legacy/components/autocompletion/overview.md @@ -18,7 +18,7 @@ It supports the user when entering suggestions. {.lead} ## Rules * Autocompletion always has a label. {.lead} * Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be abbreviated as ‘(opt.)’ in short fields. {.lead} -* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens if this question mark is clicked on. {.lead} * During entry, suggestions appear directly (usually after three symbols but they can be modified on a project-specific base). {.lead} * The entries listed can be scrolled through using the arrow keys and accepted with Enter. {.lead} * A maximum of ten suggestions are shown. {.lead} diff --git a/src/en/design-system/legacy/components/breadcrumb/overview.md b/src/en/design-system/legacy/components/breadcrumb/overview.md index 90c24d163..0e2b01b22 100644 --- a/src/en/design-system/legacy/components/breadcrumb/overview.md +++ b/src/en/design-system/legacy/components/breadcrumb/overview.md @@ -15,7 +15,7 @@ It is used to display the navigation hierarchy of the current page. {.lead} On every page where the user should be able to navigate quickly to a sister or parent page. {.lead} ## Rules -* The breadcrumb is always positioned directly beneath the header. The exception is when a ghettobox is shown, then the breadcrumb follows immediately after the last ghettobox. {.lead} +* The breadcrumb is always positioned directly beneath the header. The exception is when a ghettobox is shown, then the breadcrumb follows immediately after the last ghettobox. {.lead} * The breadcrumb can be multi-line for long entries. {.lead} * All levels are always shown on the desktop and tablet. {.lead} * Only the last levels are written out on the mobile. Preceding levels are shown on a single one with ‘…’. All intermediate levels are show if ‘…’ is clicked on. {.lead} diff --git a/src/en/design-system/legacy/components/button/overview.md b/src/en/design-system/legacy/components/button/overview.md index f53915216..fd0845bba 100644 --- a/src/en/design-system/legacy/components/button/overview.md +++ b/src/en/design-system/legacy/components/button/overview.md @@ -20,7 +20,7 @@ It triggers an action on a page. {.lead} * It cannot be used within body copy. {.lead} * Cannot be used in the header as navigation or a function. {.lead} * The minimum width is 60px, the maximum width is 400px. {.lead} -* The width increases with the text length. When used in the next best click (NBC) or in mobile views, the width is 100%. {.lead} +* The width increases with the text length. When used in the next best click (NBC) or in mobile views, the width is 100%. {.lead} * If the text is still too long when the maximum length is reached, it is shortened with “...”. {.lead} * The text is always single-line. {.lead} * In exceptional cases, the arrow icon can be replaced with a different, suitable icon. {.lead} diff --git a/src/en/design-system/legacy/components/checkbox/overview.md b/src/en/design-system/legacy/components/checkbox/overview.md index e96e91204..83e998d8a 100644 --- a/src/en/design-system/legacy/components/checkbox/overview.md +++ b/src/en/design-system/legacy/components/checkbox/overview.md @@ -24,4 +24,4 @@ permalink: false * The text can be multi-line. {.lead} * In addition to the actual checkbox, the entire text can also be used as a click target. {.lead} * A title can be inserted above a checkbox group. {.lead} -* A question mark in the circle can also be shown – in addition to the title – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} \ No newline at end of file +* A question mark in the circle can also be shown – in addition to the title – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} \ No newline at end of file diff --git a/src/en/design-system/legacy/components/datepicker/overview.md b/src/en/design-system/legacy/components/datepicker/overview.md index 3c5ab5669..617a9a76c 100644 --- a/src/en/design-system/legacy/components/datepicker/overview.md +++ b/src/en/design-system/legacy/components/datepicker/overview.md @@ -18,7 +18,7 @@ Whenever a date value is required from the user. {.lead} * Date information is always single-line. {.lead} * The date selection always has a label. {.lead} * Optional date entries include the text ‘(optional)’ behind the label. The text ‘(optional)’ can be abbreviated as ‘(opt.)’ in short fields. {.lead} -* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle can also be shown – in addition to the label – for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The date can be entered manually by clicking on the date field. The digit entry keypad of the system concerned appears on touch devices. {.lead} * The point must always be entered by the user with manual entry. The element then takes over the correct formatting, i.e. entries like 1.1.18 must be accepted and put into the required format. {.lead} * A calendar layer for the selection of the date opens when the calendar icon is clicked on. This is closed again by clicking outside of the calendar layer. {.lead} diff --git a/src/en/design-system/legacy/components/dialog/overview.md b/src/en/design-system/legacy/components/dialog/overview.md index bf5479eb0..a79b08334 100644 --- a/src/en/design-system/legacy/components/dialog/overview.md +++ b/src/en/design-system/legacy/components/dialog/overview.md @@ -12,7 +12,7 @@ permalink: false It is used to display detailed information of a content page. {.lead} ## When should the component be used? -* If detailed or additional information has to be shown on-demand on part of a page (for example, additional support when the tooltip is not sufficient). {.lead} +* If detailed or additional information has to be shown on-demand on part of a page (for example, additional support when the tooltip is not sufficient). {.lead} * To display the editing mode on forms. {.lead} * For an enlarged view of images. {.lead} diff --git a/src/en/design-system/legacy/components/fileselector/overview.md b/src/en/design-system/legacy/components/fileselector/overview.md index 093517cd6..7b85a7049 100644 --- a/src/en/design-system/legacy/components/fileselector/overview.md +++ b/src/en/design-system/legacy/components/fileselector/overview.md @@ -15,9 +15,9 @@ It is used for uploading files. {.lead} When an application requires one or more files from a user. {.lead} ## Rules -* Clicking on the ‘upload file’ button opens the system’s file browser. {.lead} +* Clicking on the ‘upload file’ button opens the system’s file browser. {.lead} * The uploaded files are displayed in a list. {.lead} * The list is sorted according to the chronological order of the upload. {.lead} * An individual file can be removed from the list using the trash icon. {.lead} * The list entry contains the icon of the file type, the file name and the file type and file size in brackets. {.lead} -* The file upload always indicates above the button which file types and sizes can be uploaded. {.lead} \ No newline at end of file +* The file upload always indicates above the button which file types and sizes can be uploaded. {.lead} \ No newline at end of file diff --git a/src/en/design-system/legacy/components/ghettobox/variants-states.md b/src/en/design-system/legacy/components/ghettobox/variants-states.md index 7ebe48023..e3c8c6285 100644 --- a/src/en/design-system/legacy/components/ghettobox/variants-states.md +++ b/src/en/design-system/legacy/components/ghettobox/variants-states.md @@ -27,7 +27,7 @@ This variant has the following states: {.lead} title: 'Ghettobox with link' }) }} -* If the text contains another link, the ghettobox distinguishes between the statuses of normal and hover. {.lead} +* If the text contains another link, the ghettobox distinguishes between the statuses of normal and hover. {.lead} * There is always an arrow icon at the end of the text. {.lead} * The entire area of the ghettobox can be clicked on and opens the link inserted (except above the X-icon). {.lead} diff --git a/src/en/design-system/legacy/components/link/overview.md b/src/en/design-system/legacy/components/link/overview.md index 50805997c..a8d462832 100644 --- a/src/en/design-system/legacy/components/link/overview.md +++ b/src/en/design-system/legacy/components/link/overview.md @@ -12,10 +12,10 @@ permalink: false Links create connections between information or pages. {.lead} ## When should the component be used? -When jumping from one page to another (internal or external) or to a lightbox. {.lead} +When jumping from one page to another (internal or external) or to a lightbox. {.lead} ## Rules * There is no visual distinction between internal and external links. {.lead} * Hover and on-click have the same visual interaction behaviour. {.lead} -* Links can be created in texts, icons and images. {.lead} +* Links can be created in texts, icons and images. {.lead} * Text links in parts of words are not allowed. {.lead} \ No newline at end of file diff --git a/src/en/design-system/legacy/components/link/variants-states.md b/src/en/design-system/legacy/components/link/variants-states.md index 2ffb78435..ae3d4b94d 100644 --- a/src/en/design-system/legacy/components/link/variants-states.md +++ b/src/en/design-system/legacy/components/link/variants-states.md @@ -57,7 +57,7 @@ The component has the following states: {.lead} }) }} ### Specification -The standard link is not an independent component but is instead defined directly in the typography area. {.lead} +The standard link is not an independent component but is instead defined directly in the typography area. {.lead} {{ specificationLinks({ figma: 'https://www.figma.com/file/BQzBsQBWB0TAIbpWMhss7P/Web-(Legacy)?node-id=13%3A7875&t=8HES1IZKZfP9aXCY-1' diff --git a/src/en/design-system/legacy/components/nbc/variants-states.md b/src/en/design-system/legacy/components/nbc/variants-states.md index f16053fa9..a451a8951 100644 --- a/src/en/design-system/legacy/components/nbc/variants-states.md +++ b/src/en/design-system/legacy/components/nbc/variants-states.md @@ -65,7 +65,7 @@ The Next Best Click container does not have any cross-viewport states as they be }) }} #### Special case: NBC box within an accordion -* A NBC box is never minimised when used within an accordion. +* A NBC box is never minimised when used within an accordion. * Only one NBC box can be inserted into an accordion. * When scrolling, the NBC box remains sticky on the top edge to the end of the content area of the accordion, after which the box continues to be scrolled with the content. diff --git a/src/en/design-system/legacy/components/processflow/overview.md b/src/en/design-system/legacy/components/processflow/overview.md index 891756ab5..d9c03122b 100644 --- a/src/en/design-system/legacy/components/processflow/overview.md +++ b/src/en/design-system/legacy/components/processflow/overview.md @@ -15,6 +15,6 @@ permalink: false * In all processes where a user has to go through several steps/pages to complete them. {.lead} ## Rules -* The process flow is always positioned at the top immediately after the breadcrumb. {.lead} +* The process flow is always positioned at the top immediately after the breadcrumb. {.lead} * The user can navigate back to a process step already passed through. {.lead} * Forward navigation in the process is only permitted by the call-to-action of the page concerned. Skipping steps (forward) is not permitted. {.lead} \ No newline at end of file diff --git a/src/en/design-system/legacy/components/radiobutton/overview.md b/src/en/design-system/legacy/components/radiobutton/overview.md index 5899782e2..32dc2cd28 100644 --- a/src/en/design-system/legacy/components/radiobutton/overview.md +++ b/src/en/design-system/legacy/components/radiobutton/overview.md @@ -23,4 +23,4 @@ permalink: false * The text can be multi-line. {.lead} * In addition to the actual radiobutton, the entire text can also be used as a click target. {.lead} * A title can be used above a radiobutton group. {.lead} -* A question mark in the circle – in addition to the title – can also be shown for detailed explanations on a radiobutton group. A tooltip opens if the question mark is clicked on. {.lead} \ No newline at end of file +* A question mark in the circle – in addition to the title – can also be shown for detailed explanations on a radiobutton group. A tooltip opens if the question mark is clicked on. {.lead} \ No newline at end of file diff --git a/src/en/design-system/legacy/components/select/overview.md b/src/en/design-system/legacy/components/select/overview.md index f8bc50333..b3709a4c8 100644 --- a/src/en/design-system/legacy/components/select/overview.md +++ b/src/en/design-system/legacy/components/select/overview.md @@ -13,14 +13,14 @@ It is used for the selection of one or more options from a pre-defined list. {.l ## When should the component be used? * When selecting from several options (single or multiple choice) in a list. {.lead} -* If a selection must be made where the entries mutually exclude one another and no default value is to be set (in contrast to the radiobutton element). {.lead} +* If a selection must be made where the entries mutually exclude one another and no default value is to be set (in contrast to the radiobutton element). {.lead} * When selection options are to be grouped. {.lead} ## Rules * There must be at least two options available. {.lead} * The element always has a label. {.lead} * Optional selections include the text ‘(optional)’ behind the label. The text ‘(optional)’ can be abbreviated to ‘(opt.)’ in short fields. {.lead} -* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The text in the select element is always single-line. {.lead} * If an entry is longer than the available width of the element, the entry’s text is abbreviated with ‘…’. {.lead} * A pre-selection is not permitted with a mandatory field. {.lead} diff --git a/src/en/design-system/legacy/components/textarea/overview.md b/src/en/design-system/legacy/components/textarea/overview.md index 464418220..594f2bac2 100644 --- a/src/en/design-system/legacy/components/textarea/overview.md +++ b/src/en/design-system/legacy/components/textarea/overview.md @@ -17,7 +17,7 @@ When the entry of longer text is required from the user. {.lead} ## Rules * The textarea always has a label. {.lead} * Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be shortened to ‘(opt.)’ for short fields. {.lead} -* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The number of characters still available is shown bottom right (outside the text area is disabled). {.lead} * The width of the text area is always the same as the entire width of the form. {.lead} * The basic height can be set when designing the form. {.lead} diff --git a/src/en/design-system/legacy/components/textfield/overview.md b/src/en/design-system/legacy/components/textfield/overview.md index f34aef9c5..c64744607 100644 --- a/src/en/design-system/legacy/components/textfield/overview.md +++ b/src/en/design-system/legacy/components/textfield/overview.md @@ -17,7 +17,7 @@ When an entry is required from the user. {.lead} ## Rules * An entry field always has a label. {.lead} * Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be shortened to ‘(opt.)’ for short fields. {.lead} -* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} +* A question mark in the circle – in addition to the label – can be used for detailed explanations. A tooltip opens when this question mark is clicked on. {.lead} * The entry text is always single-line. {.lead} * If the text becomes longer than the width of the entry field during the entry, the text entered is pushed to the left so that what is currently being written can always be seen. {.lead} * After leaving the entry field with a long text, this is cut off at the end and designated with “…”. {.lead} diff --git a/src/en/design-system/legacy/components/tooltip/overview.md b/src/en/design-system/legacy/components/tooltip/overview.md index 80be10d73..e680110ac 100644 --- a/src/en/design-system/legacy/components/tooltip/overview.md +++ b/src/en/design-system/legacy/components/tooltip/overview.md @@ -17,9 +17,9 @@ For context-specific explanations on interaction elements or text. {.lead} ## Rules * The tooltip consists of an icon and the overlay → in exceptional circumstances, another icon can be used for the tooltip (e.g. info icon). {.lead} * The overlay opens when the ??? is clicked on. {.lead} -* Only free text and links may be used in the overlay. The text may also be displayed as a list. {.lead} +* Only free text and links may be used in the overlay. The text may also be displayed as a list. {.lead} * The tooltip text can have a maximum of 300 characters. {.lead} -* A link may open content in a lightbox or on a new page (new tab). It cannot be loaded in the current browser window. {.lead} +* A link may open content in a lightbox or on a new page (new tab). It cannot be loaded in the current browser window. {.lead} * The overlay contains a ??? to close the overlay. {.lead} * The overlay can also be hidden again by clicking anywhere next to the overlay. {.lead} * The pointer of the overlay, which points to the icon, can be positioned anywhere horizontally (depends on the position of the tooltip on the page). {.lead} \ No newline at end of file diff --git a/src/en/design-system/mobile/components/container/overview.md b/src/en/design-system/mobile/components/container/overview.md index eb711bcab..4b483f824 100644 --- a/src/en/design-system/mobile/components/container/overview.md +++ b/src/en/design-system/mobile/components/container/overview.md @@ -17,4 +17,4 @@ parent: container-mobile_en ## Rules * The content box can be used anywhere. {.lead} * Header-Box and Footer-Box are fixed in front of the other content. {.lead} -* The footer box adjoins the tabbar at the top. {.lead} \ No newline at end of file +* The footer box adjoins the tabbar at the top. {.lead} \ No newline at end of file diff --git a/src/en/design-system/mobile/components/header/overview.md b/src/en/design-system/mobile/components/header/overview.md index 302dbf296..8da82f80c 100644 --- a/src/en/design-system/mobile/components/header/overview.md +++ b/src/en/design-system/mobile/components/header/overview.md @@ -15,7 +15,7 @@ parent: header-mobile_en * The component appears on every page directly beneath the status bar. {.lead} ## Rules -* The header consists of title, signet and optionally a toggle or the navigation icon ("left arrow"). {.lead} +* The header consists of title, signet and optionally a toggle or the navigation icon ("left arrow"). {.lead} * The "left arrow" navigates back to the previous page. {.lead} -* The toggle navigates between two or three tabs. {.lead} +* The toggle navigates between two or three tabs. {.lead} * Title describes the content of the function/page. {.lead} \ No newline at end of file diff --git a/src/en/design-system/mobile/components/list-view/overview.md b/src/en/design-system/mobile/components/list-view/overview.md index 0647ce09c..75616dcfb 100644 --- a/src/en/design-system/mobile/components/list-view/overview.md +++ b/src/en/design-system/mobile/components/list-view/overview.md @@ -15,4 +15,4 @@ parent: list-view-mobile_en * For listing several elements of the same kind. {.lead} ## Rules -* The list contains elements as per the description under list item. {.lead} \ No newline at end of file +* The list contains elements as per the description under list item. {.lead} \ No newline at end of file diff --git a/src/en/design-system/mobile/components/message/overview.md b/src/en/design-system/mobile/components/message/overview.md index 303e15fb3..d9d1b3ce8 100644 --- a/src/en/design-system/mobile/components/message/overview.md +++ b/src/en/design-system/mobile/components/message/overview.md @@ -17,5 +17,5 @@ parent: message-mobile_en * When carrying out longer-lasting actions. {.lead} ## Rules -* Field validations (e.g. for the text input) are used for incorrect entries. +* Field validations (e.g. for the text input) are used for incorrect entries. * If the illustration is used by SBB employees, a woman or a man is shown at random. diff --git a/src/fr/accessibility/introduction/about-this-guide/about-this-guide.md b/src/fr/accessibility/introduction/about-this-guide/about-this-guide.md index af0199ca6..99faa1e4f 100644 --- a/src/fr/accessibility/introduction/about-this-guide/about-this-guide.md +++ b/src/fr/accessibility/introduction/about-this-guide/about-this-guide.md @@ -12,7 +12,7 @@ Les équipes de produit qui souhaitent intégrer l’accessibilité à leur proj Le guide est structuré selon les différents rôles d’une équipe produit type. Il s’agit notamment des rôles suivants: Product Owner, User Research, Interaction Design, Visual Design, Development, Content Design und Testing. Quatre recommandations essentielles ont été définies pour chacun de ces différents rôles. Si tous ces points sont pris en compte, l’accessibilité aura déjà atteint un bon niveau. {.lead} -Les rôles d’une équipe de produit se chevauchent souvent. Un développeur par exemple peut être amené à gérer du contentu statique. Il est donc utile de se familiariser avec les recommandations relatives aux autres rôles. {.lead} +Les rôles d’une équipe de produit se chevauchent souvent. Un développeur par exemple peut être amené à gérer du contentu statique. Il est donc utile de se familiariser avec les recommandations relatives aux autres rôles. {.lead} Ce guide explique comment aborder les points clés du développement de produits sans obstacles. Des démarches supplémentaires seront nécessaires pour pouvoir proposer un produit entièrement accessible et certifié en conséquence. Les documents requis pour ce faire sont indiqués dans les informations complémentaires. {.lead} diff --git a/src/it/accessibility/introduction/about-this-guide/about-this-guide.md b/src/it/accessibility/introduction/about-this-guide/about-this-guide.md index 5ccb8c221..86ba0e8fd 100644 --- a/src/it/accessibility/introduction/about-this-guide/about-this-guide.md +++ b/src/it/accessibility/introduction/about-this-guide/about-this-guide.md @@ -12,7 +12,7 @@ I team di prodotto che devono tenere conto dell’accessibilità nel loro proget Il documento è strutturato in base ai ruoli di un tipico team di prodotto. Tra questi rientrano: Product Owner, User Research, Interaction Design, Visual Design, Development, Content Design und Testing. Per ciascuno dei ruoli sono indicate le quattro raccomandazioni principali. Se tutti i punti menzionati sono rispettati, l’accessibilità è già a buon punto. {.lead} -Spesso i ruoli all’interno di un team di prodotto si sovrappongono. A una sviluppatrice o uno sviluppatore per esempio, capiterà frequentemente di dover inserire anche contenuti statici, per cui è bene conoscere anche le raccomandazioni pertinenti agli altri ruoli. {.lead} +Spesso i ruoli all’interno di un team di prodotto si sovrappongono. A una sviluppatrice o uno sviluppatore per esempio, capiterà frequentemente di dover inserire anche contenuti statici, per cui è bene conoscere anche le raccomandazioni pertinenti agli altri ruoli. {.lead} Inoltre, è importante precisare che anche se le raccomandazioni coprono effettivamente buona parte dei criteri di accessibilità, per realizzare un prodotto che sia accessibile al 100% e possa di conseguenza ottenere la certificazione bisogna rispettare ulteriori passaggi. I documenti necessari a tal fine sono riportati nella sezione ulteriori informazioni. {.lead}