---
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
--------------

  [   ###   Linked title: 16:9 format

 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [   ###   Linked title: 16:9 format

 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) ---

  [   ###   Linked title: Square format

 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [   ###   Linked title: Square format

 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) [   ###   Linked title: Square format

 ](https://www.toujou.de/service/element-library/card-elements/image-card-description/) ---

 Step by step guide
------------------

   ### Create image card

- Click on the **+ Content** button to create any card element.
- In the *Card Elements* tab, select the element of your choice.

  ### Insert images

- Click on the **Add image** button.
- Select an image file from your file list or upload a file to the appropriate folder.

  ### 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/)