Styleguide Web Kanton Aargau

Komponenten

Mit diesen Komponenten erstellen wir ansprechende Inhalte und Anwendungen

• Akkordeon Core

  Akkordeon-Elemente (auf-/zuklappbare Textblöcke) in verschiedenen Konfigurationen

• Aktionen Core

  Aktions-Element zur Steuerung/Ausrichtung von Links/Buttons

• App Integration Core

  Liest das manifest.json einer React App und lädt die darin vorgesehen Ressourcen

• Articlemeta Core

  Metadaten und Optionen zu einem Artikel

• Autor:innen

  Info zeigt den/die Autoren/Autorinnen eines Artikels an

• Backlink Core

  Backlink / Kontextlink

• Bild Core

  Bilder in verschiedenen Konfigurationen

• Bildvergleich Core

  Ein Slider lässt zwei übereinander liegende Bilder vergleichen

• Bilder Slider Core

  Bilder in Slidern

• Bildermosaik Core

  Ein Mosaik von Bildern

• Bildergallerie

  Bildergallerie

• Bildergallerie - Bilddetails

  Detailseite für einzelne Bilder in der Gallerie

• Box Core

  Boxen werden eingesetzt, um Inhalte zu gruppieren. Beispielsweise eine Reihe von Links zu rechtlichen Hintergründen. Boxen können ebenfalls als Warn-, Fehler- oder Hinweismeldungen eingesetzt werden

• Box kombiniert mit Aktionen

  Boxen werden mit Buttons versehen, um Dialoge zu generieren

• Bühne

  Auf der Bühne kommen Inhalte besonders zur Geltung

• Button Core

  Buttons in verschiedenen Konfigurationen

• Datawrapper Core

  Interaktive Grafiken von Datawrapper

• Datenliste Core

  Listen von Titel-Wert-Paaren (oder Begriff-Beschreibung-Paaren)

• Dienstleistungen Core

  Als einzelne Teaser-Elemente oder Teasersammlung

• Dienstleistungen Startbutton Core

  in verschiedenen Varianten

• Dokumentenliste Core

  Eine komplexe Liste von Dateien

• Dynamische Inhalte Core

  Ein Absatz zur Ausgabe von Inhalten aus der "Dynamisch Inhalte" Datenquelle. Anzeige sowie Such- und Filteroptionen können in vielen Varianten konfiguriert werden.

• Feedback Core

  War dieser Inhalt hilfreich

• Footer Core

  Footer im neuen Design mit drei Spalten und Partnern

• Formular Core

  Formular mit verschiedenen Eingabefeldern

• Formular - Erweitert

  Zus. Feldtypen sowie Abhängigkeiten und komplexe Funktionen von / zwischen Feldern

• Formular - Nachladen von Inhalt Nicht verwenden

  Bei Änderung eines Feldes wird Inhalt über AJAX nachgeladen

• Formular - Textlinks in Labels Nicht verwenden

  Spezialfall für EBP

• Formular - Validierung

  Clientseitige Validierung von Formularen

• Formular - Warnung vor Session-Timeout Nicht verwenden

  Aufrechterhaltung von Sessions für umfangreiche Formulare

• Fortschrittsanzeige

  Fortschrittsanzeigen für mehrstufige Formulare etc

• Friendly Captcha Core

  Datenschutzfreundliche CAPTCHA-Alternative zur Verifizierung menschlicher Benutzer

• Google reCAPTCHA Nicht verwenden

  Einbindung von Google reCAPTCHA v2

• Grid Core

  Gridsystem zur Erstellung verschiedener Spaltenaufteilungen

• Guide Core

  Modal-Guide zur Erklärung von Funktionen

• Header Core

  Header mit optionalen Funktionen und Navigation

• Hero Figure Core

  Hevorgehobene Zahl(en) um interessante oder wichtige Informationen zu vermitteln

• Infoicon Core

  Infoicons können an verschiedenen Stellen zusätzliche Informationen anbieten

• Inhaltsverzeichnis Core

  Das Inhaltsverzeichnis kann nach dem Kopfbereich einmal als Sprungnavigation auf der Seite verwendet werden

