Header

The header component should be used at the top of every page to show the title of the website and provide a link to the homepage. The header also includes a few optional elements such a link to a unit's parent unit, a search form and place for quick links.

Variations

The header component has the ability to have a white, gray, gold or dark background. By default the background will be white.

The header component also has the option to display in compact mode, which will reduce the font size of the unit name and the padding size of the wrapping block (while at a md breakpoint or larger). When using the header in compact mode it is suggested to not include the optional parent unit information. Consider using compact mode for sites or applications with internal audiences.

T4 implementation

The header is implemented in T4 as the "Header" Compass content type, meaning its classes retain the .cwf- prefix.

The number of quick links allowed in the content type is limited to 5; Any links beyond the limit will be ignored.

Areas

This content type should only be used within the global "Site-Header" section to have it displayed globally within the header area.

Injectors

In the "Injectors" field of the header content type, the following injectors can be used:

• id:{custom_id} - Overrides the default, T4 ID of the header with a custom ID.
• class:{custom_classes} - Adds custom classes to the header.
• style:{custom_styles} - Adds custom styles to a style attribute of the header.
• before:{custom_html} - Adds custom HTML before the header.
• after:{custom_html} - Adds custom HTML after the header.