Text Elements

//Content-Element

Headline

Die Headline-Elemente bestehen aus sechs verschiedenen Leveln. <h1> ist die Überschrift mit der höchsten Gewichtung und <h6> mit der kleinsten. Ein Headline-Element beschreibt das Thema des Bereiches, welcher der Überschrift folgt.

Es sollte vermieden werden Headline-Level zu überspringen. Es sollte immer von <h1> ausgegangen werden, danach <h2> und so weiter. Außerdem sollte versucht werden nur eine Überschrift des ersten Levels (<h1>) in einem Dokument zu benutzen.

Semantic Tag (<h1>) und Style (Aussehen, Größe) sind beim Headline-Element getrennt. Style "Heading 1" und "Heading 2" haben jeweils noch eine Sub-Headline.

Headline 1 bold

Headline 2 bold

Headline 2 thin

Headline 3 bold

Headline 4 regular

Headline 5 bold

Headline 6 bold

Headline 6 regular

Headline 1 bold

Headline 2 bold

Headline 2 thin

Headline 3 bold

Headline 4 regular

Headline 5 bold

Headline 6 bold center

Headline 6 regular right

//Content-Element

Text

Durch den Einsatz der unterschiedlichen Schriftschnitte können Inhalte klar gegliedert und Seiten wirkungsvoll und abwechslungsreich inszeniert werden.

Das Text-Element gibt es in verschieden Größen kann center, left, oder right ausgerichtet und auf bold, italic und underline gesetzt werden.

Extra Small / Small Text: Für Hinweise z. B. Sternchentext
Default: normaler Fließtext / Lesetext
Medium Text: Als hervorgehobener Einleitungstext
Interne Verlinkungen: Name der Seite eingeben
Verlinkungen auf Files: Name des Files eingeben
Externe Verlinkungen: komplette URL (z. B. https://www.muster.de/) eingeben

Extra Small Text: 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 Interne Verlinkung sanctus est Lorem ipsum dolor sit amet.

List element
List element
List element

List element
List element
List element

Small Text: 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 Interne Verlinkung sanctus est Lorem ipsum dolor sit amet.

Medium Text: 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 Verlinkung auf File sanctus est Lorem ipsum dolor sit amet.

Default Text: 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 Externe Verlinkung sanctus est Lorem ipsum dolor sit amet.

Extra Large Text: 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 Interne Verlinkung sanctus est Lorem ipsum dolor sit amet.

List element
List element
List element

List element
List element
List element

//Content-Element

Text List

List text element
List text element
List text element

List text element
List text Verlinkung
List text element

List text element
List text element
List text element

List text element
List text Verlinkung
List text element

//Content-Element

Button

Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und klar hierarchisiert.

Primary Button: Der flächige Primary Button wird für die wichtigste Aktion auf einer Seite bzw. View eingesetzt.

Secondary Button: Der Standard Button wird für untergeordnete Aktionen eingesetzt.

Button Link: Der Secondary Button wird als subtiler Handlungsaufruf eingesetzt.

Verlinkungen auf Section / Achor Link
Interne Verlinkungen: Name der Seite eingeben
Verlinkungen auf Files: Name des Files eingeben
Externe Verlinkungen: komplette URL (z. B. https://www.muster.de/) eingeben
Button Orientation: left, right, center, 100% width

//Content-Element

Download File Link

Direkter Download eines Files bei klick auf den Button. Es wird automatisch die File Size in Klammern angezeigt.

Button Text oder Filename (628 kb)

//Content-Element

Highlighted Headline with Link

Headline mit Underline- und Verlinkungs-Möglichkeit. Es stehen alle h1 bis h6 Styles wie bei der Default Headline zur Verfügung.

Hier steht eine tolle Headline

//Content-Element

Quote

Das Quote Element hebt kurze Sätze / Aussagen hervor und sollte flächig oder meist alleinstehend eingesetzt werden.

"The European languages are members of the same family. Their separate existence is a myth. For science, music, sport, etc, Europe uses the same vocabulary."
–Leroy Jenkins, CEO at Pals4Life

//Content-Element

Enumeration

Gliederung von Steps oder Ähnlichem.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

//Content-Element