ECL Page Headers


0.13.04 years ago4 years agoMinified + gzip package size for @ec-europa/ecl-page-headers in KB


Page header

Why and how to use this component

Users need a way to easily identify the branding, to search and change the language if needed.

  • the page title functions as the top level H1.
  • it is also used to construct the <title> element (mandatory).
  • gives context and confidence to the user so they know they are looking at the right piece of content.
  • provides an H1 title for accessibility and SEO purposes.

Page header types

  • default page header
  • basic page header
Default page header Basic page header
Mandatory components Mandatory components
Breadcrumb Breadcrumb
Page title -
Optional components Optional components
Meta items Meta items
Site identification Site identification
Page introduction -

When to use this component

Default page header Basic page header
detail pages and landing pages detail pages and landing pages
navigation menu not allowed navigation menu
default implementation page title and page introduction elements should be placed on the body of the page

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.