Zum Inhalte springen

Styleguide

Colors

Link Link Text Text
color1
Link Link Text Text
color2
Link Text Link Text
color3
Link Text Link Text
color4
Link Link Text Text
gray1:
Schriftfarbe
Link Text Link Text
gray2
Link Link Text Text
gray3
Link Link Text Text
gray4
Link Link Text Text
gray5
Link Link Text Text
black
Link Link Text Text
white
Standard Schriftfarbe: gray1
Helle Schriftfarbe: gray2

Fonts

Text: OpenSans semibold

Text, bold: OpenSans bold

Headings

h1 Title

h2 Title

h3 Title

h4 Title

h5 Title

Heading Group

This is the heading group's main heading

This is the heading group's subheading

Intro Text/Large Paragraph

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Accordion

Content hidden

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.

Content hidden only in mobile Version

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.

Indented Text

Indented left and right

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Indented left

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Indented right

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements

This is a text link

This is a neutral text color inside a link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Icons, Examples

Icons in RTE

Max Muster

Typostrasse 3
12345 Worldwideweb

Link externe URL

Link Datei Download

E-Mail

Mobil Telefon
Telefon

Paginator

Glossary

Ruler

Ruler Before

Ruler After

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

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Forms

Text Fields

Select Menu

Checkbox

Radio Buttons

Buttons

Link der eine Aktion ausführt

Link der eine Aktion rückgängig macht

Link auf eine Seite/Datei

Absendebutton, minbreite 50%

Table

Table Heading 1Table Heading 2Table Heading 3Table Heading 4Table Heading 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5

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

Box, farblich abgesetzt

Class: frame-layout-100

Tooltip

©Copyright, Foto: jweiland.net

HTML element: figure

©Copyright, Foto: jweiland.net

Class: wrapper-tooltip