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 site switcher | - |
| 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 |
{#
Parameters:
- "variant" (string) (default: 'default'): could be "basic" or "default"
- "identity" (string) (default: ''): name of the site, i.e. "SIte identity"
- "breadcrumb" (array) (default: []): collection of @ecl/ec-component-link
- "language_switcher" (object) (default: ''): object of type @ecl/generic-component-lang-select-page
- "title" (string) (default: ''): page title
- "introduction" (string) (default: ''): A short and striking phrase related to the site identification (45 characters maximum)
- "metas" (array) (default: []): array of strings ; each one corresponds to a meta item
- "extra_classes" (string) (default: '')
- "extra_attributes" (array) (default: []): format: [
{
"name" (string) (default: ''),
"value" (string) (default: '')
},
...
]
#}
{% include '@ecl/generic-component-page-header' with {
'variant': variant|default('default'),
'identity': identity|default(''),
'breadcrumb': breadcrumb|default([]),
'language_switcher': language_switcher|default({}),
'title': title|default(''),
'introduction': introduction|default(''),
'metas': metas|default([]),
'extra_classes': extra_classes|default(''),
'extra_attributes': extra_attributes|default([]),
'system': 'ec'
} only %}
{
"_demo": {
"scripts": "\n document.addEventListener('DOMContentLoaded', function () { \n ECL.initBreadcrumb();\n });"
},
"identity": "Site identity",
"breadcrumb": [
{
"href": "../../example.html#",
"label": "Home"
},
{
"href": "../../example.html#",
"label": "Announcements"
},
{
"label": "Business, Economy, Euro"
}
]
}
<div class="ecl-page-header ecl-page-header--default">
<div class="ecl-container">
<nav class="ecl-breadcrumb" aria-label="breadcrumb">
<span class="ecl-u-sr-only">You are here:</span>
<ol class="ecl-breadcrumb__segments-wrapper">
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--first">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Home</a>
</li>
<li class="ecl-breadcrumb__segment">
<a class="ecl-link ecl-link--inverted ecl-link--standalone ecl-breadcrumb__link" href="../../example.html#">Announcements</a>
</li>
<li class="ecl-breadcrumb__segment ecl-breadcrumb__segment--last">
<span>Business, Economy, Euro</span>
</li>
</ol>
</nav>
<div class="ecl-page-header__body">
<div class="ecl-page-header__identity">
Site identity
</div>
</div>
</div>
</div>
-
Content:
/** * Page header * @define page-header */ // Import base and generic @import '@ecl/ec-base/ec-base'; @import '@ecl/generic-component-page-header/generic-component-page-header'; // Use generic mixin @include exports('ec-component-page-header') { @include ecl-page-header(); } - URL: /components/raw/ec-component-page-header/ec-component-page-header.scss
- Filesystem Path: ../../src/systems/ec/ec-component/ec-component-page-header/ec-component-page-header.scss
- Size: 283 Bytes