--- title: Card Elements url: "https://www.erschmatt.ch/bibliothek-1/card-elements/" date: 2018-02-07 modified: 2023-05-15 lastUpdated: 2023-05-15 --- # Card Elements 1. [Home](https://www.erschmatt.ch/) 2. [Bibliothek](https://www.erschmatt.ch/bibliothek-1/) 3. Card Elements **Die toujou-Elementbibliothek:** ================================= Cards / "Schaltflächen" ----------------------- In toujou finden Sie vorkonfigurierte Schaltflächen-Elemente mit den notwendigen Freiheiten dort, wo Sie diese brauchen. Das Erscheinungsbild Ihres Textes oder Ihrer Kontaktdaten wird zentral gesteuert. Formate- und Textspalten werden inklusive responsivem Verhalten angeboten. Buttons, Links, Ausrichtung und Textstile werden durch den Redakteur gesteuert. ### Gebrauchsanweisung Auf dieser Seite finden Sie alle in toujou verfügbaren Karten-Elemente. Um nicht mit echten Inhalten verwechselt zu werden, verwenden wir in der Bibliothek Blindtext. Zur detaillierten Nutzungsanleitung gelangen Sie durch Klicken auf das jeweilige Element. --- Alle Card-Elemente im Überblick --------------------------------- **Bild-Schaltflächen im Format 16:9:** [Einfach](#c1578) | [Doppelt](#c556) | [Dreifach](#c554) | [Vierfach](#c552) **Quadratische Bild-Schaltflächen:** [Einfach](#c550) | [Doppelt](#c548) | [Dreifach](#c546) | [Vierfach](#c544) **Vertikale Textkarten mit Bild:** [Einfach](#c542) | [Doppelt](#c540) | [Dreifach](#c538) | [Vierfach](#c1585) **Horizontale Textkarten mit Bild:** [Einfach](#c536) | [Doppelt](#c534) ### Einfache Bild-Schaltfläche, 16:9 [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__b4c2e4971c.jpg) ### Eine Image-Card ](https://www.erschmatt.ch/bibliothek-1/card-elements/one-image-card-169/) ### Doppelte Bild-Schaltfläche, 16:9 [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__b4c2e4971c.jpg) ### Zwei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_07fc9676b3.jpg) ### Zwei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-image-cards-169/) ### Dreifache Bild-Schaltfläche, 16:9 [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__b4c2e4971c.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/3/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__01_975b9d2247.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_07fc9676b3.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-169/) ### Vierfache Bild-Schaltfläche, 16:9 [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__b4c2e4971c.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/3/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__01_975b9d2247.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_07fc9676b3.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-169/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/1/d/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__9ee4e82a55.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-169/) --- ### Einfache Bild-Schaltfläche, Quadrat [ ![](https://www.erschmatt.ch/fileadmin/_processed_/a/9/csm_demo_02_49e2541ddd.jpg) ### Eine Image-Card ](https://www.erschmatt.ch/bibliothek-1/card-elements/one-image-card-11/) ### Doppelte Bild-Schaltfläche, Quadrat [ ![](https://www.erschmatt.ch/fileadmin/_processed_/a/9/csm_demo_02_49e2541ddd.jpg) ### Zwei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/2/e/csm_demo_04_ba225d70e6.jpg) ### Zwei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-image-cards-11/) ### Dreifache Bild-Schaltfläche, Quadrat [ ![](https://www.erschmatt.ch/fileadmin/_processed_/a/9/csm_demo_02_49e2541ddd.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/0/3/csm_demo_06_ffdd1b3894.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/2/e/csm_demo_04_ba225d70e6.jpg) ### Drei Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-image-cards-11/) ### Vierfache Bild-Schaltfläche, Quadrat [ ![](https://www.erschmatt.ch/fileadmin/_processed_/a/9/csm_demo_02_49e2541ddd.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/0/3/csm_demo_06_ffdd1b3894.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/2/e/csm_demo_04_ba225d70e6.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-11/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/0/3/csm_demo_06_ffdd1b3894.jpg) ### Vier Image-Cards ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-image-cards-11/) --- ### Einfache Schaltfläche mit Beschreibung, vertikal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__fb2282fa78.jpg) ### Eine Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/one-vertical-content-card/) ### Doppelte Schaltfläche mit Beschreibung, vertikal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__fb2282fa78.jpg) ### Erste Contentcard Zusammengehörige Schaltflächen sind übrigens immer gleich hoch, sobald sie nebeneinander stehen! zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_f26530f49e.jpg) ### Zweite Contentcard Diese Cards legen sich in mobiler Responsive-Ansicht hierarchisch so von oben nach unten, wie sie von links nach rechts stehen. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-vertical-content-cards/) ### Dreifache Schaltfläche mit Beschreibung, vertikal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__fb2282fa78.jpg) ### Erste Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/3/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__01_b5221a5a01.jpg) ### Zweite Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_f26530f49e.jpg) ### Dritte Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/three-vertical-content-cards/) ### Vierfache Schaltfläche mit Beschreibung, vertikal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/6/csm_Schieder-Schwalenberg_-_107_-_Kahlenbergturm__10__fb2282fa78.jpg) ### Erste Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/7/3/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__01_b5221a5a01.jpg) ### Zweite Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/8/8/csm_Schieder_Schieder-Schwalenberg_f26530f49e.jpg) ### Dritte Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-vertical-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/1/d/csm_Schieder-Schwalenberg_-_2015-08-09_-_Kirche_Wo__bbel__15__1368c12d86.jpg) ### Vierte Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/four-vertical-content-cards/) --- ### Einfache Schaltfläche mit Beschreibung, horizontal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/a/9/csm_demo_02_0f160b7d41.jpg) ### Eine Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/one-horizontal-content-card/) ### Doppelte Schaltfläche mit Beschreibung, horizontal [ ![](https://www.erschmatt.ch/fileadmin/_processed_/2/e/csm_demo_04_814a8ef68f.jpg) ### Erste Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-horizontal-content-cards/) [ ![](https://www.erschmatt.ch/fileadmin/_processed_/0/3/csm_demo_06_988eed6bf4.jpg) ### Zweite Contentcard Lorem Ipsum dolor sit amet, consectetur adipiscing elit. zur Beschreibung ❯ ](https://www.erschmatt.ch/bibliothek-1/card-elements/two-horizontal-content-cards/) --- #### Eine Image-Card [↳ Einfache Bildschaltfläche, 16:9](https://www.erschmatt.ch/bibliothek-1/card-elements/one-image-card-169/) ---