• Imagemap Core

  Responsive Imagemap

• Isolation

  Container mit eigenem CSS und JS Scope

• Kopfbereich Core

  Verschiedene Komponenten bilden Kopfbereich einer Seite

• Krisenkommunikation

  Startseitentemplate mit allen drei verschiedenen Varianten zur Krisenkommunikation

• Ladeanimation Core

  Komponente zur Visualisierung eines Ladevorgangs / Loading-Spinner

• Link Core

  Links in verschiedenen Varianten

• Linkliste Core

  Verfügbare Listentypen

• Linkliste mit hervorgehobenen Links Core

  Horizontal oder vertikal angeordnete Linkliste mit hervorgehobenen Links

• Loginprovider Auswahl

  Liste von Anbietern eines Logins zum Smart Service Portal

• Lokale Suche

  Lokale Suche

• Meldung / Hinweis Core

  Hinweis- und Warnmeldungen mit hoher Visibilität

• Maze

  Maze Funktionalität auf dieser Seite aktiviert

• Paging Core

  Paging- / Pagination-Element zur Navigation von mehreren Seiten (z.B. in Suchergebnissen)

• Seitenabschnitt Core

  Der Container in welchem Inhalte angeordnet werden

• Seitentags Core

  Eine Liste von Tags die auf verwandte Themen der Seite verlinken.

• Seitentitel Core

  Der prominente Titel einer Seite

• Spezial-Teasersammlung Core

  Farbige Teaser-Sammlung mit fest definiertem Grid

• Support Menu

  Support Menu Icon, das eine ManifestIntegration in einem Drawer launchen kann

• Tabelle Core

  Tabellen in verschiedenen Varianten

• Tabs Core

  Tabs (Reiter oder Kartei)

• Teaser Core

  Teaser sind ansprechende Links auf wichtige Inhalte. Teaser haben üblicherweise neben dem Teasertext auch einen Titel, ein Bild, eine Rubrik und weiteres

• Teasersammlung Core

  Verschiedene Sammlungen von mehreren Teasern. Sammlungen können auf die Anordnung, das Aussehen und das Verhalten der darin befindlichen Teaser Einfluss nehmen

• Teaser Slider Core

  Teaser in Slidern (Karussells)

• Teaser Stage

  Ein spezielles Layout für Teasersammlungen vom Typ Liste (Waagrecht).

• Text Core

  Verfügbare Textstile

• Timeline

  Timeline, auch verwendbar als Live-Ticker / Newsfeed

• Tooltip Core

  Tooltips in verschiedenen verfügbaren Konfigurationen und Optionen

• Veranstaltungen Core

  Liste von Veranstaltungen mit optionaler Such- und Filtermöglichkeit

• Veranstaltungsdetail Core

  Eine eigene Komponente für eine schnelle Übersicht aller Eckdaten einer Veranstaltung.

• Verwandte Themen Core

  Ein Menü mit Links zu Geschwister- oder Kindseiten

• Video Core

  Videoplayer für lokale Videos und jene von bekannten Onlineplatformen. Realisiert mit React auf TypeScript-Basis und Video.js

• Vorherige-Nächste-Links Core

  Links unterhalb des Artikels platzieren diesen in einer Serie von Artikeln.

• Webcam

  Webcam-Beispiele

• Zitat

  Zitate mit/ohne Autorenangabe in Kombination mit Bildern

Layouts

Komponenten können in den folgenden Layouts angewendet werden

• Generisch

  Generische Seite mit vollem Freiraum zum Einsatz von einer oder mehreren Seitenabschnitten. Üblicherweise verwendet für Startseiten

• Artikelseite

  Beispiel für eine Artikelseite mit Hauptspalte und optionaler Marginalspalte / Aside

• Webanwendung

  Grundstruktur zum Erstellen eigenständiger Apps

• Minimale Seite

  Beispiel für eine minimale Seite (z.B. Login-Seite)

Seitentemplates

Diese Templates kombinieren Komponenten und Layouts zu kompletten Seiten. Alle Templates für WCMS Kernfunktionen

• Startseite Portal

• Verwaltung

• Detailseite

• Detailseite Organisation

