Thymuskin Website Komponenten

Diese Seite beinhaltet eine Übersicht aller derzeit verfügbaren Komponenen dieser Website inkl. deren Varianten und inhaltliche Beispiele. Alle Komponenten können innerhalb einer Seite mehrfach verwendet und frei miteinander kombiniert werden.

Überschriften (Headline)

Hauptüberschriften stehen in einer eigenen Zeile und besitzen folgende, veränderliche Eigenschaften:

Semantische Hierarchie in sechs Stufen
Horizontale Ausrichtung (linksbündig, zentriert, rechtsbündig)
Vertikale Ausrichtung (oben, mitte, unten)

Besonderheiten:

Überschriften der ersten Ordnung (<h1>) werden visuell als Überschriften der zweiten Ordnung formatiert (<h2>)

Beispiele:

<h1>Überschrift </h1>

<h2>Überschrift </h2>

<h3>Überschrift </h3>

<h4>Überschrift </h4>

<h5>Überschrift </h5>

<h6>Überschrift </h6>

Teasertext

Teasertext (engl. Kostprobe) dient der visuellen Hervorhebung von Fließtexten durch Fettung und steht üblicherweise am Beginn einer Seite oder eines längeren Abschnitts.

Beispiel:

Bavaria ipsum dolor sit amet kummd woaß singan des basd scho. Woibbadinga Wurscht auf der Oim, da gibt’s koa Sünd gschmeidig Maderln. Maderln Deandlgwand Enzian wos sog i Sauakraud oa, Zidern Trachtnhuat Meidromml.

Fließtext (Markdown)

Fließtext besitzt keine besonderen Eigenschaften. Er im Content-Management-System sehr einfach durch die Auszeichnungssprache Markdown formatiert sowie um ein einzelnes Bild ergänzt werden.

Fließtext besitzt folgende, veränderliche Eigenschaften:

Horizontale und vertikale Ausrichtung
Formatierung als fetter Text, kursiver Text oder fetter und kursiver Text
Komplexe Formatierungen gemäß Markdown Spezifikation

Das Bild steht immer oben innerhalb eines Fließtext-Blocks und besitzt folgende, veränderliche Eigenschaften:

Bild wird von Text umflossen (links oder rechts)
Bild wird nicht von Text umflossen
Breite des Bildes 25%, 50%, 75% oder 100% der Breite des Fließtext-Blocks
Bild beinhaltet eine URL und fungiert als Hyperlink

Fließtext kann darüber hinaus Überschriften, Code etc. beinhalten.

Beispiele:

Linksbündiger Fließtext ohne Bild

Ich bin ein linksbündiger Fließtext. Bavaria ipsum dolor sit amet etza Kuaschwanz kimmt Watschnbaam Haferl auf der Oim, da gibt’s koa Sünd back mas nia need jo mei is des schee Ohrwaschl. Measi und sei am acht’n Tag schuf Gott des Bia sodala hoggd am acht’n Tag schuf Gott des Bia.

Rechtsbündig mit 25% Bild

Ich bin ein rechtsbündiger Fließtext mit 25% breitem Bild inkl. Umfluss (sieht doof aus, geht aber). Bavaria ipsum dolor sit amet etza Kuaschwanz kimmt Watschnbaam Haferl auf der Oim, da gibt’s koa Sünd back mas nia need jo mei is des schee Ohrwaschl. Measi und sei am acht’n Tag schuf Gott des Bia sodala hoggd am acht’n Tag schuf Gott des Bia.

Zentriert mit 100% Bild

Ich bin ein zentrierter Fließtext mit 100% breitem Bild (steht immer über dem Text). Bavaria ipsum dolor sit amet etza Kuaschwanz kimmt Watschnbaam Haferl auf der Oim, da gibt’s koa Sünd back mas nia need jo mei is des schee Ohrwaschl. Measi und sei am acht’n Tag schuf Gott des Bia sodala hoggd am acht’n Tag schuf Gott des Bia.