Zum Inhalt springen

Styleguide

Colors

color1

Link Text
Link Text Text invers Link

color2

Link Text
Link Text Text invers Link

color3

Link Text
Link Text Text invers Link

color4

Link Text
Link Text Text invers Link

gray1

Link Text
Link Text Text invers Link

gray2

Link Text
Link Text Text invers Link

gray3

Link Text
Link Text Text invers Link

gray4

Link Text
Link Text Text invers Link

gray5

Link Text
Link Text Text invers Link

black

Link Text
Link Text Text invers Link

white

Link Text
Link Text Text invers Link
Standard Schriftfarbe: gray1
Helle Schriftfarbe: gray2

Fonts

Text: Roboto variable font
Text bold

h1 - Seitenüberschrift

h2 - Themenüberschrift

h3 - Themenüberschrift

h4 - Themenüberschrift

h5 - Themenüberschrift

 

Dies ist die Hauptüberschrift der Überschriftengruppe

Dies ist die Unterüberschrift der Überschriftengruppe

Der Einleitungstext (großer Absatz) kann eine Einleitung in den Textabschnitt sein, oder er dient nur zur visuellen Unterscheidung zwischen dem Rest des Textabschnitts.

Ein Absatz (aus dem Griechischen paragraphos, "daneben schreiben" oder "daneben geschrieben") ist eine in sich geschlossene Einheit eines schriftlichen Diskurses über einen bestimmten Punkt oder Gedanken. Ein Absatz besteht aus einem oder mehreren Sätzen. Obwohl die Syntax einer Sprache keine Absätze vorschreibt, sind sie in der Regel ein erwarteter Teil des formalen Schreibens und dienen der Gliederung längerer Prosa.

Tabelle im Textfeld

JahrGebiet AGebiet BGebiet C
201325.000100.00055.000
201450.00000000000000000000000010.00000000000000000000000050.000000000000000000000000
2015150.000550.00040.000

 

Rahmen

Pellentesque auctor neque nec urna. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Fusce fermentum odio nec arcu. Etiam ut purus mattis mauris sodales aliquam. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi.

Donec posuere vulputate arcu. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Nulla facilisi. Maecenas egestas arcu quis ligula mattis placerat. Curabitur vestibulum aliquam leo.

Text einrücken 66/33%

Unter dem Reiter Erscheinungsbild → Rahmen → Einrücken 66/33%  
kann die Inhaltsbreite verkleinert durch eine Einrückung rechts werden. 

Text eingerückt, mittig

Unter dem Reiter Erscheinungsbild → Rahmen → Einrücken 
kann die Inhaltsbreite verkleinert werden. Dies ist manchmal notwendig, damit der Text nicht zu breit läuft und somit schlecht lesbar ist.

Text einrücken 33/66%

Unter dem Reiter Erscheinungsbild → Rahmen → Einrücken 33/66%  
kann die Inhaltsbreite verkleinert durch eine Einrückung links werden. 

Linie davor

Unter dem Reiter Erscheinungsbild → Rahmen → Linie davor 
kann eine Linie vor dem Inhaltselement ausgegeben werden.

Linie danach

Unter dem Reiter Erscheinungsbild → Rahmen → Linie danach
kann eine Linie vor dem Inhaltselement ausgegeben werden.

Vivamus aliquet elit ac nisl. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce pharetra convallis urna. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent egestas tristique nibh.

Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Vestibulum fringilla pede sit amet augue. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Aliquam lobortis.

Vivamus aliquet elit ac nisl. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce pharetra convallis urna. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Praesent egestas tristique nibh.

Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Vestibulum fringilla pede sit amet augue. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Aliquam lobortis.

Ihre Daten

Icons, Examples

Paginator

Glossary

Lists

Unordered

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Ordered

  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

No Bullets

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Definition List

Title
Content

Definition List inline class="dl-horizontal"

Title
Content

Alerts

Alert Neutral

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Error

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Valid

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Warning

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Alert Information

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Modal

Tooltip

©Copyright, Foto: jweiland.net

HTML element: figure

©Copyright, Foto: jweiland.net

Class: wrapper-tooltip