--- title: Content card description url: "https://www.toujou.com/service/element-library/card-elements/content-card-description/" date: 2019-06-14 modified: 2022-09-27 --- # Content 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. [Content card description](https://www.toujou.de/service/element-library/card-elements/content-card-description/) Content cards ============= Single or multiple content cards with a link, a title, and text underneath an image. Item-IDs: 04-009 | 04-010 | 04-011 | 04-012 | 04-013 | 04-014 [Sample views](#c1005947) [Step by step guide](#c1005949) [Screen adaptation](#c1005951) ![](https://www.toujou.de/_assets/processed/vWy1YkLJYuCycJ1uPFaZnrt-J5OMGNNy8ZEY0r0d7oQ/q:85/w:433/h:54/fn:Y3NtXzA0X0NvbnRlbnRfQ2FyZHNfYTBlNDM5ZWYyNw:t/cb:1dad0ef8371fa000bf3e5f61912d43508b54e20e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDRfQ29udGVudF9DYXJkcy5wbmc) --- Sample views -------------- [ ![](https://www.toujou.de/_assets/processed/SyQJxbX9J1_DIeqWJKzU9h5KYr6fqgrrd30pmviYhr4/q:85/c:1920:1185.1851851852:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX2RlbW9fMDFfOWExYzA5NTMxOQ:t/cb:6ef5730217ea1a3cc74c39083426314a69fd0593/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzAxLmpwZw) ### I am a title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I am a link ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [ ![](https://www.toujou.de/_assets/processed/L-UhkvaL6LW4Xc_OajcrYohm8UoHBL61iB4E7lBghgc/q:85/c:1749.6:1080:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX2RlbW9fMDRfMmE0YWY0ZmNjYw:t/cb:d341a5b87235ae104e74616f123b82a6111a3ffd/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA0LmpwZw) ### I am a title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I am a link ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [ ![](https://www.toujou.de/_assets/processed/tvO2zhuErpNWeJTkj8nVXsNe7Y68oQLSHMrdIyoHaFE/q:85/c:1749.6:1080:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX2RlbW9fMDNfMTVjNThjNzE1Mw:t/cb:6b1497eb1f17c22d74e8bd016780c5531d0123ba/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzAzLmpwZw) ### I am a title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I am a link ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- [ ![](https://www.toujou.de/_assets/processed/RdJGku1Ax6RgCeAcqM0ApvEiD3votbFgH6jtuhIwTcI/q:85/c:1440:888.88888888889:fp:0.5:0.5/rt:force/w:312/h:193/fn:Y3NtX2RlbW9fMDdfMWJiMjY5ZWQ2YQ:t/cb:e82f8adb21395de668d29dba54362adc3a742d55/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA3LmpwZw) ### I am a title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I am a link ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) [ ![](https://www.toujou.de/_assets/processed/1R-pnSFAUQfMZsrazad1ud2aolGk5JL84uaesT339a4/q:85/c:1440:888.88888888889:fp:0.5:0.5/rt:force/w:312/h:193/fn:Y3NtX2RlbW9fMDhfNzY5ZWI1YzU0Zg:t/cb:793313de432f68f3915ad6f6e0d0f3b68c08855f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9kZW1vXzA4LmpwZw) ### I am a title Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I am a link ](https://www.toujou.de/service/element-library/card-elements/content-card-description/) --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/Kup_bY9gMsVSsLh67_rVEc04qMWdj2QetghT_Ndh4-8/q:85/w:432/h:270/fn:Y3NtXzA0XzAwMV9FbGVtZW50X3dhZWhsZW5fYzA5ODA4ZDIyNQ:t/cb:31920004e0b7329f6ec7b3ab4e920c8e4cbff819/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDJfQ29udGVudF9jYXJkcy8wNF8wMDFfRWxlbWVudF93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/02_Content_cards/04_001_Element_waehlen.png) ### Create content 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/eLOKksanGDwXEj9ajTdeg0Pn58RyTSsOiNFmhXGFByU/q:85/w:432/h:270/fn:Y3NtXzA0XzAwMl9CaWxkX2VpbmZ1ZWdlbl9iMDg4YTVmNzll:t/cb:bf245f8229d5c81b396b0d790a775da75310577a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDJfQ29udGVudF9jYXJkcy8wNF8wMDJfQmlsZF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/02_Content_cards/04_002_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/_LiGCvch2YqzHaI1rS00_caNQVM9x7ZDTJ8GvnBtHio/q:85/w:432/h:270/fn:Y3NtXzA0XzAwM19UZXh0X2VpbmZ1ZWdlbl9lN2I4NDExZGNi:t/cb:fe927d6339a9f5840236893b80024dda8b1da96a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDJfQ29udGVudF9jYXJkcy8wNF8wMDNfVGV4dF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/02_Content_cards/04_003_Text_einfuegen.png) ### Insert and format text - Paste your text into the editor **or** into each editor per tab from left to right for multiple card elements. - If you copy the text from another file, pay attention to possibly copied formatting. - The text can be formatted directly within the rich text editor, with the help of the menu above the editor. [ ![](https://www.toujou.de/_assets/processed/0kypyUvkcEaZRdu-WX9bx5KRgle1mIpvmjU7csFcgnY/q:85/w:432/h:270/fn:Y3NtXzA0XzAwNF9MaW5rX0xpbmt0ZXh0Xzg0YmU5NmUyZjg:t/cb:fc03c1707e57089fa4d85fcbf75b9ef455174fe9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDJfQ29udGVudF9jYXJkcy8wNF8wMDRfTGlua19MaW5rdGV4dC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/02_Content_cards/04_004_Link_Linktext.png) ### Insert link & button text - Click on the **Link** button to insert a link. - Enter a **Linktext** into mask to name the button. - Select from any of the available tabs to link within subpages, elements or to an external URL. --- Screen adaptation ------------------- *Content cards* are single or multiple buttons with descriptive content. They consist of an image with an automatic aspect ratio, text, and a link. The associated link turns the entire card into a button. Inserting a link is mandatory for the styled link button to appear. **Responsive behaviour**: On small devices, all left-to-right cards are displayed above each other from top to bottom. Images of vertical content cards might be sorted left from the text field the smaller a display becomes. **Worth noting**: - If no image is uploaded, the cards can also be used as a text content button. - If no link is stored, the cards can also be used as a styled content element. No button is displayed. --- 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. [Text editing](https://www.toujou.de/service/tutorials/page-content/text-editing/) [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)