• Detailseite Thema

  Seiten auf hohen Navigationslevels enthalten zumeist nur eine Übersicht der darunterliegenden Themen (-seiten)

• Detailseite mit 'Weiteren Inhalten'

• Seite mit Session

  Benutzer:in ist angemeldet

• Seite mit Session (und gewähltem Organisations-Kontext)

  Benutzer:in ist angemeldet und hat eine Organisation ausgewählt

• Kontaktformular

  Kontaktformular mit Adressfeldern und Spamschutz

• Kontaktformular (versendet)

  Erfolgsmeldung nach Versand

• Dienstleistung (Details)

• Medienmitteilungen (Archiv)

  Archiv für Medienmitteilungen

• Medienmitteilung (Details)

  Detailansicht für Medienmitteilungen

• Medientermine (Archiv)

  Archiv für Termine / Medientermine

• Medientermin (Details)

  Detailansicht für Termine / Medientermine

• Veranstaltung (Details)

  Beispielseite für eine Detailansicht einer Veranstaltung

• Fehlerseite (500)

  Fehlerseite für schwerwiegende Fehler (HTTP 5**). Funktioniert ohne verlinkte Assets.

E-Mail-Templates

Die folgenden Templates und darin verwendeten Makros sind für die Darstellung/Verwendung als versendbare HTML-E-Mails gedacht

• Überschriften

  Alle verfügbaren Überschriften und Stile (Entwicklungsversion)

• Text, Bilder, Buttons

  Alle verfügbaren Textstile, Bildvarianten und Buttons (Entwicklungsversion)

• Listen

  Alle verfügbaren Listen und ähnliche Elemente (Entwicklungsversion)

• Tabellen und Datenliste

  Tabellen (3 und mehr Spalten) und Datenlisten (Entwicklungsversion)

• Beispiel Informations-E-Mail

  Eine Beispiel-E-Mail, die vom System versendet wurde (Entwicklungsversion)

• Beispiel Einladungs-E-Mail

  Eine Beispiel-E-Mail mit Events und Programm (Entwicklungsversion)

• Beispiel Newsletter, komplett

  Ein Newsletter mit allen möglichen vorhandenen Unterkomponenten (Entwicklungsversion)

Anwendungen

Staatskalender, Stellenmarkt und weitere

• Image Produkt - Übersicht

  Übersichtseite im speziellen Look mit Abprüngen zu den einzelnen Detailseiten.

• Image Produkt - Detailseite

  Detailseite im speziellen Look für Inhaltskomponenten

• Staatskalender Startseite

• Staatskalender Startseite - Suche getätigt

• Staatskalender Organisationseinheit - Viele Details

• Staatskalender Organisationseinheit - Wenige Details

• Staatskalender Person - Viele Details

• Staatskalender Person - Wenige Details

• Entscheidsammlung BVU

• Handbuch Soziales

• Handbuch Soziales - Vorwort

• Handbuch Soziales - Grundsätze

Konto

Accounterstellung und Wiederherstellung für 'Smart Service Portal' und weitere Dienste von Kanton und Gemeinden

• Registrierung

  Schritt 1: Registrierungsformular und Teaser zu Hilfeseiten

• Registrierung (mit Google reCAPTCHA) Nicht verwenden

  Schritt 1: Registrierungsformular und Teaser zu Hilfeseiten. Inklusive Google reCAPTCHA Challenge.

• Registrierung - Bestätigung

  Schritt 2: Erfolgsmeldung und Teaser zu Hilfeseiten

• Registrierung - Aktivierung

  Schritt 3: Erfolgsmeldung

• Passwort vergessen

  Schritt 1: Angabe der E-Mail-Adresse

• Passwort vergessen - Bestätigung

  Schritt 2: Erfolgsmeldung und Teaser zu Hilfeseiten

• Passwort vergessen - Email nicht bekannt

  Schritt 2: Fehlermeldung und Teaser zu Hilfeseiten

• Passwort vergessen - Neues Passwort setzen

  Schritt 3: Formular

• Passwort vergessen - Neues Passwort setzen nicht möglich

  Schritt 3: Fehlermeldung

Login

