Styleguide
Colors
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 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
Paginator
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
- This is a list item in an ordered list
- An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
-
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an ordered list
- 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
Table
Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
---|---|---|---|---|
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Alerts
Alert Neutral
Alert Error
Alert Valid
Alert Warning
Alert Information
Modal
Box, farblich abgesetzt
Class: frame-layout-100
Tooltip
HTML element: figure
Class: wrapper-tooltip