--- title: Card elements of the toujou element library url: "https://www.toujou.com/service/element-library/card-elements/" description: "All card elements: single column, two, three, four columns; with pictures, text & buttons. Previews, instructions and behavioral description." date: 2019-01-10 modified: 2022-09-27 --- # Card elements of the toujou element library 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Card elements](https://www.toujou.de/service/element-library/card-elements/) **The toujou element library** ------------------------------ Card elements ============= With toujou you will find preconfigured elements that give you the freedom to illustrate content according to your needs. The appearance is controlled centrally and offers responsive behaviour. Buttons, links, and text are all controlled by the editor. **Image cards 16:9:** [One](#c1002578) | [Two](#c1002580) | [Three](#c1002582) | [Four ](#c1002584) **Image cards square:** [One](#c1002586) | [Two](#c1002588)| [Three](#c1002590) | [Four](#c1002592) **Content cards vertical:** [One](#c1002594) | [Two](#c1002596) | [Three](#c1002598) | [Four](#c1002600) **Content cards horizontal:** [One](#c1002602) | [Two](#c1002604) ### Manual On this page you will find all the card elements available in toujou. We’ve used dummy text in the library to prevent confusion. For detailed instructions, click on the sample card element to get the element description. --- Overview ---------- ### One image card 16:9 [ ### One image card 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Two image cards 16:9 [ ### Two image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Two image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Three image cards 16:9 [ ### Three image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Three image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Three image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Four image cards 16:9 [ ### Four image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 16:9 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### One image card square [ ### One image card, 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Two image cards square [ ### Two image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Two image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Three image cards square [ ### Three image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Three image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Three image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### Four image cards square [ ### Four image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ### Four image cards 1:1 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- ### One content card vertical [### One vertical content card One content box with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### Two content cards vertical [### Two vertical content cards Two content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Two vertical content cards Two content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### Three content cards vertical [### Three vertical content cards Three content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Three vertical content cards Three content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Three vertical content cards Three content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### Four content cards vertical [### Four vertical content cards Four content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Four vertical content cards Four content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Four vertical content cards Four content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Four vertical content cards Four content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### One content card horizontal [### One horizontal content card One content box with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### Two content cards horizontal [### Two horizontal content cards Two content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [### Two horizontal content cards Two content boxes with an image, text and link button. See description ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- ### Imagecard Cover Slider - [ ![Zwei kleine Figuren stehen vor einem großen Bildschirm, der eine Webseite mit Informationen über TYPO3 zeigt.](https://www.toujou.de/_assets/processed/5aRgE6yjMo3KbuqpFi0coKkUSeKhW_WipzMnNZGEh-s/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHNfMmE5NjZmYzFmZQ:t/cb:8d218074806083852dab8bb96efbe9568d7ed93c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHMucG5n)### All tutorials at a glance ](https://www.toujou.com/service/tutorials/) - [ ![In einer Büroszene steht eine Frau neben dem Schreibtisch, im Hintergrund ist ein Sofa zu sehen](https://www.toujou.de/_assets/processed/-bgDqfcX92RITSTOEoEsx_qiluDaDRSziOAwkOyNNvQ/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0xpc2FfSW50ZXJ2aWV3X2FhMThmMjBhOTA:t/cb:e95d4850e2c7d7cfaf0d26091e72b53938dd70a6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0xpc2FfSW50ZXJ2aWV3LmpwZw)### toujou insights with Lisa ](https://www.toujou.com/blog/interview-i-would-like-more-people-to-put-more-emphasis-on-a-good-website/) - [ ![Ein gemütlicher Raum mit einem Schreibtisch, wo eine Person arbeitet, während eine andere sich und eine Pflanze im Hintergrund steht.](https://www.toujou.de/_assets/processed/81bea03xNdL-UikUsEGq6T1o_8ChSOfHMt_KG0LpaME/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlXzk0ZmU1Mjg3Yzc:t/cb:5f1cd16c10c25895a1fef11cf127bb5c3546bb22/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlLnBuZw)### Presenting the service team ](https://www.toujou.com/service/support/) - [ ![Ein moderner Computerbildschirm zeigt verschiedene soziale Medien-Icons auf einem schwarzen Hintergrund.](https://www.toujou.de/_assets/processed/v6RVSmAUG4RH9AItOJ5iW7rL5mpYsFSQ3kIxAqBhES0/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyXzYzZmZkZTJiY2M:t/cb:c084f9f4faf54f7566a3bdc13f56207f9c28dc99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyLmpwZw)### Social media bar on the website ](https://www.toujou.com/service/element-library/widgets/social-media-bar/) - [ ![](https://www.toujou.de/_assets/processed/YU9sACVyVsRTzBixz4PXhzNtPIaRK9iaUqLd_Q2MokA/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1NjaHVsdW5nZW5fdG91am91X2I4NmRmMmUyN2U:t/cb:b949caee4f551ea0d5f30c2ff399ffee763e4d61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1NjaHVsdW5nZW5fdG91am91LmpwZw)### All toujou features ](https://www.toujou.com/features/) - [ ![](https://www.toujou.de/_assets/processed/bm5H1U-B5E_XUmQvJ7zHwVGYyxRtD9qtRrUyBbJMWlo/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1Nlb0x1cGVfSW5zdGFfYTYzOWFiYjYyOA:t/cb:0ef86ae1114d17969c95d75300f858f4e226fb83/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1Nlb0x1cGVfSW5zdGEuanBn)### SEO with Yoast for toujou ](https://www.toujou.com/service/tutorials/yoast-seo/) - [ ![](https://www.toujou.de/_assets/processed/NoxIiGJSzgfKDXy1lYZpr5E94ubboIyBovwY1N3HWEE/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnRfYTVkODNmZGRkYg:t/cb:539f18a7c81c965433613409f16e091d64c497fd/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjFfMDhfMTVfSW5zdGFncmFtLUtvbnRvX2dlc3BlcnJ0L0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnQucG5n)### Create a blogpost ](https://www.toujou.com/service/tutorials/blog-administration/) - [ ![](https://www.toujou.de/_assets/processed/53zdHpTMCFnPj2COagOiVfBhr3TQv97LbIbEgom12Go/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGFfYzk3NjE1MTBjZA:t/cb:5a13af846e16ee228a22cc49f61b62c721cb008e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGEuanBn)### Analytics with toujou ](https://www.toujou.com/service/toujou-set-up/analytics-settings/) - [ ![Eine digitale Benutzeroberfläche wird von zwei Figuren auf einer Hebebühne betrachtet, während sie an einem Projekt arbeiten.](https://www.toujou.de/_assets/processed/ntuG6zWQccrnAppLfPmClOcaNOuoWzSHJ5rXpGalQYg/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfZjliNWRmZmM0OA:t/cb:1305e23ee83a60de5f6c36c46c61c8feffa50315/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnkucG5n)### All elements at a glance ](https://www.toujou.com/service/element-library/) - [ ![Auf einer blauen Oberfläche liegt ein weißes Blatt Papier, das wichtige Informationen und ein grünes Häkchen enthält.](https://www.toujou.de/_assets/processed/dSqS3SVtptLPriDHHPWArbbecuEvQk4czUbCoRvKQgw/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMV9iZWUwNmM1ZGUy:t/cb:402e7d12441c151f7a973b016eefc808b140df99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMS5wbmc)### Create forms in toujou ](https://www.toujou.com/service/element-library/widgets/forms/) - [ ![](https://www.toujou.de/_assets/processed/gT9qCVGXfcexMaAhQT6mbKOxRylMV7-u1yG-YlsuLZE/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpbGRlcl9pbV9CbG9nZWludHJhZ18wNTVkYTQwODM0:t/cb:45a04214c9d3ca836bdb398d2fefd962fa6e26c5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0JpbGRlcl9pbV9CbG9nZWludHJhZy5qcGc)### How to start in toujou ](https://www.toujou.com/service/toujou-set-up/) - [ ![](https://www.toujou.de/_assets/processed/1V2nrsis8iX758cnunsFc5CaoRpuMxsZZBiG5OpYs94/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0NsaWNrTWVldF9taXRfdG91am91X2YzMzQxZmEwZWM:t/cb:9e751c1305a78f312e2be8b3902bfe909f58eb93/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0NsaWNrTWVldF9taXRfdG91am91LmpwZw)### Display events in toujou ](https://www.toujou.com/service/tutorials/pages-navigation/events-in-toujou/) [See description ❯](https://www.toujou.de/service/element-library/card-elements/imagecard-cover-slider/) ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)