Anmeldedialog für 'Smart Service Portal' und weitere Dienste von Kanton und Gemeinden

• Start - Phase 1

  Auswahl der Anmeldemethode

• Start - Phase 1 - Fehlermeldung allgemein

  Auswahl der Anmeldemethode mit generischer Fehlermeldung

• Start - Phase 1 - Präziser Fehler

  Auswahl der Anmeldemethode mit Eingabefehler (z.B. falscher Benutzername)

• Start - Phase 2

  Auswahl der Anmeldemethode

• Start - Phase 3

  Auswahl der Anmeldemethode

• Login Behörden

  Für Verwaltungsmitarbeitende, Behörden, Dienstleister

• Lokale Anmeldung

  Anmelden mit ID und Passwort

• Lokale Anmeldung - Fehler- und Erfolgsmeldungen

  Anmelden mit ID und Passwort. Fehler- und Erfolgsmeldung ersichtlich

• Ladebildschirm

  Ladebildschirm für die Dauer der Verknüpfung mit / Erstellung des Aargau-Konto

• 2FA Login - Anmeldung

  Zweifaktor-Authentisierung mit SMS oder OTP

• 2FA Login - Anmeldung - SMS Authentifizierung nicht möglich

  Zweifaktor-Authentisierung mit SMS oder OTP. SMS Authentifizierung nicht möglich

• 2FA Login - Anmeldung Schritt 1 SMS

  SMS Authentisierung

• 2FA Login - Anmeldung Schritt 1 OTP

  OTP (One Time Password) Authentisierung

• 2FA Login - Anmeldung Schritt 1 Email

  Email Authentisierung

• 2FA Login - Setup von 2FA via App

  Einrichtung der Authentifizierungs-App (OTP - One Time Password)

• Abmeldung - Erfolgreich

  Erfolgsmeldung

• Abmeldung - Nach Löschen des Kontos

  Login-Screen nach erfolgter Konto-Löschung

• Anmeldung - Fehler

  Fehlermeldung

• Anmeldung - Konsensabfrage

  (Broker) Datalist und Formular

• Anmeldung - Konsensabfrage verweigert

  (Broker) Infobox

• Anmeldung - Service-Provider wählen

  (Broker) Linkliste zur Auswahl

• Anmeldung - Authentisierungsquelle wählen

  (Broker) Linkliste zur Auswahl

Smart Service Portal

• Übersicht

  Startseite mit Dashboard

• Vorgänge

  Übersicht über alle Vorgänge

• Dienstleistungen

  Übersicht über alle Dienstleistungen

• Persönliche Daten

  Übersichtsseite Persönliche Daten

• Persönliche Daten (Variante Gemeindebenutzer)

  Übersichtsseite Persönliche Daten (Gemeindenutzer)

• Persönliche Daten (keine Adressen)

  Übersichtsseite Persönliche Daten (Sonderfall: es wurden noch keine Adressen hinterlegt)

• Persönliche Daten: Personalien

  Formular zu Personalien

• Persönliche Daten: Kontoeinstellungen E-Mail

  Formular um E-Mail zu ändern

• Persönliche Daten: Kontoeinstellungen Passwort

  Formular um Passwort zu ändern

• Persönliche Daten: Kontoeinstellungen Mobilnummer

  Formular um Mobile Telefonnummer zu ändern

• Hilfe & Infos

  Übersicht mit Teasern

• Hilfe & Infos: Häufige Fragen

  Häufige Fragen mit Akkordeon

• Hilfe & Infos: PDF Formulare

  PDF Formulare zum Download

• Hilfe & Infos: Kontakt

  Kontaktformular

• Meine Organisationen

  Übersicht über alle Organisationen

• Meine Organisationen (leer)

  Übersicht über alle Organisationen (bisher keine vorhanden)

• Meine Organisationen: Organisation (als Benutzer)

• Meine Organisationen: Organisation (als Admin)

• Meine Organisationen: Organisation (als Admin)

  Neu angelegte Organisation ohne weitere Daten

• Meine Organisationen: Organisation anlegen

  Eingabemaske zum Anlegen einer neuen Organisation

• Meine Organisationen: Organisation bearbeiten

