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.
page = PAGE
page.10 = COA
page.10.stdWrap.wrap = <div style="max-width: 800px; margin: 2em auto;">|</div>
page.10.10 = TEXT
page.10.10.value (
<div style="width: 300px;">
<svg> *** TYPO2 LOGO *** </svg>
</div>
)
page.10.20 = CONTENT
page.10.20 {
table = tt_content
select {
orderBy = sorting
where = {#colPos}=0
}
}Buttons - new
Beispielseite zu den Button-Varianten – gefüllt und mit Rahmen, in allen Theme-Farben und Größen.
Der Button ist ein eigenes Inhaltselement: Beschriftung kommt aus der Überschrift, das Ziel aus dem Header-Link. Aussehen, Größe und Verhalten steuert das FlexForm. Diese Seite spielt die…
Layout#Tag 2
Cards
Beispielseite zu den Card-Varianten: mit Bild oben, horizontal, im Raster und als Card-Group.
Karten liegen als eigene Elemente in einem Card Wrapper. Der Wrapper entscheidet über die Anordnung – Gruppe, Deck, Masonry, Slider oder Flipper – die Karte selbst über Bild, Button, Rahmen und…
Layout#Tag 2
Slider
Beispielseite zum Slider – mit und ohne Beschriftung, mit Indikatoren und unterschiedlichen Überblendungen.
Zwei Bauarten: der Carousel Container nutzt Bootstraps eigenes Carousel, der Swiper Container die Swiper-Bibliothek. Beide nehmen dieselben Slide-Elemente auf. Wichtig für den Test sind die…
Gestaltung#Tag 2#Tag 3
Collapse
Beispielseite zu Collapse und Accordion – inklusive der Frage, wann sich Einklappen lohnt und wann es Inhalte versteckt.
Der Collapsible Container nimmt Collapsible-Elemente auf und stellt sie wahlweise als Akkordeon oder als Buttons dar. Jedes Element ist selbst ein Container und kann beliebige Inhalte aufnehmen.
Interaktion#Tag 2
Media Object
Beispielseite zum Media Object: Bild links oder rechts, mit unterschiedlichen Ausrichtungen.
Bild und Text nebeneinander, ohne Grid. Das FlexForm kennt nur zwei Schalter: auf welcher Seite das Bild steht und ob es eine abgerundete Kante bekommt. Genau dieses Element ist heute früh mit…
Gestaltung#Tag 2#Tag 3
Modal
Beispielseite zum Modal – Größen, zentrierte Darstellung, scrollbarer Inhalt und die Frage, wann ein Dialog angemessen ist.
Der Modal Container erzeugt einen Auslöser – Button oder Link – und den Dialog dahinter. Der Inhalt des Dialogs ist gewöhnlicher Seiteninhalt.
Interaktion#Tag 2
Tabs
Beispielseite zu Tabs: waagerecht und senkrecht, als Reiter oder Pills, mit Tastaturbedienung über die Pfeiltasten.
Der Tab Container nimmt Tab-Elemente auf, jedes Tab-Element ist wiederum ein Container für beliebigen Inhalt. Die Überschrift des Tab-Elements wird zur Reiterbeschriftung.
Interaktion#Tag 2
Toasts
Beispielseite zu Toasts – Position, Stapelung, automatisches Ausblenden und Abgrenzung zum Modal.
Toasts sind kurze Einblendungen. Der Toast Container legt die Position auf dem Bildschirm fest – und mit dem Schalter multipleToast, ob er mehrere Toast-Elemente stapelt oder einen einzelnen Toast aus…
Interaktion#Tag 2