--- title: Blog card description url: "https://www.toujou.com/service/element-library/blog-elements/blog-card/" date: 2019-06-24 modified: 2022-09-27 --- # Blog 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. [Blog elements](https://www.toujou.de/service/element-library/blog-elements/) 5. [Blog card description](https://www.toujou.de/service/element-library/blog-elements/blog-card/) Blog cards ========== Single or multiple blog teaser cards including a link, a title, and text next to an image – with an optional adjacent textfield. Item-IDs: 07-001 | 07-007 | 07-008 | 07-009 | 07-010 | 07-011 | 07-022 [Sample views](#c1006161) [Step by step guide](#c1006165) [Screen adaptation](#c1006167) - ![Ein graues und weißes Layout zeigt ein Profilbild und mehrere Textzeilen, die Informationen darstellen.](https://www.toujou.de/_assets/processed/bqoVielShKEevGGwAparYOElu4DRbaPGKceGdn5xdDc/q:85/w:176/h:176/fn:Y3NtXzA3XzAwMV9ibG9nX2NhcmRfdHJhbnNwYXJlbnRfOTU4Mjg2MDZkYQ:t/cb:75a37cabb3f0a9603d915301838cffb6f57f0bbe/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAwMV9ibG9nX2NhcmRfdHJhbnNwYXJlbnQucG5n) - ![Grafische Darstellung von zwei Bildern mit begleitenden Texten, die die Inhalte der Bilder beschreiben.](https://www.toujou.de/_assets/processed/Ivz9I41yNMV7WGFHJQxpqjsQZiTI4xBFr1qVNq2xz-o/q:85/w:176/h:176/fn:Y3NtXzA3XzAwN19ibG9nLWNhcmRfd2l0aF90ZXh0X2xlZnRfdHJhbnNwYXJlbnRfZWI0ZDk3MDYwMg:t/cb:a3ead8018eab32f692f829df4226d9c98024c4af/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAwN19ibG9nLWNhcmRfd2l0aF90ZXh0X2xlZnRfdHJhbnNwYXJlbnQucG5n) - ![Zwei Benutzerprofile mit Bildern und Informationen nebeneinander, die eine klare Struktur und einfache Lesbarkeit zeigen.](https://www.toujou.de/_assets/processed/LhEpl8RxFCUHwCysxSkrbEi2a7HvL5u3um9RdvfdVIQ/q:85/w:176/h:176/fn:Y3NtXzA3XzAwOF9ibG9nLWNhcmRfd2l0aF90ZXh0X3JpZ2h0X3RyYW5zcGFyZW50XzRlNGYyZWJlMjg:t/cb:c3131dacb263f1dd5ec8a5d94b1be567f009aa53/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAwOF9ibG9nLWNhcmRfd2l0aF90ZXh0X3JpZ2h0X3RyYW5zcGFyZW50LnBuZw) - ![Zwei horizontale Linien sind über vier Bildkarten angeordnet, die jeweils ein Bild und Text enthalten.](https://www.toujou.de/_assets/processed/fZq2ATDz4VT2A3NbyNMvSxoD5A1tUiHyzZyBUzMILuo/q:85/w:176/h:176/fn:Y3NtXzA3XzAwOV9ibG9nLWNhcmQtd2l0aC10ZXh0LTMzLWxlZnRfdHJhbnNwYXJlbnRfYTkxNDY1MjA4Yg:t/cb:e00f29b45374194d47d68e136af3b52e8040202c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAwOV9ibG9nLWNhcmQtd2l0aC10ZXh0LTMzLWxlZnRfdHJhbnNwYXJlbnQucG5n) - ![Vier Karten mit Bildern und Texten sind in zwei Reihen angeordnet, während zwei graue Linien rechts daneben stehen.](https://www.toujou.de/_assets/processed/-noO0csYj9DTgzZH3CaCc7uGbaQyDi8FKGbbmRhZBfs/q:85/w:176/h:176/fn:Y3NtXzA3XzAyMl9ibG9nLWNhcmQtd2l0aC10ZXh0LTMzLXJpZ2h0X3RyYW5zcGFyZW50Xzg0OWI3OWRmNTY:t/cb:71578ee526e8285d726e3b36510dcb849b034ce6/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAyMl9ibG9nLWNhcmQtd2l0aC10ZXh0LTMzLXJpZ2h0X3RyYW5zcGFyZW50LnBuZw) - ![Zwei Bildvorschauen mit begleitenden Texten, die nebeneinander angeordnet sind, um einen Vergleich zu ermöglichen.](https://www.toujou.de/_assets/processed/krRi1oBJn6FsvKcE8ylxlPKwqifVGvMm0XDP5XiENXU/q:85/w:176/h:176/fn:Y3NtXzA3XzAxMF9ibG9nLWNhcmQtMzMtd2l0aC10ZXh0LXJpZ2h0X3RyYW5zcGFyZW50X2ZkNTYyMTMyYmI:t/cb:3fd0493b87f55f3d254487df2bcba6bf0af8b7ff/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAxMF9ibG9nLWNhcmQtMzMtd2l0aC10ZXh0LXJpZ2h0X3RyYW5zcGFyZW50LnBuZw) - ![Grafische Darstellung von zwei Bildern mit begleitenden Texten, die deren Inhalte beschreiben und vergleichen.](https://www.toujou.de/_assets/processed/M8vnOL_RiaMriq4nfoO5uhUpeBnQiGGH_EmatQaFRDM/q:85/w:176/h:176/fn:Y3NtXzA3XzAxMV9ibG9nLWNhcmQtMzMtd2l0aC10ZXh0LWxlZnRfdHJhbnNwYXJlbnRfMGVjY2JkN2E1NA:t/cb:afa4711a80e14de3a5d1547a599286641a0d55ef/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLUljb25zX3RyYW5zcGFyZW50LzA3X0Jsb2dfVGVhc2VyX0VsZW1lbnRzX3RyYW5zcGFyZW50LzA3XzAxMV9ibG9nLWNhcmQtMzMtd2l0aC10ZXh0LWxlZnRfdHJhbnNwYXJlbnQucG5n) of --- Sample views -------------- - ![Ein leuchtend orangefarbener Hintergrund mit dem Text 'WE THE COMMUNITY' in klarer, weißer Schrift.](https://www.toujou.de/_assets/processed/y7bJpMnJpH9sfWOqtXMumPM7RpnLD0v6fndg2q0Vy8A/q:85/c:1200:740.74074074074:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX3R3aXR0ZXJfdHlwbzMtY29tbXVuaXR5XzkzNmI5YzEyZGQ:t/cb:24f8c576d97f15ee637c8723f22e2f5e7415c729/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvT3BlbkdyYXBoLVR3aXR0ZXIvdHdpdHRlcl90eXBvMy1jb21tdW5pdHkucG5n) General TYPO3 Camps ### toujou at T3CON 04.10.2023 Nominated for the TYPO3-Award & with many ideas in the luggage to Düsseldorf. [ Read more ](https://www.toujou.de/blog/toujou-at-t3con/) - ![](https://www.toujou.de/_assets/processed/XO5sxb15yuenM6tufHHsSpfTywdeNb1jteo8Xe3Q08M/q:85/c:4624:2854.3209876543:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX01hdGhpYXNfQm9sdF9MZXNuaWFrX3NjcmVhbV9kOGI3MDJhZTU1:t/cb:be9a6433ee81fb2e41a3403fcdf8537d6600e0a4/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3Vfbm8vTWF0aGlhc19Cb2x0X0xlc25pYWtfc2NyZWFtLmpwZw) Press Website quality ### Opening minds for open source website 02.02.2023 Mathias Bolt Lesniak talks about the various advantages ob open source websites. [ Read more ](https://www.toujou.de/blog/opening-minds-for-open-source-website/) - ![](https://www.toujou.de/_assets/processed/2FnMwA4jHfVEHHt3frPeQfET3fveQ0Poz3NTLyMMD9c/q:85/c:808.05755395683:498.80095923261:fp:0.5025:0.49400479616307/rt:force/w:336/h:207/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV8yOTljZDFmOWVj:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n) General ### How to toujou as editor 29.07.2022 We give you some advices for an easy editing in toujou. [ Read more ](https://www.toujou.de/blog/how-to-toujou-as-editor/) - ![[Translate to English:] ](https://www.toujou.de/_assets/processed/seu_AHfCWfDdTR0DhmdNA65czIoAyNJOu_F19gUZ0o8/q:85/c:829.44:512:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtXzIwMjBfMTJfMDJfdG91am91X2dvZXNfdDNpbWRfMGUyMDJkYTgxZg:t/cb:402fbe198e356ec7c85d1c1e5b27d47b93fdd78d/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjBfMTJfMDJfdG91am91X2dvZXNfdDNpbWQuanBn "[Translate to English:] ") \[Translate to English:\] Press TYPO3 Camps ### toujou goes t3imd 04.12.2020 The numerous TYPO3 participants around the world can look forward to toujou as DFAU GmbH supports the event with its website builder toujou. [ Read more ](https://www.toujou.de/blog/toujou-goes-t3imd/) - ![Lisa-Marie Mayr ist Website-Projektmanagerin bei der DFAU Gmbh, einer TYPO3-Agentur. ](https://www.toujou.de/_assets/processed/PG26TgUT15kBafuWASzzYuEaPA3kPYenssVvcRQcgGA/q:85/c:1749.6:1080:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX0RGQVVfVFlQTzNfTGlzYV9NYXlyXzA1OWE2ZDY5ZmQ:t/cb:d41c80abb99131f73cad3b5df5a35b42d8c83ef6/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50L0RGQVVfVFlQTzNfTGlzYV9NYXlyLmpwZw) Lisa-Marie Mayr steht Kunden, die eine professionelle Website möchten, seit 2019 mit Rat und Tat zur Seite. General Service Website quality ### Interview: "I would like more people to put more emphasis on a good website." 13.11.2020 Lisa-Marie Mayr blickt auf ihr erstes toujou-Jahr zurück. Im Interview erläutert sie, was sie an TYPO3 besonders schätzt – und gibt Tipps für Redakteure. [ Read more ](https://www.toujou.de/blog/interview-i-would-like-more-people-to-put-more-emphasis-on-a-good-website/) --- - ![KI-generiertes Bild, das einen Schreibtisch, Stuhl und Laptop zeigt, auf dem Icons zum Thema Website in KI-Zeiten zu sehen sind, im Hintergrund steht ein buntes Bücherregal und ist ein Fenster mit Bäumen zu sehen](https://www.toujou.de/_assets/processed/xtJtyrsvQwAt-hbzUwMBzprckGTm8DeNO6IIy-wTCP0/q:85/w:2671/h:1536/fn:Y3NtX0RyZWktRGluZ2UtZnVlci1XZWJzaXRlcy1pbi1LSS1aZWl0ZW5fOWJlMDE0M2Y5ZQ:t/cb:361f01a06ddc62ad372fe47cbabb7dd9213d32d2/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjYvRHJlaS1EaW5nZS1mdWVyLVdlYnNpdGVzLWluLUtJLVplaXRlbi5wbmc) Website quality Yoast SEO ### 3 main things for websites to survive AI 11.05.2026 [ Read more ](https://www.toujou.de/blog/3main-things-websites-need-to-survive-ai/) - ![](https://www.toujou.de/_assets/processed/0JBAcTMYKALHy6hBr5-HsU47ZXGwxU-pFEKeU3oMQ7Q/q:85/w:1683/h:909/fn:Y3NtX21lZGF0c3VfdGl0ZWxfaGVhZGVyX2M5YWRiMThiZDM:t/cb:8c9f3d5b23ef15ea2ca07fc45b68f27f6cbfbd23/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDlfTWVkYXRzdV9SZWxlYXNlL21lZGF0c3VfdGl0ZWxfaGVhZGVyLnBuZw) Company Website quality ### medatsu - new design options for your website 08.02.2024 More emotions, more individual design options: We introduce to you medatsu, the fourth toujou theme. [ Read more ](https://www.toujou.de/blog/medatsu-new-design-options-for-your-website/) - ![](https://www.toujou.de/_assets/processed/QCl-S-ufe1hZO2Bk2NtmgPI5SLO-aCGLB6ADcO-j3BA/q:85/w:1683/h:950/fn:Y3NtX3QzY29uXzIwMjNfMTZfOV8zOTA5YWI1OWFl:t/cb:e3b9de6c9d4baf1ace1ae0c616c55c795f82245f/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC90M2Nvbl8yMDIzXzE2XzkucG5n) TYPO3 Camps Company ### toujou recap from T3CON 02.11.2023 What began five years ago is still far from complete. [ Read more ](https://www.toujou.de/blog/toujou-recap-from-t3con/) - ![Ein leuchtend orangefarbener Hintergrund mit dem Text 'WE THE COMMUNITY' in klarer, weißer Schrift.](https://www.toujou.de/_assets/processed/8YO8k5JIUJAIP9lF1ncuwg4xWkE-vAqHy3lmmFYnqS8/q:85/w:1200/h:800/fn:Y3NtX3R3aXR0ZXJfdHlwbzMtY29tbXVuaXR5X2UzMWE0NGE2NGY:t/cb:24f8c576d97f15ee637c8723f22e2f5e7415c729/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvT3BlbkdyYXBoLVR3aXR0ZXIvdHdpdHRlcl90eXBvMy1jb21tdW5pdHkucG5n) General TYPO3 Camps ### toujou at T3CON 04.10.2023 Nominated for the TYPO3-Award & with many ideas in the luggage to Düsseldorf. [ Read more ](https://www.toujou.de/blog/toujou-at-t3con/) ### This is a headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. --- Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/8zjEp0ogU5bsXlIdPQYRBDxfAeDe7E-XdMpSN1shRqI/q:85/w:432/h:270/fn:Y3NtXzA3LTAxX0Jsb2ctRWxlbWVudC13YWVobGVuX2ZlOWYyYzAzN2M:t/cb:f95617dcde466dac41b1e65fe663f8ab256fa449/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X0Jsb2dfZWxlbWVudHMvRU4vMDctMDFfQmxvZy1FbGVtZW50LXdhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Blog_elements/EN/07-01_Blog-Element-waehlen.png) ### Create blog card(s) - Click the **Content** button to create any blog card element. - In the tab *Blog Elements* select the blog card element of your choice. - **Note**: The **Blog Plugin** is not a regular toujou element but is instead designed to fill the entire content area of a page. See [tutorial within the blog administration](https://www.toujou.de/service/tutorials/blog-administration/#c1004711). [ ![](https://www.toujou.de/_assets/processed/u-Cqa1Y6w_8pZ0J8Hnjl0PvkJYV2LhZCMs-2NlA4T24/q:85/w:432/h:270/fn:Y3NtXzA3LTAyX0Jsb2ctRWludHJhZy13YWVobGVuX2Y0MjcwNjNiOWI:t/cb:c452ed945462b7f80680e2edfec9f7e23f59ef53/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X0Jsb2dfZWxlbWVudHMvRU4vMDctMDJfQmxvZy1FaW50cmFnLXdhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Blog_elements/EN/07-02_Blog-Eintrag-waehlen.png) ### Select blog entries - In the *Blog Element Selection* section of the *Content* tab, choose between **manual** or **by category** (see description below). - The **manual** option is set by default. If you select **by category**, a »Refresh required« window opens. Confirm the desired option by clicking **OK**. [ ![](https://www.toujou.de/_assets/processed/KoowvYLnOOpyK1ipMob1SKY2n7o1JASyy1G94sjMgec/q:85/w:432/h:270/fn:Y3NtXzA3LTAzX1RleHQtZWluZnVlZ2VuX2U5ODMzMzkyOGY:t/cb:c432db22951e88eea64d5978636482628408277f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X0Jsb2dfZWxlbWVudHMvRU4vMDctMDNfVGV4dC1laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Blog_elements/EN/07-03_Text-einfuegen.png) ### Insert and format text - In the *Text* section of the *Content* tab, paste your text into the editor. - 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/efHWx_lKiI_VHNGqCnKEhtzlHDLaLeYHuyGG8G5qiA0/q:85/w:432/h:270/fn:Y3NtXzA3LTA0X21hbnVhbF81OTVlM2VlNGZk:t/cb:8bb45e88b96b6bec62d97b3e4905d50e9cfa69be/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X0Jsb2dfZWxlbWVudHMvRU4vMDctMDRfbWFudWFsLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Blog_elements/EN/07-04_manual.png) #### Manual - At the bottom of the *Blog Entries* section, click the **Page** button - In the *Record Selector* window that opens, on the left side, open the folder that contains your blog articles. - Click on the desired article. Repeat the process according to the number of desired articles. [ ![](https://www.toujou.de/_assets/processed/SYEeRwsr_VusK5fQOD54K6d85uaJOwK-f6SPvxrEz30/q:85/w:432/h:270/fn:Y3NtXzA3LTA1X2J5X2NhdGVnb3J5X2Q3ODQyODZlNGI:t/cb:b4cdcb68654bec645dd76b26273e28495821abf5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X0Jsb2dfZWxlbWVudHMvRU4vMDctMDVfYnlfY2F0ZWdvcnkucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Blog_elements/EN/07-05_by_category.png) #### By category - In the *Blog Categories* section, click the checkboxes of the desired blog categories or *Toggle all* if you want all new articles to be inserted independently of their categories. - In the field *maximum number of blog cards (default = 4)*, determine how many articles should be displayed within this element. --- Screen adaptation ------------------- The *Blog cards* show one or more teaser cards of your blog articles with a picture, date and the button »MORE«. The content of the blog cards is already determined by the editor when [the article is created](https://www.toujou.de/service/tutorials/blog-administration/). **Responsive**: - A single *blog card* takes the text width of the page, two cards side by side the maximum content width. If there is not enough space, all blog cards will display the image above the teaser text on smaller devices. - *Blog cards with text* take the maximum content width. If there is not enough space, the text is placed above the blog cards. **Worth noting:** With the blog element selection **by category**, the element always puts the latest article first and removes the appearance of the oldest element from the view. Depending on the theme selection, the blog cards can assume the full grid width or text width. Also the arrangement next to each other or below each other is different from theme to theme. --- 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. [Blog administration](https://www.toujou.de/service/tutorials/blog-administration/)