Foldblock (Readmore)
Beschreibung <html> .class
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus.
Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis.
Beschreibung <html> .class
-
Lorem ipsum
Dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero.
-
Curabitur ullamcorper
Ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
-
Faucibus tincidunt
Nam quam nunc, blandit vel, luctus pulvinar.
Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Fixed closable Banner
exampleBannerHidden gelöscht oder
sein Wert ungleich 1 gesetzt werden.
Der Banner .fixed-banner kann durch Zufügen der Klassen .fixed-banner-top oder
.fixed-banner-bottom wahlweise am oberen oder unteren Fensterrand positioniert werden.
Formulare
Beschreibung <html> .class
Beispielformular
Beim Validieren kann die Error-Class (z.B. .is-invalid) des jeweiligen fehlerhaften Elements auf ein
Parent-Element des fehlerhaften Elements geklont werden. Hierfür wird das Attribut data-clone-error="..."
mit einem Selektor für ein Parent-Element genutzt (z.B. data-clone-error="[data-clone-error-target]", wobei
[data-clone-error-target]" das Parent-Element ist).
Durch Zufügen der Klasse .alt-required auf dem <form>-Element ändert sich
die Darstellung der Pflichtfelder in einen Kreis mit Ausrufezeichen anstatt eines Sternchens (*). Hierduch
können Konflikte mit übrigens Fußnoten innerhalb der Seite vermieden werden, sofern diese ebenfalls Sternchen als Kennzeichnung
nutzen.
Lorem Ipsum Bestellen Formular
Beschreibung
Lorem Ipsum Bestellen Banner
Als Grundlage wird ein statischer Banner der Klasse .banner-st-2 genutzt, in welchem sich ein
<div> mit farbig transparentem Hintergrund .bg-white-transparent
und schwarzer Textfarbe .text-black befindet. Zum Ändern der Farbigkeit können
.bg-{ state }-transparent oder .bg-{ state }-opaque sowie
.text-{ state } genutzt werden, z.B. .bg-primary-transparent und
.text-white.
Ticket Formular (REST-API)
Beschreibung
Ticket Formular Banner (REST-API)
Beschreibung
Gallery
Beschreibung <html> .class
Owl-Carousel
Beschreibung <html> .class
Basic Version
Beschreibung <html> .class
Individual options
Mittels data-fn-options="{ ... }" (z.B. data-fn-options="{ nav: false, autoplay: false }") können bei jedem einzelnen Slider individuelle Optionen übergeben werden.
Video modal
Beschreibung <html> .class
Basic Version
Ein Video-Modal kann einen oder mehrere Trigger-Elemente haben, von denen aus es gesteuert wird. Bspw. können unterschiedliche
Buttons das verknüpfte Video zu unterschiedlichen Timecodes öffnen. Hierfür muss das Trigger-Element über ein Attribut
data-fn-options="{ iframeTimecode: '0m09s' }" verfügen, wobei 0m09s der Timecode
ist; also 0 Minuten und 9 Sekunden.
aria-controls="..." auf die selbe ID des zugehörigens Video-Modals, wohingegen das Video-Modal mittels
aria-labelledby="..." auf die ID des ersten Trigger-Elements zeigt.
One more basic Version
Beschreibung <html> .class
Video-Modal mit Screenshot und Play-Button
Beschreibung <html> .class
Video-Modal mit großem Screenshot und Play-Button
Durch den zweiten Parameter 2010 (nicht wie üblich 2000) wird das Artikelbild in maximaler Auflösung verwendet. Dieses
enspricht i.d.R. der Auflösung des Videos.
Mehrere Video-Modals mit Screenshot und Play-Button
Beschreibung <html> .class
-
Dietmar Dahmen – Superhelden des Wandels
-
Christian Otto Kelm – Amazon SEO und der vergessene Kunde!?
-
Lorem Ipsum Online-Händler-Kongress 2017
Youtube Video-Modal
Um einen bestimmten Zeitpunkt im Video beim Öffnen direkt anzuspringen, muss das Trigger-Element über ein Attribut
data-fn-options="{ iframeTimecode: '67' }" verfügen, wobei 67 der Timecode
gemessen in Sekunden ist (anders als bei Vimeo); also 1 Minute und 7 Sekunden.
CallFromAdmin=1 bzw. eine Admin-Session benötigt, um den (nicht sichtbaren) Artikel anzuzeigen.
Video-Screenshot Fullwidth-Banner
Die Elemente .arrow-down-Elemente (Pfeil oben nach innen, Pfeil unten nach außen) können bei Bedarf entfernt werden.
Chequered Banner
Beschreibung <html> .class
.col-6, welche .col-8
und .col-4 enthält) kann es – abhänging von der Bildschirmauflösung und ggf.
Browsereigenschaften – zu Rundungsfehlern bei der Berechnung der Spaltenbreite kommen, woraus sich vertikal verlaufende
weiße Linien (bzw. in Hintergrundfarbe) zwischen zwei Spalten bzw. Bildern ergeben können. Durch Zufügen der Klasse
.cb-fix-to-right auf derjenigen Col, ab deren rechtem Rand sich eine solchen Linie befindet,
kann das Problem wahrscheinlich gelöst werden.
Chequered Banner mit und ohne Zitat
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Lorem ipsum dolor sit amet, consectetuer elit. Aenean commodo ligula eget dolor. Aenean massa.
Rounded Figure als Chequered Banner
Beschreibung
Zoomable image
Beschreibung <html> .class
Grid floated zoomable image
Beschreibung
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel.