+49 911 23980-870

Headline element

Your headline from sizes H1 to H5.

Item ID: 08-001

Sample views   Step by step guide   Screen adaptation

Sample views

Left aligned H1 Headline

Centered H2 Headline

Right aligned H3 Headline

Left aligned H4 Headline

Centered H5 Headline


Step by step guide

Create headline

  • Click on the + Content button to create a headline element.
  • Select Headline in the Headline Element tab.
  • You can also search for the desired element using the filter wizard.

Insert headline text

  • Write your headline into the mask of the Header section.

Set tag & size

  • From the Headline Tag drop-down menu, select the desired tag from H1 (default) to H5.
  • Change the display size of the tag, if needed (see below*).

Set alignment & color

  • Select the desired position from the Align drop-down menu. The default alignment is left.
  • In the Header Font Color menu, choose between the color schemes.


The following orientation for sizes applies: H1 = alpha (312.5%); H2 = beta (250%); H3 = gamma (200%); H4 = delta (162.5%); H5 = epsilon (137.5%); Font size normal = omega (87.5%). By selecting the default size 100%, the sizes above will always be displayed according to the respective headline tag. 

By default, H1, H4, and H5 headers use the font color (Default font-color), H2 the primary-color, and H3 the secondary-color. In the settings tab, you have the possibility to vary the assigned default colors and sizes to your taste and/or needs.

Screen adaptation

The Headline element reflects the title you inserted in the selected size.

Responsive: As with text fields, the alignment of the headline is always the same regardless of the device. On small devices, headlines break into two or more lines, depending on their length.

Good to know: Depending on the tag, size, and color selection, numerous individual combinations and deviations from the toujou standard settings are possible.

Linked topics

toujou set-ups & TYPO3 tutorials related to this element description.

Color settings