Profil-Vervollständigung

Verwendung

Neue Slides werden nur zusammen mit dem Design System konzipiert und können beim nächsten Release eingefügt werden.
Eine Slide besteht immer aus Dachzeile, Überschrift, Text und Call-to-Action.
Chevron-Buttons führen zum nächsten offenen Schritt weiter, nach dem letzten Schritt zurück zur ersten Profil-Vervollständigung. Dachzeile und Chevron-Buttons bleiben stehen, nur Überschrift, Text und Buttons sind unterschiedlich.

Positionierung

Das Banner nimmt die volle Breite des Viewports ein.
Die Inhalte des Banners und die Navigation liegen zwischen der ersten und letzten Gridspalte.

Ab dem Breakpoint MD (≥ 768px)

Die Fortschrittsanzeige ist links von den anderen Inhalten platziert.
Die Navigationsbuttons sind rechtsbündig neben der Dachzeile und Überschrift platziert.

Ab dem Breakpoint XL (≥ 1200px)

Das Banner erstreckt sich von der ersten bis zur letzten Gridspalte.
Die Buttons sind rechtsbündig neben dem Text platziert.

Design

Typografie

Ab dem Breakpoint XS (≥ 0px)

Visualisierung der CSS-Regeln zu Ziffer 1 bis 3 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
1	Fortschritt in Prozent – Ganze Zahl
	Schriftart	`font-family`	`BundesSerif`
	Schriftgrad	`font-size`	`2rem`
	Zeilenhöhe	`line-height`	`.8`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#1F3347`
	Fortschritt in Prozent – Symbol
	Schriftart	`font-family`	`BundesSerif`
	Schriftgrad	`font-size`	`1rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#1F3347`
2	Dachzeile
	Schriftart	`font-family`	`BundesSans`
	Schriftgrad	`font-size`	`1rem`
	Zeilenhöhe	`line-height`	`1.5`
	Schriftschnitt	`font-weight`	`700`
	Schriftfarbe	`color`	`#1F3347`
3	Überschrift H3
	Schriftart	`font-family`	`BundesSerif`
	Schriftgrad	`font-size`	`1.323rem`
	Zeilenhöhe	`line-height`	`1.25`
	Schriftschnitt	`font-weight`	`700`
	Schriftfarbe (Label)	`color`	`#2D6F9E`
4	Text
	Schriftart	`font-family`	`BundesSans`
	Schriftgrad	`font-size`	`1rem`
	Zeilenhöhe	`line-height`	`1.5`
	Schriftschnitt	`font-weight`	`400`
	Schriftfarbe	`color`	`#1F3347`

Ab dem Breakpoint MD (≥ 768px)

Visualisierung der CSS-Regeln zu Ziffer bis aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
5	Element: Fortschritt in Prozenten – Ganze Zahl
	Schriftgrad	`font-size`	`3rem`
	Element: Fortschritt in Prozenten – Symbol
	Schriftgrad	`font-size`	`1.5rem`
6	Element: Überschrift H3
6	Schriftgrad	`font-size`	`1.44rem`

Abstände Banner-Slide

Ab dem Breakpoint XS (≥ 0px)

Visualisierung der CSS-Regeln zu Ziffer 7 bis 16 aus der folgenden Tabelle.

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
7	Wrapper
	Breite	`width`	`100vw`
	Höhe	`height`	`auto`
	Ausrichtung	`justify-content`	`center`
	Ausrichtung	`align-items`	`center`
8	Inhalts-Container
	Der Inhalts-Container erstreckt sich über die volle Breite des Grids. Der Banner-Wrapper erstreckt sich über den ganzen Viewport.
	Breite	`width`	`100%`
	Innenabstand	`padding`	`2rem`
	Anordnung	`flex-direction`	`column`
	Abstand	`gap`	`1rem`
9	Überschriften-Container
	Außenabstand	`margin-top`	`1rem`
	Außenabstand	`margin-right`	`0rem`
10	Text & Action-Buttons Container
	Anordnung	`flex-direction`	`column`
	Abstand	`gap`	`1rem`
11	Banner Navigation - Icon-Buttons
	Platzierung	`position`	`absolute`
	Positionierung	`top`	`0rem`
	Positionierung	`right`	`2rem`
	Anordnung	`flex-direction`	`row`
	Abstand	`gap`	`0rem`
12	Progress Display
	Höhe	`height`	`4.5rem`
	Breite	`width`	`4.5rem`
	Gradient (Progress Line)	`background`	`conic-gradient(#27577B 0%, #2D6F9E 100%)`
	Farbe (Progress Line Hintergrund)	`background`	`rgba(31, 51, 71, .16)`
	Hintergrund-Gradient	`background`	`radial-gradient(closest-side at 50% 50%, #FFFFFF 54%, #F8FAFC 100%)`
	Schatten	`box-shadow`	`0 0 4.8px rgba(255, 255, 255, .5)`
