--- title: Content card with text left url: "https://www.toujou.com/service/element-library/combined-elements/elements-description/" date: 2019-08-01 modified: 2022-09-27 --- # Content card with text left 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Combined elements](https://www.toujou.de/service/element-library/combined-elements/) 5. [Elements description](https://www.toujou.de/service/element-library/combined-elements/elements-description/) Combined elements ================= Content or image cards or single blockquotes with content, optional link, and text. Item ID: 09-008 | 09-009 | 09-010 | 09-011 | 09-012 | 09-013 [Sample views](#c1006566) [Step by step guide](#c1006568) [Screen adaptation](#c1006570) - ![Das Bild zeigt eine Benutzeroberfläche mit einem roten und grauen Element, das von mehreren grauen Linien und einem Bildfeld umgeben ist.](https://www.toujou.de/_assets/processed/2b9Jq89SoX6LMyuqM2zX6vxWKIFbalMYKm7levk_Q1E/q:85/w:176/h:176/fn:Y3NtXzA5XzAwOC1Db250ZW50X0NhcmRfd2l0aF90ZXh0X2xlZnRfdHJhbnNwYXJlbnRfNWI2NDg0YzM1Ng:t/cb:6144780370b27f7904f1d1c0f33c00fe99b1bd70/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwOC1Db250ZW50X0NhcmRfd2l0aF90ZXh0X2xlZnRfdHJhbnNwYXJlbnQucG5n) - ![Ein grafisches Design zeigt eine Bildvorschau mit einem Bildsymbol und drei horizontalen Linien daneben.](https://www.toujou.de/_assets/processed/JwCMCepIceAr0wbSRwHX2D82bE8sLOKqaQQRr_MMW98/q:85/w:176/h:176/fn:Y3NtXzA5XzAwOS1Db250ZW50X0NhcmRfd2l0aF90ZXh0X3JpZ2h0X3RyYW5zcGFyZW50XzJhNTIxYzRmYTU:t/cb:1d690604cbddc9194246fec3db6c91693d1d5070/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwOS1Db250ZW50X0NhcmRfd2l0aF90ZXh0X3JpZ2h0X3RyYW5zcGFyZW50LnBuZw) - ![Das Bild zeigt ein Symbol mit einem Bildrahmen und drei Linien, die eine Liste oder ein Menü repräsentieren.](https://www.toujou.de/_assets/processed/cfHfocbdKWWeEoD7iM9amWRfCafWj97UHcWGIKS89Xw/q:85/w:176/h:176/fn:Y3NtXzA5XzAxMS1JbWFnZV9DYXJkX3dpdGhfdGV4dF9yaWdodF90cmFuc3BhcmVudF83ZTQwY2M2Yjlh:t/cb:66307bbb4d0acc0dbc9b0bb5b2550beae845a175/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAxMS1JbWFnZV9DYXJkX3dpdGhfdGV4dF9yaWdodF90cmFuc3BhcmVudC5wbmc) - ![Ein minimalistisches Design zeigt eine graue und rote Benutzeroberfläche mit einem Bildsymbol und einem Pfeil.](https://www.toujou.de/_assets/processed/14YykV-3luwA6a3pKzGV3XYCvWtIEKZ21KeRI45SmoI/q:85/w:176/h:176/fn:Y3NtXzA5XzAxMC1JbWFnZV9DYXJkX3dpdGhfdGV4dF9sZWZ0X3RyYW5zcGFyZW50XzgxMzIyYmZlYzM:t/cb:25ad7cf768abdf5aa3fc2380ad7eee626765753f/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAxMC1JbWFnZV9DYXJkX3dpdGhfdGV4dF9sZWZ0X3RyYW5zcGFyZW50LnBuZw) - ![Das Bild zeigt ein einfaches, grafisches Layout mit einem Symbol für Bilder und Platz für Zitate.](https://www.toujou.de/_assets/processed/bHMfNXd0OEGTxzoQjkLBQKPeu2CH-IXOx2gx2Eq8EUs/q:85/w:176/h:176/fn:Y3NtXzA5XzAxMi1CbG9ja3F1b3RlX3dpdGhfdGV4dF9sZWZ0X2VlNTg2MDhmZDA:t/cb:452116149aee185e8287d9d502c8413b59811f1b/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAxMi1CbG9ja3F1b3RlX3dpdGhfdGV4dF9sZWZ0LnBuZw) - ![Ein modernes Layout mit roten und grauen Linien, ergänzt durch ein kleines Bildsymbol, das eine Landschaft darstellt.](https://www.toujou.de/_assets/processed/PRZeUX1Zo02JBgMpyEorJyNSAGCWTvsZTyIJbdTwQbA/q:85/w:176/h:176/fn:Y3NtXzA5XzAxMy1CbG9ja3F1b3RlX3dpdGhfdGV4dF9yaWdodF85NTRmM2UyMTBi:t/cb:eec8ddef7ccd969659f820a95e078df324e74ce5/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAxMy1CbG9ja3F1b3RlX3dpdGhfdGV4dF9yaWdodC5wbmc) - ![Fünf horizontale Linien in verschiedenen Farben, die auf einem weißen Hintergrund angeordnet sind, schaffen ein minimalistisches Design.](https://www.toujou.de/_assets/processed/sId26kimQNsmhMUTpEA-Qm5rFqeX8rqbfkuCzDhvN2Q/q:85/w:176/h:176/fn:Y3NtXzA5XzAwMy1IZWFkbGluZV93aXRoX3RlYXNlcl90ZXh0X2FuZF9idXR0b25fdHJhbnNwYXJlbnRfMDk1ZDQxN2I0Nw:t/cb:c236ec21f072f3cc107917ce044d0af831b3b670/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwMy1IZWFkbGluZV93aXRoX3RlYXNlcl90ZXh0X2FuZF9idXR0b25fdHJhbnNwYXJlbnQucG5n) - ![Fünf horizontale Linien in verschiedenen Farben, die auf einem weißen Hintergrund angeordnet sind, schaffen ein minimalistisches Design.](https://www.toujou.de/_assets/processed/_MU6PQkx_vMxhC70vi3YfaLW-F1UTvagZQPkZv93L9o/q:85/w:176/h:176/fn:Y3NtXzA5XzAwMS1IZWFkbGluZV93aXRoX3RleHRfdHJhbnNwYXJlbnRfOTNmNDQ2YzZjZQ:t/cb:b3ddf029c0d5d0e787493595c8db0fad23d18bff/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwMS1IZWFkbGluZV93aXRoX3RleHRfdHJhbnNwYXJlbnQucG5n) - ![Fünf horizontale Linien in verschiedenen Farben, die auf einem weißen Hintergrund angeordnet sind, schaffen ein minimalistisches Design.](https://www.toujou.de/_assets/processed/-KytAEnKS9hN3K4mXLWq5OnfYWEicA9oAachgwafHyk/q:85/w:176/h:176/fn:Y3NtXzA5XzAwMi1IZWFkbGluZV93aXRoX3RleHRfYW5kX2J1dHRvbl90cmFuc3BhcmVudF81MDRiNzlmMTRl:t/cb:99288be5f3e33b4337b1869782adf42f71f2c0a2/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwMi1IZWFkbGluZV93aXRoX3RleHRfYW5kX2J1dHRvbl90cmFuc3BhcmVudC5wbmc) - ![Ein stilisiertes Bild mit einem blauen Hintergrund, einer weißen Landschaft und einem roten oberen Bereich, das an eine Flagge erinnert.](https://www.toujou.de/_assets/processed/dF8j4LWY0g1nSmLOjBZHRAjv6Qh91NQ11eoX7Bnqeoc/q:85/w:176/h:176/fn:Y3NtXzA5XzAwNC1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX2xlZnRfX2luc2lkZV90ZXh0X3RyYW5zcGFyZW50XzFlZjIwMWU0ZDg:t/cb:a796d64b5339608e7332fb7abbc311f02137e519/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwNC1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX2xlZnRfX2luc2lkZV90ZXh0X3RyYW5zcGFyZW50LnBuZw) - ![Ein grafisches Design zeigt ein Bildsymbol und drei horizontale Linien in verschiedenen Farben, die eine Benutzeroberfläche darstellen.](https://www.toujou.de/_assets/processed/fzfyIbm2JHYfJu3QJo8vT7vISv8hhDkhEeCysG1Toqk/q:85/w:176/h:176/fn:Y3NtXzA5XzAwNS1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX2xlZnRfX2Jlc2lkZV90ZXh0X3RyYW5zcGFyZW50XzA4NDZlMmVjNDE:t/cb:3d9f3e07161a51a2350760147cffb4c7fc34001d/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwNS1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX2xlZnRfX2Jlc2lkZV90ZXh0X3RyYW5zcGFyZW50LnBuZw) - ![Ein grafisches Design mit einem blauen Rechteck, das ein Bildsymbol enthält, und mehreren horizontalen Linien darunter.](https://www.toujou.de/_assets/processed/sd34hrj68XyO9j95GZRQi9NfqmKqctj79Ho_EBJo808/q:85/w:176/h:176/fn:Y3NtXzA5XzAwNi1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX3JpZ2h0X19pbnNpZGVfdGV4dF90cmFuc3BhcmVudF9jYTYzOTg1MmQw:t/cb:7b6deaa2b7301db5ca9a8e833b1a0b0df4b02e3e/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwNi1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX3JpZ2h0X19pbnNpZGVfdGV4dF90cmFuc3BhcmVudC5wbmc) - ![Ein minimalistisches Design mit drei horizontalen Linien in verschiedenen Farben und einem Bildsymbol auf der rechten Seite.](https://www.toujou.de/_assets/processed/YDzPPSqAo19vWq4i2cKNkkP8Dq4uParaMr9ZQjh_klg/q:85/w:176/h:176/fn:Y3NtXzA5XzAwNy1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX3JpZ2h0X19iZXNpZGVfdGV4dF90cmFuc3BhcmVudF8xZDRkZjFlOTg1:t/cb:5e5624b77bf4a7705e4ae6085bcc18cfca62a7df/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA5X0NvbWJpbmVkX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA5XzAwNy1IZWFkbGluZV93aXRoX3RleHRfYW5kX2ltYWdlX3JpZ2h0X19iZXNpZGVfdGV4dF90cmFuc3BhcmVudC5wbmc) of Sample views -------------- #### Lorem ipsum dolor sit amet -------------- Organic pickled try-hard bespoke literally paleo skateboard neutra activated charcoal edison bulb quinoa. Chambray chartreuse shaman, brooklyn swag chicharrones microdosing. Gastropub keytar cold-pressed, intelligentsia kickstarter chicharrones etsy succulents. Cardigan chartreuse yuccie salvia palo santo leggings raw denim literally messenger bag, authentic vexillologist. Scenester quinoa raclette pour-over, echo park seitan pinterest. +1 cronut ugh hashtag. Occupy meggings banjo four dollar toast. Church-key locavore chartreuse, whatever cliche stumptown affogato. [### This is the Card title He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. more ](https://www.toujou.de/service/element-library/combined-elements/elements-description/) --- [ ### more ](https://www.toujou.de/service/element-library/combined-elements/elements-description/) #### Lorem ipsum dolor sit amet Chambray chartreuse shaman, brooklyn swag chicharrones microdosing. Gastropub keytar cold-pressed, intelligentsia kickstarter chicharrones etsy succulents. Cardigan chartreuse yuccie salvia palo santo leggings raw denim literally messenger bag, authentic vexillologist. Scenester quinoa raclette pour-over, echo park seitan pinterest. +1 cronut ugh hashtag --- #### Optional heading H1 Optional heading H2 ------------------- Love your customers. Feel free to present and underline your most important reference with this combined blockquote element. Use the text space for a case study or as a teaser above an article. Maybe put a link button underneath the block to link to an internal or external site. [link button](https://www.toujou.de/service/element-library/combined-elements/elements-description/) > Had delicious food. I can't remember the taste as it was gone really quick. But I'd definitely eat it all again. Might even eat more. Frida --- Step by step guide -------------------- ### Create combined elements - Click the **+ Content** button to create any combined element. - In the *Combined Elements* tab, select the element of your choice. ### Insert image - The combined elements for content cards, image cards, and blockquotes offer the possibility of uploading images. - Click on the **Add image** button. - Select an image file from your file list or upload a file to the appropriate folder. ### Tab functions - [Content cards](https://www.toujou.de/service/element-library/card-elements/content-card-description/): How to insert title, text, link, and link text. - [Image cards](https://www.toujou.de/service/element-library/card-elements/image-card-description/): How to insert title, and link text. - [Block quote](https://www.toujou.de/service/element-library/blockquote-elements/description/): How to insert author and text. ### Insert and format text - Paste your text into the editor within the *Text* tab. - 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. --- Screen adaptation ------------------- Text elements combined with content cards, image cards, or block quotes show the content you inserted in two columns in the Text:Element ratio of 1:2. **Responsive behaviour**: On smaller devices, the added element appears below the text. Within the content card and the blockquote, the image is displayed on the left side of the content. **Worth noting**: Both columns will take up the maximum content width. --- 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/)