UI-Design
Typographie & Textelemente
Headline Display (01)
Headline 1 (h1) Headline span 02
Headline 2 (h2) Headline span 01
Headline 3 (h3)
Headline 4 (h4)
Headline 5 (h5)
Headline 6 (h6)
Text Large – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text main – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text small – Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
Dieser Absatz enthält ein kurzes Zitat mit dem q-Element (q)
, dfn-Element, das einen Definitionsbegriff angibt (dfn), abbr-Element mit Tooltip (abbr), fetter Text (strong), hervorgehobener Text (em), kleiner Text (small), markierter Text (mark), gelöschter Text (del) , eingefügter Text (ins) , Codeausschnitt (code) und Tastatureingabe (kbd).
Blockquote example with nested paragraph. „This is a quoted text“ (q element)
– Author Name
(code)
// Vorformatiertes Codebeispiel:
function greet(name) | Spalte 1 | Spalte 2 | Spalte 3 | Spalte 4 | Spalte 5 | Spalte 6 | Spalte 7 |
|---|---|---|---|---|---|---|
| Zeile 1, Zelle 1 | Zeile 1, Zelle 2 | Zeile 1, Zelle 3 | Zeile 1, Zelle 4 | Zeile 1, Zelle 5 | Zeile 1, Zelle 6 | Zeile 1, Zelle 7 |
| Zeile 2, Zelle 1 | Zeile 2, Zelle 2 | Zeile 2, Zelle 3 | Zeile 2, Zelle 4 | Zeile 2, Zelle 5 | Zeile 2, Zelle 6 | Zeile 2, Zelle 7 |
| Zeile 3, Zelle 1 | Zeile 3, Zelle 2 | Zeile 3, Zelle 3 | Zeile 3, Zelle 4 | Zeile 3, Zelle 5 | Zeile 3, Zelle 6 | Zeile 3, Zelle 7 |
| Zeile 4, Zelle 1 | Zeile 4, Zelle 2 | Zeile 4, Zelle 3 | Zeile 4, Zelle 4 | Zeile 4, Zelle 5 | Zeile 4, Zelle 6 | Zeile 4, Zelle 7 |
| Zeile 5, Zelle 1 | Zeile 5, Zelle 2 | Zeile 5, Zelle 3 | Zeile 5, Zelle 4 | Zeile 5, Zelle 5 | Zeile 5, Zelle 6 | Zeile 5, Zelle 7 |
| Zeile 6, Zelle 1 | Zeile 6, Zelle 2 | Zeile 6, Zelle 3 | Zeile 6, Zelle 4 | Zeile 6, Zelle 5 | Zeile 6, Zelle 6 | Zeile 6, Zelle 7 |
Interaktive Elemente
Link
Link Text
Link Main (Round)
Link Main (Radius S)
Button
Button Icon
Button Square (Round)
Button Square (Radius S)
Button Text
Button Main (Round)
Button Main (Radius S)
Button Secondary (Radius S)
Checkbox
Radio
Toggle
Stilelemente
Icons
Alle 25 Elemente sichtbar.