13	Dachzeile
13	Außenabstand	`margin-bottom`	`0.5rem`
14	Überschrift H3
14	Außenabstand	`margin-bottom`	`0.75rem`
15	Text
15	Außenabstand	`margin-bottom`	`1rem`
16	Action Buttons Container
	Anzahl und Art der Buttons variieren
	Breite	`width`	`100%`
	Anordnung	`flex-direction`	`column`
	Abstand	`gap`	`1rem`

Ab dem Breakpoint SM (≥ 576px)

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
18	Element: Action-Buttons Container
	Anzahl und Art der Buttons variieren
	Anordnung	`flex-direction`	`row`
	Anordnung	`flex-wrap`	`wrap`

Ab dem Breakpoint MD (≥ 768px)

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
19	Fortschrittsanzeige
	Höhe	`height`	`6.875rem`
	Breite	`width`	`6.875rem`
	Schatten	`box-shadow`	`0 0 8px rgba(255, 255, 255, .5)`
20	Content Container
	Anordnung	`flex-direction`	`row`
	Abstand	`gap`	`2rem`
21	Überschriften-Container
	Außenabstand	`margin-top`	`0rem`
	Außenabstand	`margin-right`	`6.5rem`

Ab Breakpoint XXL (≥ 1400px)

Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
	Objekt	Eigenschaft	Wert
22	Element: Text & Action-Buttons Container
	Anordnung	`flex-direction`	`row`
	Abstand	`gap`	`2.5rem`

Code

Eine weitere Beispielseite zeigt, wie sich die Profil-Vervollständigung hinsichtlich ihrer Breite auf kleinen und großen Breakpoints verhält. Dies kann hier auf Grund des Layouts einer Komponenten-Seiten nicht veranschaulicht werden. Für das korrekte Verhalten befindet sich die Profil-Vervollständigung am besten außerhalb eines Containers.

HTML

Das Grundgerüst der Profil-Vervollständigung ist ein Karussell mit einer einfachen Vor- und Zurück-Navigation über zwei Chevron-Buttons, dessen Banner in der aktuellen Ausprägung jeweils eine runde Fortschrittsanzeige sowie anderen Content beinhalten.
Aufgrund von Herausforderungen in der Barrierefreiheit und der unnötigen Komplexität verzichtet das Design System auf das in der HTML5-Spezifikation vorgesehene Element <progress> für die runde Fortschrittsanzeige.

WAI-ARIA

Das programmatisch zu setzende Attribut "aria-valuenow" dient zur Angabe des aktuellen Fortschritts, welcher sich innerhalb des durch "aria-valuemin" und "aria-valuemax" definierten Bereichs bewegt. Standardmäßig sind diese auf die Werte "0" und "100" gesetzt, repräsentieren also einen prozentualen Fortschritt, so dass sie hier nicht explizit gesetzt werden müssen. "aria-valuetext" beinhaltet den aussagekräftigen Kontext für Screenreadernutzende und wird vorrangig vor "aria-valuenow" ausgegeben.

CSS

Der Prozentwert für die Anzeige in Prozent und dem jeweils korrespondierenden farbigen Graph um den Rand des runden Progress-Displays wird der benutzerdefinierten CSS-Variable --percentage zugeordnet und über das Inline-Style-Attribut des Elements gerendert.

JavaScript

Für die Vor- und Zurück-Navigation muss die Datei stackslider.js oder die gesamte main.js eingebunden sein.

Profil Setup Panel bei 16%

Ich bin eine Dachüberschrift.

Beispiel-Überschrift

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.

Auch ich bin eine Dachüberschrift.

Beispiel-Überschrift

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.

Ich bin eine Dachüberschrift.

Ich bin eine längere Beispiel-Überschrift

<section id="ds-stackslider--1" class="ds-stackslider container-xl" data-desy-stackslider aria-label="Content-Wechsler">
  <div class="ds-stackslider__container container">
    <div class="ds-stackslider__controls">
      <button class="btn btn btn--tertiary btn--icon-only" type="button" data-desy-stackslider-prev-btn title="zurück">
        <span class="ds-icon-chevron-left" aria-hidden="true"  ></span>
        <span class="btn__text visually-hidden">zurück</span>
      </button>
      <button class="btn btn btn--tertiary btn--icon-only" type="button" data-desy-stackslider-next-btn title="weiter">
        <span class="ds-icon-chevron-right" aria-hidden="true"  ></span>
        <span class="btn__text visually-hidden">weiter</span>
      </button>
    </div>
    <article class="ds-stackslider__sheet active" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="16" aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 16;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">16</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Aktivieren</span>
            </button>
          </div>
        </div>
      </div>
    </article>
    <article class="ds-stackslider__sheet" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="16" aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 16;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">16</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Auch ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Aktivieren</span>
            </button>
          </div>
        </div>
      </div>
    </article>
    <article class="ds-stackslider__sheet" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="16" aria-valuetext="16 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 16;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">16</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Ich bin eine längere Beispiel-Überschrift</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Ergänzen</span>
            </button>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

Profil Setup Panel bei 92%

Ich bin eine Dachüberschrift.

Beispiel-Überschrift kurz

Auch ich bin eine Dachüberschrift.

Beispiel-Überschrift

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.

Ich bin eine Dachüberschrift.

Ich bin eine längere Beispiel-Überschrift

<section id="ds-stackslider--2" class="ds-stackslider container-xl" data-desy-stackslider aria-label="Content-Wechsler">
  <div class="ds-stackslider__container container">
    <div class="ds-stackslider__controls">
      <button class="btn btn btn--tertiary btn--icon-only" type="button" data-desy-stackslider-prev-btn title="zurück">
        <span class="ds-icon-chevron-left" aria-hidden="true"  ></span>
        <span class="btn__text visually-hidden">zurück</span>
      </button>
      <button class="btn btn btn--tertiary btn--icon-only" type="button" data-desy-stackslider-next-btn title="weiter">
        <span class="ds-icon-chevron-right" aria-hidden="true"  ></span>
        <span class="btn__text visually-hidden">weiter</span>
      </button>
    </div>
    <article class="ds-stackslider__sheet active" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="92" aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 92;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">92</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift kurz</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Aktivieren</span>
            </button>
          </div>
        </div>
      </div>
    </article>
    <article class="ds-stackslider__sheet" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="92" aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 92;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">92</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Auch ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Beispiel-Überschrift</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Aktivieren</span>
            </button>
          </div>
        </div>
      </div>
    </article>
    <article class="ds-stackslider__sheet" data-desy-stackslider-sheet>
      <div class="d-flex flex-column flex-md-row ds-profile-setup">
        <div class="ds-profile-setup__progresscircle-sizing-container">
          <div role="progressbar" class="ds-progress-circle" aria-label="Fortschrittsanzeige" aria-valuenow="92" aria-valuetext="92 Prozent der Profileinrichtung sind abgeschlossen" style="--percentage: 92;">
            <div class="ds-progress-circle__inner">
              <div aria-hidden="true">
                <output class="ds-progress-circle__percentage-number">92</output>
                <span class="ds-progress-circle__percentage-symbol">%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column flex-xxl-row justify-content-xxl-between gap-xxl-9 align-items-xxl-end flex-xxl-grow-1">
          <div class="mt-6 mt-md-0">
            <header class="fw-bold">
              <p class="mb-4">Ich bin eine Dachüberschrift.</p>
              <h3 class="ds-profile-setup__headline mb-5 pt-0">Ich bin eine längere Beispiel-Überschrift</h3>
            </header>
            <p class="mb-xxl-0">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet quod reiciendis asperiores nesciunt esse, deserunt sit corporis vitae delectus voluptate hic mollitia, optio aliquam quibusdam maxime voluptatibus nostrum, sint ex.
            </p>
          </div>
          <div class="d-flex flex-column gap-6 align-items-stretch align-items-sm-start flex-sm-row">
            <button class="btn btn btn--secondary" type="button">
              <span class="btn__text">Jetzt nicht</span>
            </button>
            <button class="btn btn btn--primary" type="button">
              <span class="btn__text">Ergänzen</span>
            </button>
          </div>
        </div>
      </div>
    </article>
  </div>
</section>

Profil-Vervollständigung

Verwendung

Positionierung

Ab dem Breakpoint MD (≥ 768px)

Ab dem Breakpoint XL (≥ 1200px)

Design

Typografie

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint MD (≥ 768px)

Abstände Banner-Slide

Ab dem Breakpoint XS (≥ 0px)

Ab dem Breakpoint SM (≥ 576px)

Ab dem Breakpoint MD (≥ 768px)

Ab Breakpoint XXL (≥ 1400px)

Code

HTML

WAI-ARIA

CSS

JavaScript

Profil Setup Panel bei 16%

Profil Setup Panel bei 92%

Barrierefreiheit

Relevante BITV-Anforderungen