--- title: Image card description url: "https://www.toujou.com/service/element-library/card-elements/image-card-description/" date: 2019-06-14 modified: 2022-09-27 --- # Image card description 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/) 5. [Image card description](https://www.toujou.de/service/element-library/card-elements/image-card-description/) Image cards =========== One or multiple linked image cards. Choose between 16:9 and square format. Item-IDs: 04-001 | 04-002 | 04-003 | 04-004 | 04-005 | 04-006 | 04-007 | 04-008 [Sample views](#c1005936) [Step by step guide](#c1005938) [Screen adaptation](#c1005940) ![](https://www.toujou.de/_assets/processed/JRheH6G8cAdEIq2jpd5vgh64mtw3vrumW-hPk_3rT_0/q:85/w:433/h:108/fn:Y3NtXzA0X2ltYWdlX2NhcmRzX2FiYjFkMzExYWE:t/cb:0bddc46ed8f82ed096d419e147248d637494311b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDRfaW1hZ2VfY2FyZHMucG5n) --- Sample views -------------- [ ![](https://www.toujou.de/_assets/processed/urVT_W79qjimGY5cDQpsSZ9b1h5UT_ijELSAwN3AP_8/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtX2RlbW9fMDVfZGRlMTcyNmI5NA:t/cb:e2b2d31c4fe4db136f6055bbe7500301aba6118d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA1LmpwZw) ### Linked title: 16:9 format ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ![](https://www.toujou.de/_assets/processed/_WvQTCoToWODhlaC5u90qRDSOxljbm92gtMhrXVU2EM/q:85/c:1749.6:1080:fp:0.5:0.5/rt:force/w:325/h:201/fn:Y3NtX2RlbW9fMDZfNjNjMjQ5OTc3OA:t/cb:a2cd21e93660599767b5483892eae8d0eef10416/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA2LmpwZw) ### Linked title: 16:9 format ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- [ ![](https://www.toujou.de/_assets/processed/xMwgQU0GXcxZlbL5jnwJqB9V0F0F8RFrhmWIJL7bkx4/q:85/c:1440:1440:fp:0.5:0.5/rt:force/w:336/h:336/fn:Y3NtX2RlbW9fMDFfMGYwZGFhODUyYw:t/cb:6ef5730217ea1a3cc74c39083426314a69fd0593/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzAxLmpwZw) ### Linked title: Square format ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ![](https://www.toujou.de/_assets/processed/AIodrwORzD0R5WsOnAhDiELBjMMNjUC6Y5OskX5Ov3s/q:85/c:1440:1440:fp:0.5:0.5/rt:force/w:336/h:336/fn:Y3NtX2RlbW9fMDNfZDgxYjVkYzM2OA:t/cb:6b1497eb1f17c22d74e8bd016780c5531d0123ba/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzAzLmpwZw) ### Linked title: Square format ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [ ![](https://www.toujou.de/_assets/processed/IcwnuWC1ifo70emGgCl3hF3bvoplc8M-QzWVjkwrZbY/q:85/c:1440:1440:fp:0.5:0.5/rt:force/w:336/h:336/fn:Y3NtX2RlbW9fMDdfNGY0NjhjNTU4ZA:t/cb:e82f8adb21395de668d29dba54362adc3a742d55/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA3LmpwZw) ### Linked title: Square format ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) --- Step by step guide ------------------ [ ![](https://www.toujou.de/_assets/processed/wPcrnL-28LQmHMXGUd8Ya8QUbVfEb3lHn2eLcJ5h6nI/q:85/w:432/h:270/fn:Y3NtXzA0XzAxX0VsZW1lbnRfd2FlaGxlbl8zMDVjMzIxNjZi:t/cb:3387413d9a8c79ff694900acab3885c04824dd4f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvMDRfMDFfRWxlbWVudF93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/04_01_Element_waehlen.png) ### Create image card - Click on the **+ Content** button to create any card element. - In the *Card Elements* tab, select the element of your choice. [ ![](https://www.toujou.de/_assets/processed/G_osAu3b9GeoZ9lRS8XxzFuJesdPqH0R6qzMxCYQS6U/q:85/w:432/h:270/fn:Y3NtXzA0XzAyX0JpbGRfZWluZnVlZ2VuX2Y5OWUxMmFiODk:t/cb:0bab96b6b95ae79bdb53840eda23593b7b990409/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvMDRfMDJfQmlsZF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/04_02_Bild_einfuegen.png) ### Insert images - Click on the **Add image** button. - Select an image file from your file list or upload a file to the appropriate folder. [ ![](https://www.toujou.de/_assets/processed/EQXus8aPjtqFXmiQjyMdDnPlYqJEX90pWGU43PwBm60/q:85/w:432/h:270/fn:Y3NtXzA0XzAzX1RpdGVsX0xpbmtfNTRlMDZjYzVhYg:t/cb:f85677fd0f0d162bbd2659f190920c8a0aca4fe8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvMDRfMDNfVGl0ZWxfTGluay5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/04_03_Titel_Link.png) ### Insert link & title - Enter a **Title** into the title mask. - Click on the **Link** button to insert a link. - Select from any of the available tabs to link within subpages, elements or to an external URL. --- Screen adaptation ------------------- ***Image cards* are single or multiple buttons with different options for hover effects (depending on your theme). They consist of an image with an automatic aspect ratio of 16:9 or 1:1 and a caption. Each link turns the entire element into a button.** **Responsive behaviour**: If there is not enough space to display any three or four cards next to each other they will be displayed two per row. On small devices, all left-to-right cards are displayed above each other from top to bottom. --- Linked topics ------------- [toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description. [Image editing](https://www.toujou.com/service/tutorials/page-content/text-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)