The toujou element library

Widgets

With toujou you will find preconfigured widgets with the necessary freedom where you need it. You have access to complex forms, manual or automated product presentations, and freely combinable HTML elements.
 

Header: Headercontent Element | Header media 3:1
Other widgets: Product Grid | Previous/Next Page Navigation | Forms | Social Media | Event Teaser List | Location finder | Code block | HTML

Manual

On this page you will find all the widget 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 ❯

toujou widget elements

Headercontent element

View for devices with more than 1440 px width

Widescreen

View for devices with more than 1024 px width

Desktop

View for devices with more than 600 px width

Tablet

View for devices with more than 375 px width

Mobile

Header media element 3:1 ratio

View for devices with more than 1440 px width

Widescreen

View for devices with more than 1024 px width

Desktop

View for devices with more than 600 px width

Tablet

View for devices with more than 375 px width

Mobile

Product grid

Previous/Next Page Navigation

View for devices with more than 1440 px width Desktop

Widescreen

View for devices with more than 1024 px width Tablet

Desktop

View for devices with more than 600 px width Mobile

Tablet

View for devices with more than 375 px width

Mobile

Social Media Bar

Event Teaser List

1. 

   Event 1

   Event

   30.11.2028

   Scheduled

   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

   Read more

Location finder

Code Block

        const test = "This is a variable";

function add (a,b) {
	return a + b;
	}
    

All HTML elements

In order to be completly free, with toujou you also have the possibility to create your own HTML elements. There are multiple sizes of plain HTML or combinations with text.

HTML  Plain HTML Code in grid width

HTML full-width  Plain HTML Code in full page width

HTML with Text (left, 33%)  HTML width: 33%, Text width: 67%

HTML with Text (right, 33%)  HTML width: 33%, Text width: 67%

HTML with Text (left, 50%)  HTML width: 50%, Text width: 50%

HTML with Text (right, 50%)  HTML width: 50%, Text width: 50%

HTML with Text (left, 67%)  HTML width: 67%, Text width: 33%

HTML with Text (right, 67%)  HTML width: 67%, Text width: 33%

HTML with Multicolumn Text left  Three equal-width columns, HTML in first column

HTML with Multicolumn Text right  Three equal-width columns, HTML in last column

        const test = "This is a variable";

function add (a,b) {
	return a + b;
	}