--- title: "The toujou element library: building blocks for your content." url: "https://www.toujou.com/service/element-library/" description: Present your content with sophisticated text, media, and card elements (and much more). Individually and in the combination of your choice. image: "https://www.toujou.de/_assets/processed/pGdZwGbhRj3xIaiF7AyCh1PCDqgXIPRt4HUp-F9pbag/q:85/w:1366/h:569/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV8xNzc2YzUxMzRm:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n" date: 2019-01-10 modified: 2023-09-18 --- # The toujou element library: building blocks for your content. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) The toujou element library ========================== More than just templates: toujou is made up of concepts and possibilities, that have been preconfigured and designed with care. This library gives you an up-to-date overview of elements, designs, and functions. All you have to do is choose. [ ![](https://www.toujou.de/_assets/processed/oamr_Ync9PjJxxeFjryj-P4PODXcB1BubDxc_3RR09Q/q:85/w:433/h:244/fn:Y3NtX3R5cG8zX3YxMF93aXphcmRfZW5fMDRkMmUxMDRjMw:t/cb:420e09f3fe29b873055b0662526a18d8de37c798/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50L1RZUE8zX1YxMC9UWVBPM19WMTBfZW5nbGlzY2gvdHlwbzNfdjEwX3dpemFyZF9lbi5wbmc) Example: You can find all elements that contain a rich text editor via the filter function of the wizard. ](https://www.toujou.de/_assets/processed/eJihc1vS431iyXapqM43_o1ex6nLg3SPewK4BvWRtQM/q:85/w:1024/h:576/fn:Y3NtX3R5cG8zX3YxMF93aXphcmRfZW5fNjY2NDlmN2ZjNw:t/cb:420e09f3fe29b873055b0662526a18d8de37c798/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50L1RZUE8zX1YxMC9UWVBPM19WMTBfZW5nbGlzY2gvdHlwbzNfdjEwX3dpemFyZF9lbi5wbmc) All elements are grouped according to the back end of any toujou installation. For each element you will find **element descriptions**, an **exemplary preview**, **detailed user guides** along with the description of the responsive behaviour for all devices. New feature from TYPO3 v10 onwards: With the so-called wizard, the desired element can be found even more easily via a filter function. Moreover, the selection of available elements can be reduced. [ ![Ein einfaches, weißes Blatt Papier mit fünf horizontalen, grauen Linien, das auf einem schwarzen Hintergrund liegt.](https://www.toujou.de/_assets/processed/2pu5fn3wQ83_K2Y_PLBDOxNVpzGtAv2paG_n-Gk6mTg/q:85/w:432/h:173/fn:Y3NtX1RleHRfMjAwMF84MDBfdHJhbnNwYXJlbnRfNDhmZWNjNjg3Mw:t/cb:404117817b243c96c4a056810e57c4cff4e5c7ed/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9UZXh0XzIwMDBfODAwX3RyYW5zcGFyZW50LnBuZw) ](https://www.toujou.de/service/element-library/text-elements/) ### Text Bodytext, headlines, buttons & text styles. Either individually, with or without images or in columns. [see all](https://www.toujou.de/service/element-library/text-elements/) [ ![Das Bild zeigt ein grafisches Layout mit einem Bildsymbol und mehreren horizontalen Linien, die Text darstellen.](https://www.toujou.de/_assets/processed/ojwACI1x3CFKUvMyDwLnR-zTaNTtciAe32Agrr-mTOQ/q:85/w:432/h:173/fn:Y3NtX1RlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudF8xOGZkMWU3MjI2:t/cb:37a928f0630eb8894e625e55aa36ec212a319da9/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9UZWFzZXJfMjAwMF84MDBfdHJhbnNwYXJlbnQucG5n) ](https://www.toujou.de/service/element-library/teaser-elements/) ### Teasers Format-binding content teaser boxes with images, text, and preconfigured proportions. [see all](https://www.toujou.de/service/element-library/teaser-elements/) [ ![Ein minimalistisches Design mit einem blauen Bildsymbol, das eine Landschaft mit Bergen und Sonne darstellt.](https://www.toujou.de/_assets/processed/WYcxqPH-o-duJtLM2W7o7VloP4p2XgrFCVFNLbU2UMo/q:85/w:432/h:173/fn:Y3NtX1pJdGF0XzIwMDBfODAwX3RyYW5zcGFyZW50XzZkNWZkNmYxZjU:t/cb:cfb676ccde682514d384daf6ad9676643d4d7e86/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9aSXRhdF8yMDAwXzgwMF90cmFuc3BhcmVudC5wbmc) ](https://www.toujou.de/service/element-library/blockquote-elements/) ### Blockquotes Meant for references or highlighted text, with optional images and varying alignment. [see all](https://www.toujou.de/service/element-library/blockquote-elements/) [ ![Ein minimalistisches Design zeigt eine Berglandschaft mit einem klaren Himmel und einem großen weißen Kreis, der die Sonne darstellt.](https://www.toujou.de/_assets/processed/uuyCTVTHJEij6CXkcGfOqwK_3wal9VD8n4nRNM17v_E/q:85/w:432/h:173/fn:Y3NtX0NhcmRzXzIwMDBfODAwX3RyYW5zcGFyZW50XzUwNTgyYjA3YTI:t/cb:6a1597a7d207f290e784754b91e872b6fe8a2d9d/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9DYXJkc18yMDAwXzgwMF90cmFuc3BhcmVudC5wbmc) ](https://www.toujou.de/service/element-library/card-elements/) ### Cards Prefabricated linked boxes to present links with an image, button and optional text. [see all](https://www.toujou.de/service/element-library/card-elements/) [ ![Ein minimalistisches Bild mit einem blauen Quadrat, das eine Berglandschaft und eine Sonne darstellt, umgeben von Navigationselementen.](https://www.toujou.de/_assets/processed/icYYIDkm9VbnM__A8rBp3e53aH_iZ7UdumVUKmyT140/q:85/w:432/h:173/fn:Y3NtX01lZGlhXzIwMDBfODAwX3RyYW5zcGFyZW50XzZjMjlkZWE5ZTc:t/cb:c46bda6fa0e6b708dd6212768ecef064a706e139/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9NZWRpYV8yMDAwXzgwMF90cmFuc3BhcmVudC5wbmc) ](https://www.toujou.de/service/element-library/media-elements/) ### Media Enrich your content with images, either individually or in galleries, slides and videos. [see all](https://www.toujou.de/service/element-library/media-elements/) [ ![Ein Standortmarker auf einem grünen Hintergrund, begleitet von drei horizontalen Linien, die Informationen darstellen.](https://www.toujou.de/_assets/processed/XbL8iJ_0ipS8kpmiqnT8ml3pxlPJWE__hddxMcnZcWE/q:85/w:432/h:173/fn:Y3NtX01hcHNfMjAwMF84MDBfdHJhbnNwYXJlbnRfNDBjODYzODdiZA:t/cb:fd9445d5f904d24570382f72fc2ddf9d7abef59e/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9NYXBzXzIwMDBfODAwX3RyYW5zcGFyZW50LnBuZw) ](https://www.toujou.de/service/element-library/map-elements/) ### Maps Show locations with your own map images or Google maps based on contacts, addresses, or geodata. [see all](https://www.toujou.de/service/element-library/map-elements/) [ ![Ein einfaches, minimalistisches Design zeigt ein Profilbild und Textfelder auf einem weißen Hintergrund.](https://www.toujou.de/_assets/processed/NSodB9d3iBuO9VlW6-5589JPuKLMq37_L1rxEq70Pxk/q:85/w:432/h:173/fn:Y3NtX0Jsb2dfMjAwMF84MDBfYTZkMmZjZWI5NQ:t/cb:dbaa674a66fa6c4bab031da72ae2ef65e46c687e/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9CbG9nXzIwMDBfODAwLnBuZw) ](https://www.toujou.de/service/element-library/blog-elements/) ### Blog Automated blog teasers for automated presentation of your most important news. [see all](https://www.toujou.de/service/element-library/blog-elements/) [ ![Vier quadratische Bilder zeigen stilisierte Berglandschaften mit Sonne, in einem modernen, minimalistischen Design.](https://www.toujou.de/_assets/processed/Ni-FlVUdTjWqSKMB6xc_7HlClwVh9K90MMOwTiu1OyM/q:85/w:432/h:173/fn:Y3NtX1dpZGdldF8yMDAwXzgwMF90cmFuc3BhcmVudF8wMmFmNjgxMDgz:t/cb:eae52acf1a5c613749606c11312da739504bc567/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9XaWRnZXRfMjAwMF84MDBfdHJhbnNwYXJlbnQucG5n) ](https://www.toujou.de/service/element-library/widgets/) ### Widgets Chapter, Social Media Bar Insert Record and way more options to enrich your website. [see all](https://www.toujou.de/service/element-library/widgets/) ![Zwei graue, stilisierte Stecker sind übereinander angeordnet, auf einem weißen Hintergrund, der Einfachheit vermittelt.](https://www.toujou.de/_assets/processed/6lpF39XJqJv2CNEdH2z8rDbrtOsNb0qvw_0cCyNjH4I/q:85/w:432/h:173/fn:Y3NtX05hdmlnYXRpb25fMjAwMF84MDBfdHJhbnNwYXJlbnRfZmEzMzMxZWVlMQ:t/cb:a151990609b266023ebf30ac6076bc909b2c9456/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9OYXZpZ2F0aW9uXzIwMDBfODAwX3RyYW5zcGFyZW50LnBuZw) ### Navigation Improve internal page navigation with – manually or automatically. [see all](https://www.toujou.de/service/element-library/navigation-elements/) [ ![Ein minimalistisches Design zeigt ein Bildsymbol und Textfelder, die für eine Benutzeroberfläche oder App verwendet werden könnten.](https://www.toujou.de/_assets/processed/ye61LhFHMvDBDzHiS5mTR6hDi6KlvTRZ0v-Rf2WmSUk/q:85/w:432/h:173/fn:Y3NtX0NvbWJpbmVkXzIwMDBfODAwX3RyYW5zcGFyZW50XzBhZWU2MzdlOGY:t/cb:1e3a686a1f81745325e55caca55bcf2e887de645/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvSWNvbnMvQmliLVRlYXNlcl8yMDAwXzgwMF90cmFuc3BhcmVudC9Db21iaW5lZF8yMDAwXzgwMF90cmFuc3BhcmVudC5wbmc) ](https://www.toujou.de/service/element-library/combined-elements/) ### Combinations Text in combination with content cards, images or blockquote elements. [see all](https://www.toujou.de/service/element-library/combined-elements/) ![](https://www.toujou.de/_assets/processed/Qlt5E7GXaQMYuJmXOn1jwPbiuprjMMoFGq3T095o-LY/q:85/w:432/h:173/fn:Y3NtX3R3b192ZXJ0aWNhbF9jYXJkc190cmFuc3BhcmVudC0yNTAweDEwMDBfZDI0MWM0NjBlNw:t/cb:85837a7b04d7f525b82cfebd1d427f675177bd20/bG9jYWw6L2ZpbGVhZG1pbi91c2VyX3VwbG9hZC90d29fdmVydGljYWxfY2FyZHNfdHJhbnNwYXJlbnQtMjUwMHgxMDAwLnBuZw) #### Collections Display & sort internal pages as teasers – in various display options. [see all](https://www.toujou.de/service/element-library/collections/) ![](https://www.toujou.de/_assets/processed/8A-jVDsADt_TYQu_1NEhGrR01HDuEreJ4OJJeHTom20/q:85/w:432/h:173/fn:Y3NtXzA3XzAwNS1IVE1MX3RyYW5zcGFyZW50XzcyY2ZmNDFkMTU:t/cb:b504eb9cca23eba0bfa073598c7386ad5f1c3c74/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzL0hUTUwvMDdfMDA1LUhUTUxfdHJhbnNwYXJlbnQucG5n) #### HTML Integrate external services into your website. With different display options. [see all](https://www.toujou.de/service/element-library/html/) Are you looking for text and image editing or forms? ---------------------------------------------------- You'll find tutorials for working with **text editor**, **image editor**, and **forms** in the [page content tutorials](https://www.toujou.de/service/tutorials/page-content/). ##### Jump directly to the tutorial you're looking for: ##### [Text editor](https://www.toujou.de/service/tutorials/page-content/text-editing/) [Image editor](https://www.toujou.de/service/tutorials/page-content/image-editing/) [Forms](https://www.toujou.de/service/tutorials/page-content/forms/) [ ![Eine pixelige Figur mit langen braunen Haaren hält ein Smartphone in der Hand und trägt eine blaue Bluse und Jeans.](https://www.toujou.de/_assets/processed/LBk0C6Wb9JrqSvBVG6MyJf385j9lqUY7NPTu7oeISkg/q:85/c:200:112.5:fp:0.5:0.5/rt:force/w:200/h:112/fn:Y3NtX0tvbnRha3QtY2hpY2tfNzRiMjdlNTQ5ZA:t/cb:9139d9dcc60ec6f230303d9ce438505870f36288/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvUGVvcGxlL0tvbnRha3QtY2hpY2sucG5n) ### TALK TO US Are you missing a certain type of element? Talk to us if you have questions or ideas for toujou. We would be pleased to add useful content elements to our portfolio. CONTACT ](https://www.toujou.de/contact-us/) ##### 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/)