<div class="component contentHeader o-contentHeader d-flex align-items-center">
<div class="component-content">
<div class="row no-gutters w-100 h-100">
<div class="o-contentHeader__left col col-md-6 d-flex align-items-center position-static">
<div class="d-flex align-items-center">
<a href="index.html" class="o-contentHeader__logoAction mr-2 mr-md-3 -action">
<img src="../../img/logos/logo-portaal.svg" alt="logo">
<div class="a-circle -button -hover -border"><i class="icon-arrow-round-left"></i></div>
</a>
<div class="d-flex flex-column justify-content-center">
<h1 class="o-contentHeader__title d-flex align-items-center">
<span class="o-contentHeader__titleText">Pagina titel</span>
</h1>
<small class="text-muted">subtitel</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="component contentHeader o-contentHeader {% if split_on_mobile %}-splitOnMobile{% endif %} d-flex align-items-center">
<div class="component-content">
<div class="row no-gutters w-100 h-100">
<div class="o-contentHeader__left col col-md-6 d-flex align-items-center position-static">
<div class="d-flex align-items-center">
<a href="index.html" class="o-contentHeader__logoAction mr-2 mr-md-3 {% if action == true %}-action{% endif %}">
<img src="{{ '/img/logos/logo-portaal.svg' | path }}" alt="logo">
{% if action == true %}
<div class="a-circle -button -hover -border"><i class="icon-arrow-round-left"></i></div>
{% endif %}
</a>
<div class="d-flex flex-column justify-content-center">
<h1 class="o-contentHeader__title d-flex align-items-center">
<span class="o-contentHeader__titleText">{{title}}</span>
{% if badge == true %}
<span class="ml-2 mb-1 ml-lg-3 d-flex align-items-center">{% render '@badge--select' %}</span>
{% endif %}
</h1>
{% if subtitle %}
<small class="text-muted">{{subtitle}}</small>
{% endif %}
</div>
</div>
</div>
{% if tasks %}
<div class="o-contentHeader__right col col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
{% render '@task-monitor', {circle:circle}, true %}
<div class="ml-2 ml-md-4 d-flex align-items-center justify-content-end">
{% render '@button--border-icon-left', {icon:"edit-alt", text:"Configuratie wijzigen", tooltip:true, show_feedback: true, tooltip_message:"Voorontwerp Elkien V1"}, true %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{
"title": "Pagina titel",
"subtitle": "subtitel",
"file": "",
"badge": false,
"action": true,
"tasks": false,
"split_on_mobile": false,
"completed": false
}
The contentheader contains a back button which should only be displayed when a back action is available (for example: When you are on a detail page and want to go back to the overview page).
When there is no back action available the class -action should be removed from the o-contentHeader__logoAction. When this is the case a logo will be displayed on mobile/tablet devices instead of a back button.
This is a variant to have all components in the right side of the Content Header moved to the bottom (sticky) on mobile. This way the progress bar and complete order button can be moved to a different location on mobile devices. This provides more space in the Content Header on mobile devices. To use this variant apply the class: -splitSticky and apply -paddingBottom to the .content div.