• Meine Organisationen: Organisation löschen

• Meine Organisationen: Adresse bearbeiten

• Meine Organisationen: Adresse löschen

• Meine Organisationen: Neue Adresse

• Meine Organisationen: Benutzerverwaltung

• Meine Organisationen: Benutzerverwaltung (Einzelansicht)

• Meine Organisationen: Benutzerverwaltung (Nutzer entfernen)

• Meine Organisationen: Organisationsverantwortliche

• Meine Organisationen: Organisationsverantwortliche (Entfernen)

• Meine Organisationen: Gemeinde

• Meine Organisationen: Gemeinde: Benutzerverwaltung

• Meine Organisationen: Gemeinde: Gemeindebenutzer

• eGov Prozess im Kontext einer anderen Entität

  Der Kontextindikator weist darauf hin, dass der Benutzer / die Benutzerin im Namen einer anderen Organisation agiert

• Organisation wählen

  Eine Auswahl lässt die Benutzerin / den Benutzer wählen, im Namen welcher Organisation sie / er agieren möchte

eGov-Prozesse und Web-Applikationen

Diese Templates und Komponenten sind speziell für Prozesse und Applikationen ausserhalb des WCMS Kerns gedacht

• Gesuch für Baubewilligung - Bauvorhaben Nicht verwenden

  EBP Prozess Beispiel Schritt 1

• Gesuch für Baubewilligung - Bauvorhaben (vorausgefüllt) Nicht verwenden

  EBP Prozess Beispiel Schritt 1, 2 weitere Gemeinden bereits ausgewählt

• Gesuch für Baubewilligung - Kontakte

  EBP Prozess Beispiel Schritt 2

• Gesuch für Baubewilligung - Beschreibung Nicht verwenden

  EBP Prozess Beispiel Schritt 3

• Gesuch für Baubewilligung - Gebäudetechnik Nicht verwenden

  EBP Prozess Beispiel Schritt 4

• Gesuch für Baubewilligung - Zone(n) Nicht verwenden

  EBP Prozess Beispiel Schritt 5

• Gesuch für Baubewilligung - Weitere Angaben Nicht verwenden

  EBP Prozess Beispiel Schritt 6

• Gesuch für Baubewilligung - Dokumente

  EBP Prozess Beispiel Schritt 7

• Gesuch für Baubewilligung - Gesuch senden

  EBP Prozess Beispiel Schritt 8

• Gesuch für Baubewilligung - Erfolg

  EBP Prozess Beispiel Schritt 9

• Gesuch für medizinische Betriebs/Berufsbewilligung Nicht verwenden

  Erster Schritt medBBP (voneinander abhängige Dropdownfelder)

Veraltet und entfällt demnächst

Diese Komponenten und Templates sind entweder veraltet (D, deprecated) oder sollten nicht mehr verwendet werden (NC, do not copy)

• Bild Option: Image Caption Minimal Veraltet und entfällt

  Spezialaugabe von Bildunterschriften: Minimal

• Dropdown-Liste Veraltet und entfällt

  Eine Liste mit ausführbaren Aktionen, als Dropdown

• Kontaktinfo Veraltet und entfällt

  Kontaktinfo Box mit Adresse, Öffnungszeiten und Anfahrtsbeschreibung

• Kontextindikator Veraltet und entfällt

  Deutliche Meldung über dem Inhaltsbereich. Nicht mehr relevant, da die Information im Header angezeigt wird

• Label Core Veraltet und entfällt

  Labels verbinden mehrere Seiten zu einem Thema. Optional können labels auf die Themenhauptseite verlinken

Tests, Entwicklung

Diese Komponenten und Templates dienen der Entwicklung, Tests, Dokumentation, ... und werden zukünftig womöglich nicht mehr unterstützt

• Authoring Environment Nicht verwenden

  Kleinere Korrekturen bei der Ausgabe der Autorenumgebung

• Mediahelfer

  Verschiedene CSS Klassen um Elemente je nach Umstand anders anzuzeigen

• Migrationshelfer Nicht verwenden

• Standalone Manifest-Integration

  Manifest Integration auf eine ansonsten leeren Seite