---
title: Headlines
url: "https://www.toujou.com/service/element-library/text-elements/headline-element/headline-h1/"
date: 2019-08-01
modified: 2026-01-16
---

# Headlines

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Text elements](https://www.toujou.de/service/element-library/text-elements/)
5. [Headline element](https://www.toujou.de/service/element-library/text-elements/headline-element/)
6. [Headlines](https://www.toujou.de/service/element-library/text-elements/headline-element/headline-h1/)

    Headline element
================

Your headline from sizes H1 to H5.

Item ID: 08-001

[Sample views](#c1006548) [Step by step guide](#c1006552) [Screen adaptation](#c1006555)

---

  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[\*](#c1006554)).

  ### 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.

   ### \*Notes:

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](https://www.toujou.de/service/toujou-set-up/color-settings/) (**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 ](https://www.toujou.de/service/toujou-set-up/)& [TYPO3 tutorials ](https://www.toujou.de/service/tutorials/)related to this element description.

 [Color settings](https://www.toujou.de/service/toujou-set-up/color-settings/)