<div class="component contentHeader o-contentHeader -splitOnMobile 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 class="o-contentHeader__right col col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
<div class="m-taskMonitor d-flex justify-content-start justify-content-md-end align-items-center">
<div class="m-taskMonitor__tasks d-flex align-items-center">
<div class="progress-wrap">
<div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Bestelling</div>" data-placement="bottom">
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="25, 100" stroke-linecap="round" />
</svg>
</div>
<span class="d-flex align-items-center justify-content-center">16/64</span>
</div>
</div>
<div class="ml-2 ml-md-3">
<div class="progress-wrap">
<div class="a-statusCircle -large -progress" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Slagingskans</div>" data-placement="bottom">
<div class="a-statusCircle__progress">
<svg class="a-statusCircle__svg -list" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="white" stroke="black" stroke-opacity="0.15" />
<path d="M52 27C52 40.8071 40.8071 52 27 52C13.1929 52 2 40.8071 2 27C2 13.1929 13.1929 2 27 2C40.8071 2 52 13.1929 52 27Z" fill="none" stroke="#69D2C2" stroke-width="4" pathLength="100" stroke-dasharray="80, 100" stroke-linecap="round" />
</svg>
</div>
<span class="d-flex align-items-center justify-content-center">80%</span>
</div>
</div>
</div>
</div>
</div>
<div class="ml-2 ml-md-4 d-flex align-items-center justify-content-end">
<button type="button" class="btn btn-outline-dark -icon -iconLeft" data-toggle="popover" data-html="true" data-trigger="hover" data-content="<div class=' d-inline-block'>Voorontwerp Elkien V1</div>" data-placement="bottom">
<i class="icon-edit-alt"></i>
Configuratie wijzigen
</button>
</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": true,
"split_on_mobile": true,
"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.