--- title: "Headline" description: "The Headline Component can help to structure a Page by giving Headlines in different Sizes (H1 to H5 and Copy) to Paragraphs on a Page." path: https://www.eonshowroom.eon.com/en/content-elements/headline.html lastModified: 2026-03-25T08:29:10.368Z --- # Headline # Headline ### I am an Example of an H3 Headline [How to Configure](#how-to) ### Description The Headline Component can help to structure a Page by giving Headlines in different Sizes (H1 to H5 and Copy) to Paragraphs on a Page. - Different Headline Sizes are possible - Headline can be left or centered aligned [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-headline--interactive) ### Inspirations ### Headline H3 centered Our conscience cannot rest so long as nearly 45 million Americans don't have health insurance and the millions more who do are going bankrupt trying to pay for it. Contrary to the claims of some of my critics, black and white, I have never been so naive as to believe that we can get beyond our racial divisions in a single election cycle, or with a single candidacy - particularly a candidacy as imperfect as my own. I will cut taxes - cut taxes - for 95% of all working families. #### Headline H4 Our conscience cannot rest so long as nearly 45 million Americans don't have health insurance and the millions more who do are going bankrupt trying to pay for it. Contrary to the claims of some of my critics, black and white, I have never been so naive as to believe that we can get beyond our racial divisions in a single election cycle, or with a single candidacy - particularly a candidacy as imperfect as my own. I will cut taxes - cut taxes - for 95% of all working families. ##### Headline H5 [Info Icon Key: info-icon-1] [Info Icon Aria Label: Tooltip] [Info Icon Content Type: Experience fragment] [Info Icon Content Start: info-icon-1] ##### Tooltip Example This is some Abstract Text Followed by a Description Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. [Learn More about Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) [Info Icon Content End: info-icon-1] Our conscience cannot rest so long as nearly 45 million Americans don't have health insurance and the millions more who do are going bankrupt trying to pay for it. Contrary to the claims of some of my critics, black and white, I have never been so naive as to believe that we can get beyond our racial divisions in a single election cycle, or with a single candidacy - particularly a candidacy as imperfect as my own. I will cut taxes - cut taxes - for 95% of all working families. ### Usage Rules & Features ##### Features - Headline can come with optional Tooltip ##### Properties - Headline can be sized from H1 to H5 - Headline Alignment can be left or center ##### Design - H1 should only be used once on each Page - Use different Size to structure Content ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | no | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | ### DO's - Use different Headline Styles (H1-H5) for structuring Purpose - Ensure Headline Alignment corresponds with Content ### DONT's - Don't have more than one H1 on a Page for SEO Purpose (or if H1 Style is needed, define another SEO Tag) ## Configuration ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_4-1%3A3-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/headline_properties%3A3-4?fmt=webp) ### Set Text, Size, and Alignment At first, Editor needs to enter Text for a Headline. It is additional possible to add an alternative Headline Text which will be displayed once Container gets to small*, like on small Devices. Beside that, Editor can select a Size from H1 to H5, as well as Copy Style. Additionally, it is possible to choose an HTML Tag for SEO, which is a Global Feature for Headlines also as Part of Components. Moreover, Alignment of Headline can be left (default) or center. * In Editor you will only see short Headline. Only on View as Publish and Public Page normal Headline can be visible depending on Container Size. #### Keep in Mind A global Headline Feature is the Possibility to use **\n** Symbol for Line Wrap and **­** Symbol for Word Wrap. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/headline_settings%3A3-4?fmt=webp) ### Further Headline Settings Editor can adjust the Color Scheme and / or enable an Info Icon. Once "Adjust Color Scheme" Checkbox is selected Editors have to select on which Background the Component is used. Depending on the Background Color different Color Schemes can be selected: - On neutral 100 and neutral 300 only Color Option neutral 800 is available. - On red 500 only Color Option neutral 100 is available. Selecting "Enable Info Icon" Checkbox reveals a new Tab, called Info Icon. In this Tab, Editor can configure the Info Icon and choose a Path to an Experience Fragment of a Tooltip. [Read More about configuring Tooltip](https://www.eonshowroom.eon.com/en/content-elements/tooltip.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/headline_anchor%3A3-4?fmt=webp) ### Add Anchor on Headline Selecting "Add Anchor Tag for Headline" Checkbox reveals a Textfield, called Anchor ID. In this Textfield, Editor can enter the ID to be used in an Anchor Link. [Read More about configuring (Anchor) Link](https://www.eonshowroom.eon.com/en/content-elements/link.html)