--- title: "Elemente: Teaser & Karten & Collections" url: "https://karriere.th-nuernberg.de/elemente-teaser-karten-collections/" image: "https://takemoto-kazuhiro.toujou.website/_assets/processed/UuILlJVGKZOnPZmcVh3NX2YpymcS2_6YfaGAx4bey6I/q:85/w:1024/h:768/fn:Y3NtX0NoZW1pZS1MYWJvcl8xMV9kN2Q4ZWYxMDIz:t/cb:6f51c70848b4c8e7aea159ff32099cc80961a678/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQ2hlbWllX0xhYm9yL0NoZW1pZS1MYWJvcl8xMS5qcGc" date: 2025-02-19 modified: 2025-02-19 lastUpdated: 2025-02-19 --- # Elemente: Teaser & Karten & Collections 1. [Karriere](https://karriere.th-nuernberg.de/) 2. [Elemente: Teaser & Karten & Collections](https://karriere.th-nuernberg.de/elemente-teaser-karten-collections/) Auf dieser Seite Teaser & Cards & Collections ------------------------------------ Auf dieser Seite werden die verschiedenen Elemente vom Typ “**Teaser**” und “**Cards**” und “**Collections**” erklärt. Es handelt sich dabei um Vorschau-Elemente auf prominente Weise auf andere Seiten verweisen/verlinken. ### Teaser-Elemente ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/iTD4N8sjzsu3tQxhw1srvKa3lSc4pdzp7jYnPuPpYxw/q:85/c:4724:2916.049382716:fp:0.5:0.5/rt:force/w:459/h:283/fn:Y3NtX0JpYmxpb3RoZWtfMDFfMzdjMjA3ZmI4Nw:t/cb:fb209312bd1d0744c29ba97836ffb0784ef87ed3/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAxLmpwZw "Bibliothek") **Cinema-Teaser 33% width, right** ---------------------------------- Dieses Element besitzt neben Text auch die Möglichkeit Medien einzubinden. Die Medien werden immer mit 33% Breite des Layouts abgebildet. Es ist auch ein automatisches Scrollen möglich. 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. ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/zW0UQ6ZemjhMo2b1An2ljTWgaWWYTBEn8neAIUFDJ7I/q:85/w:593/h:445/fn:Y3NtX0JpYmxpb3RoZWtfMDFfODU0NmUwNWI1Yw:t/cb:fb209312bd1d0744c29ba97836ffb0784ef87ed3/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAxLmpwZw "Bibliothek") Bildunterschrift **Media-Teaser 50% width, right** --------------------------------- Dieses Element besitzt neben Text auch die Möglichkeit Medien einzubinden. Die Medien werden immer mit 50% Breite des Layouts abgebildet. 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. - ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/quijI4GA6rm4ehZQ09HhRFQnaqnbjUygvrOcriNGDks/q:85/c:4724:2916.049382716:fp:0.5:0.5/rt:force/w:448/h:277/fn:Y3NtX0xlcm5yYXVtXzAxXzkzMDdkYTllMDQ:t/cb:0ab3efb9ac20a5a2103e9c5449d685b1b4534f01/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvTGVybnJhdW0vTGVybnJhdW1fMDEuanBn "Lernraum") **Image Teaser Slider left/right** ---------------------------------- Dieses Element **verbindet die Funktion “Text mit Bild” und dem “Slider”**. Sprich es können Slider-Elemente immer mit passenden Text angelegt werden. Text und Bild werden dabei immer gleichmäßig Links/Rechts aufgeteilt (50% Breite pro Spalte) Dies hier ist beispielsweise das Feld Beschreibungstext im ersten Teaser Es kann auch ein automatisches Sliden eingestellt werden - ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/P3Ou3Y4qKXhGomFdeke8xs7WJuCL08BGO6hL3Ra6sjM/q:85/c:4724:2916.049382716:fp:0.5:0.5/rt:force/w:448/h:277/fn:Y3NtX0xlcm5yYXVtXzA1XzNlMTYzODAwZTA:t/cb:840163946412024c239ecdcd44824768dca5b130/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvTGVybnJhdW0vTGVybnJhdW1fMDUuanBn "Lernraum") **Image Teaser Slider left/right** ---------------------------------- Dieses Element **verbindet die Funktion “Text mit Bild” und dem “Slider”**. Sprich es können Slider-Elemente immer mit passenden Text angelegt werden. Text und Bild werden dabei immer gleichmäßig Links/Rechts aufgeteilt (50% Breite pro Spalte) Dies hier ist beispielsweise das Feld Beschreibungstext im zweiten Teaser Es kann auch ein automatisches Sliden eingestellt werden von ### Teaser-Karte-Elemente / Cards **Image & Content cards** ----------------------------- Element zur **Karten/Kachel-Darstellung von Seiten**. Anders als bei der Liste können hier die Bilder in den Kacheln selbst gewählt werden. Bei **Image-Cards** kann nur ein Bild + Bildunterschrift + Link hinterlegt werden. Bei den **Content-Cards** kann zusätzlich ein Beschreibungstext (der Formatierungen enthalten kann) angelegt werden. [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/nMdMzBvB9Suxr5AzZ70xDfFNU4GwAaAFwDs2Ip9jhXg/q:85/c:4304.7449999999:2657.25:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtX0JpYmxpb3RoZWtfMDFfODk2OWJmYTFjMw:t/cb:fb209312bd1d0744c29ba97836ffb0784ef87ed3/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAxLmpwZw "Bibliothek") ### Two-Image Card (Teaser-Karte mit Bild 16:9) ](https://karriere.th-nuernberg.de/stellenangebote/stellenangebote-beschaeftigte/) [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/tzF8T71tRtvDfjoc1FGjfAWSAiX1XvX_2Fxt0723ww0/q:85/c:4304.7449999999:2657.25:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtX0JpYmxpb3RoZWtfMDNfYjQ2MzNhNmIwYg:t/cb:0a7297ef7c669ebdb289b41f46eeea8fc56b0a81/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAzLmpwZw "Bibliothek") ### Karte 2 (Möglich 1-4 Karten) ](https://karriere.th-nuernberg.de/stellenangebote/stellenangebot-professoren/) [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/nFx0jm94QonXkXp4uACZjX36tzK6pT1EH9Us1D_u5go/q:85/c:4304.7449999999:2657.25:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX0JpYmxpb3RoZWtfMDFfZDU3NjBhYTEzOQ:t/cb:fb209312bd1d0744c29ba97836ffb0784ef87ed3/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAxLmpwZw "Bibliothek") ### Content Card I Text in CCI Zu "Hinweise" ](https://karriere.th-nuernberg.de/stellenangebote/stellenangebote-beschaeftigte/) ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/VCydVfsH5g3MFTKRVGdimOStoNP-X0dKu82PMgiXZhU/q:85/c:4304.7449999999:2657.25:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX0JpYmxpb3RoZWtfMDZfZGI0Mjc0N2FjYQ:t/cb:c5f534d6c31f53327f9fc37912a082d741236788/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzA2LmpwZw "Bibliothek") ### Content Card II Text muss ausgefüllt sein Mehr zu Hinweisen **Imagecard cover slider** -------------------------- Bei diesem Element können bis zu 5 Verlinkungen (wie Teaser-Karten) angelegt werden. Die Darstellung ist relativ schmal. Bei mobiler Darstellung können die Karten entsprechend durchgeslided werden. - [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/c4AT1OEm_VY-42F-s0dL9YUlk_-IKikAjdyuVNDaQLQ/q:85/c:1992.9375:3214.4153225806:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpYmxpb3RoZWtfMDdfNzljYWM2Yjc2Zg:t/cb:90a0bdcd14550c275a33ede9df77abd838d6658c/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzA3LmpwZw "Bibliothek")### Karte 1 ](https://karriere.th-nuernberg.de/) - [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/velZ1rkZCQeguQ3ZmSgn26GuTL6UJvSvpCud5RmR8xM/q:85/c:1992.9375:3214.4153225806:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpYmxpb3RoZWtfMDJfZTZmZjJiMDIxMA:t/cb:482ca6986cb3a27f325e343b05787376e053201e/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzAyLmpwZw "Bibliothek")### Karte 2 ](https://karriere.th-nuernberg.de/) - [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/0kVRuiME2GEk4xlUlVKXyagvDwm-QMdWIb_R0kiB0Tg/q:85/c:1992.9375:3214.4153225806:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpYmxpb3RoZWtfMDVfODRiZDg5ZjY2Yw:t/cb:e37495f32d9510c01dfc8bf3d596127737380c66/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQmlibGlvdGhlay9CaWJsaW90aGVrXzA1LmpwZw "Bibliothek")### Karte 3 ](https://karriere.th-nuernberg.de/) - [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/o5xgxDpa636LdBynPA-1oYr-coREeoTI-Xq8ehUTcxk/q:85/c:1992.9375:3214.4153225806:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0NoZW1pZS1MYWJvcl8wMV9hZWY0NjAwOGM0:t/cb:ce93d9c6a3edefcb58a1939cc52ef9a6f321ead8/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQ2hlbWllX0xhYm9yL0NoZW1pZS1MYWJvcl8wMS5qcGc "Chemie Labor")### Karte 4 ](https://karriere.th-nuernberg.de/) - [ ![](https://takemoto-kazuhiro.toujou.website/_assets/processed/mM5k_w_VQmLHTvyC4DxrOs6_IRcZTxwA7BpPEQ2Oa4s/q:85/c:1992.9375:3214.4153225806:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0NoZW1pZS1MYWJvcl8xMF9mYjgxZjFjNDA3:t/cb:1b0fb21be266fc5bff8cc3bb38b5bac14c3e6e45/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC9PaG1fTWVkaWVucG9vbC9CaWxkZXIvQ2hlbWllX0xhYm9yL0NoZW1pZS1MYWJvcl8xMC5qcGc "Chemie Labor")### Karte 5 ](https://karriere.th-nuernberg.de/) **Selected pages as card collection** ------------------------------------- Element zur **automatischen Karten-Darstellung von Seiten** - ähnlich wie “Liste”. Es gibt keine Begrenzung bzgl. der Anzahl von Seiten die aufgelistet werden - das reguläre Desktop-Layout funktioniert in einem 4-Spalten Raster (im responsive Modus werden die Spalten auf 2 oder 1 reduziert, je nach Display-Breite). Es können auch News oder Events aufgeführt werden (erkennbar auch an unterschiedlichen Icons in den Karten). Wichtig: Die Daten welche abgebildet werden (Bild und Text) werden nicht im Element selbst gepflegt sondern beziehen sich aus den Seiteneigenschaften der verlinkten Seite. *>> Seitentitel, Seiten-Zusammenfassung und Seiten-Bild in den Seiteneigenschaften* - ### Hinweise Hinweise zur Technik und redaktionellen Arbeiten auf den Microsites der Ohm. [ Weiterlesen ](https://karriere.th-nuernberg.de/hinweise/) - ### Layoutaufbau [ Weiterlesen ](https://karriere.th-nuernberg.de/layoutaufbau/) - ### Karriere [ Weiterlesen ](https://karriere.th-nuernberg.de/) - ### Studienwahl-BBQ an der Ohm Bildungsveranstaltung 04.07.2025, 14:00 Uhr - 17:30 Uhr Geplant [ Weiterlesen ](https://studium.th-nuernberg.de/studienwahl-bbq/) Listen-Elemente / List ------------------------ **Selected pages as list** -------------------------- Element zur **Listen-Darstellung von Seiten**. Gehört zum Typ “Teaser” als auch “List”. Es können Seiten, News oder Events aufgeführt werden (erkennbar auch an unterschiedlichen Icons in den Karten). Es gibt keine Begrenzung bzgl. der Anzahl von Seiten die aufgelistet werden - es empfiehlt sich aber für die Übersichtlichkeit des Users max. 3-4 Seiten aufzuführen. Wichtig: Die Daten welche in der Liste abgebildet werden (Bild und Text) werden nicht im Element selbst gepflegt sondern beziehen sich aus den Seiteneigenschaften der verlinkten Seite. *>> Seitentitel, Seiten-Zusammenfassung und Seiten-Bild in den Seiteneigenschaften* 1. ### Ansprechpartner [ Weiterlesen ](https://karriere.th-nuernberg.de/ansprechpartner/) 2. ### Karriere [ Weiterlesen ](https://karriere.th-nuernberg.de/) 3. ### Studienwahl-BBQ an der Ohm Bildungsveranstaltung 04.07.2025, 14:00 Uhr - 17:30 Uhr Geplant [ Weiterlesen ](https://studium.th-nuernberg.de/studienwahl-bbq/)