Colors

Accent

Primary #E0001B
Secondary #8c8c8c
Blue #0951b0
Red 100 #E0929B
White #FFFFFF
Red 400 #D22626
Only used for errors

Grays

Gray 25 #f6f6f6
Gray 50 #eee
Gray 75 #b3b3b3
Gray 100 #8c8c8c
Gray 200 #666
Gray 300 #333

Badge

Badge PrimaryBadge SecondaryBadge Blue
Show code

Removable Badge
Show code

Button

States

Sizes

Icon

Ghost

Show code

Card

logo

Card Title

Child Element 1
Child Element 2
Show code

Forms

Text inputs

Show code

Field Group

cos() induktiv
cos() kapazitiv
Show code

Field Group with children

kVA
kW
kWp
Show code

Pill group

Gewünschtes Produkt
Show code

Checkbox group block

Gewünschtes Produkt
Show code

Checkbox group inline

Gewünschtes Produkt
Show code

Radio group block

Art der Einspeisung
Show code

Radio group inline

Art der Einspeisung
Show code

Form navigation

Show code

Notification

Erfolgreiche Aktion
Die technischen Anschlussdaten wurden Ihrem Antrag erfolgreich hinzugefügt.
Fehlerhafte Aktion
Es ist ein Fehler aufgetreten.
Show code

Popout

Content
Content
Content
Show code

Steps

Horizontal

Kunde
Standort
Anschluss
Elektriker
Prüfen
Show code

Vertical

Kunde
Standort
Anschluss
Elektriker
Prüfen
Show code

Vertical with description text

Kunde und Anschluss
Kunde
Doris Baumann
Standort des Anschlusses
Teichmanns 2
23623 Kottes-Purk
Zuständiger Mitarbeiter
Markus Michaelovic
0664/1243213
Technische Details
Auftrag prüfen
Show code

Vertical with description text active

Kunde und Anschluss
Kunde
Doris Baumann
Standort des Anschlusses
Teichmanns 2
23623 Kottes-Purk
Zuständiger Mitarbeiter
Markus Michaelovic
0664/1243213
Technische Details
Auftrag prüfen
Show code

Table

NummerGeändertKundeAnschlussadresseAuftrag
NeuDW-1091223407.12.2019Beatrix HerzmanonnTeichmanns 2, 3623 KorneuburgNeuanschluss
DW-5453443410.11.2019Karl Bauer-EderMauerbachstraße 24, 3623 KorneuburgNeuanschluss
DW-7678787724.09.2019Herbert WeberHofweg 15, 2400 BadenNeuanschluss
ErledigtDW-8897655507.08.2019Fred SchreyvogelEinbahngasse 24, 2340 BadenErzeugungsanlage
Show code

Tabs

Tab 1
Tab 2
Tab 3
Tab 4
Show code

Typography

Headlines

H1 Headline

H2 Headline

H3 Headline

H4 Headline

H5 Headline
Show code

Paragpraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis consequat mi porttitor pulvinar. Ut consectetur lacinia felis nec posuere. Morbi volutpat nisl justo, a ullamcorper leo maximus sed. Nam et lobortis eros. Nam et porta ex, eget ultrices dui. Sed tempus pulvinar augue, et interdum massa tristique ac. Curabitur ullamcorper consectetur ligula et suscipit. In porta quam vel est imperdiet, a dictum lectus pharetra. Vestibulum vitae ornare mauris, a aliquet diam. Aliquam ac nisl aliquet, semper erat eu, vulputate metus. Nullam lacinia eros ac efficitur scelerisque. Morbi id posuere ligula. Pellentesque ipsum felis, viverra et ligula vitae, fringilla scelerisque lectus. Nunc aliquet nulla at leo ornare, vitae tincidunt lacus cursus. Vivamus sagittis, mauris sit amet malesuada fermentum, velit nibh sodales eros, vitae rhoncus lectus leo eu eros. Aliquam erat volutpat.

Show code

Bold

Bold text
Show code

Ordered list

  1. List element
  2. List element
  3. List element
  4. List element
  5. List element
Show code

Unordered list

  • List element
  • List element
  • List element
  • List element
  • List element
Show code

Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Show code

Pages

Example pages

Example pages for consumer

INDEX
EXAMPLE1
EXAMPLE2

Example pages for electrician

INDEX
EXAMPLE1