Header

Header Component

When working within the Content Parsys all web components must first be placed inside of a Section Component

Headers break up large blocks of text, help users scan your page, and support accessibility by giving structure to your content. Use headers to organize your content and improve readability.

Usage

Create clear sections and sub-sections on a page
Aids accessibility by helping screen readers understand page structure
Improve SEO by showing content hierarchy

Important: Use headers in order. Start with Header 2 (H2) for main sections, then Header 3 (H3) for subsections, and so on. Do not skip levels.

How to Add the Component

Click within a section component to insert new components.

Click the + icon
Choose Header

arrow pointing to the + icon on the component menu and another arrow pointing to the Header option on the insert new component menu

How to Configure the Component

To start using the component, click anywhere on the component and a menu will appear.
Click the wrench icon to enter configure mode.

An arrow pointing to the wrench icon on the configure toolbar.

Configurable areas of the component:

Date
Formats a date using a predefined style.
Header 2
Use for the main topics of your page. If your page includes multiple main topics, you can use more than one Header 2 to structure the content clearly.
Header 3
Use for subtopics under a Header 2 section.
Header 4
Use to divide subtopics even further into more specific sections.
ID
Assigns a unique identifier to the component, allowing it to be targeted for advanced features such as linking or styles.
CSS Class
Applies a predefined visual style to your component.

Header Component configuration fields: Date, Header 2, 3 and 4, ID and CSS Class.

Working within the Component

The Header component is one of the simplest to use.

Choose the header type you need — H2, H3, H4, or Date and enter the text you want to display.
Click the check mark to save your changes and close the window. To cancel without saving, click the X.

Tip: Use one field per Header component.
For example, if you need a Header 2 followed by a Header 3, it’s best to use two separate Header components for clarity and styling flexibility.