Knuffi Design Richtlinien

Basisfarben

Palettenfarben

Funktionsfarben

Farbe progress ist neu und kennzeichnet laufende Prozesse, eher in die Richtung Lila

Typographie

Farbe progress ist neu und kennzeichnet laufende Prozesse, eher in die Richtung Lila

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a lead paragraph. It stands out from regular paragraphs.

A well-known quote, contained in a blockquote element.

• This is a list.
• It appears completely unstyled.
• Structurally, it's still a list.
• However, this style only applies to immediate child elements.
• Nested lists:
  • are unaffected by this style
  • will still show a bullet
  • and have appropriate left margin
• This may still come in handy in some situations.

• This is a list item.
• And another one.
• But they're displayed inline.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

This is the Keyboard Tag Strg

Alerts

Class -> alert alert-accent

Class -> alert alert-primary

Class -> alert alert-secondary

Class -> alert alert-success

Class -> alert alert-danger

Class -> alert alert-warning

Class -> alert alert-info

Class -> alert alert-progress

Class -> alert alert-light

Class -> alert alert-dark

Images

Hier fehlen noch Beispiele für Caption Slider usw.

Thumbnail Image

Figures

Tabellen

Verschiedene Tabellen Stile, hier noch etwas ausweiten um Auswirkungen auf Kopfzeile und Tabellenzeilen zu sehen

Formulare

Formularstile

Formularfelder

Disabled Formularfelder