---
title: Blog elements of the toujou element library
url: "https://www.toujou.com/service/element-library/blog-elements/"
description: "All blog elements: automatic or manual blog teaser cards, optionally with accompanying text. Previews, instructions and behavioral description."
date: 2019-01-10
modified: 2022-09-27
---

# Blog elements of the toujou element library

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

     The toujou element library
--------------------------

Blog teaser cards
=================

Select excerpts from your blog posts and show them as teaser cards. The appearance of your text or blog content is managed centrally and has responsive behaviour. The number of articles to be displayed is controlled by the editor.

**Blog cards:** [single | multiple](#c1002678)
**Blog card(s) with text (50:50):** [left](#c1002681) | [right](#c1002684)
**Blog cards with text (33%):** [left](#c1002687) | [right](#c1002690)
**Blog cards (33%) with text:** [left](#c1002693) | [right](#c1002696)

      ![Ein einfaches, minimalistisches Design zeigt ein Profilbild und Textfelder auf einem weißen Hintergrund.](https://www.toujou.de/_assets/processed/b4EgQI8WQGO1KGpaUehdxRCDQ_HQiNkv_VXtswGIiHM/q:85/w:400/h:160/fn:Y3NtX0Jsb2dfMjAwMF84MDBfNGJkY2ZlYTkwNg:t/cb:dbaa674a66fa6c4bab031da72ae2ef65e46c687e/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9CbG9nXzIwMDBfODAwLnBuZw) ### Manual

On this page you will find all the blog card elements available in toujou. We’ve used dummy text in the library to prevent confusion.

For detailed instructions, click on the buttons located below every sample element to get to the element description.

[I am the button ❯](https://www.toujou.de/service/element-library/blog-elements/)

   ---

  toujou blog card elements
---------------------------

 ###  Blog card

  - ![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/cffYrsGljKkpd_Fz5S4qUX14pFa1V11LuH25EDKQ0c4/q:85/c:2488.32:1536:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX0RyZWktRGluZ2UtZnVlci1XZWJzaXRlcy1pbi1LSS1aZWl0ZW5fOGQzNmZkOGYwNQ: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/wIesabwn0B1FgK0JRGXvLN32pZAsjyupo2xjdthFESs/q:85/c:1472.58:909:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX21lZGF0c3VfdGl0ZWxfaGVhZGVyXzRmMDRlNmY1NTI: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/Wv7BvsDaLHS212AeDqeAHvehp3P9_jdCM3WU8mm82qQ/q:85/c:810:500:fp:0.5:0.5/rt:force/w:336/h:207/fn:Y3NtX2pvbmFzLWtvZWwtbm54V1FaVG1veFEtdW5zcGxhc2hfNzBhZmY4ZGRkNV83ODllMjFmMGE4:t/cb:d5a3033b1f39d58c33668b708404e3d167022d50/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjMvT1NQL2pvbmFzLWtvZWwtbm54V1FaVG1veFEtdW5zcGxhc2hfNzBhZmY4ZGRkNS5qcGVn)    Website quality

     ### Moving beyond Buzzword Bingo

     27.04.2023

     Create content that is both appealing to read and technically correct.

     [  Read more ](https://www.toujou.de/blog/moving-beyond-buzzword-bingo/)

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card with text left

  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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   - ![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/)

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card with text right

   - ![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/)

 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card with text 33% left

  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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   - ![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/)

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card with text 33% right

   - ![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/)

 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card 33% with text left

  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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   - ![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/)

[Blog card elements ❯](https://www.toujou.de/service/element-library/blog-elements/blog-card/)

---

 ###  Blog card 33% with text right

   - ![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/)

 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

       ##### Tutorials

[Checklist ❯](https://www.toujou.de/service/#c1004820)
[Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/)
[File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/)
[Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/)
[Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/)
[Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/)
[Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/)
[Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/)
[Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/)
[Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/)
[Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/)

  ##### toujou set-up

[Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/)
[Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/)
[Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/)
[Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/)
[Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/)
[Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/)
[Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/)
[Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/)

  ##### toujou element library

[Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/)
[Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/)
[Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/)
[Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/)
[Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/)
[Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/)
[Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/)

  ####

[Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/)
[Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/)
[Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/)
[Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)