<div class="row justify-content-center">
<div class="content-top col-12 col-print-12 ">
<h1 class="page-title">Page Title</h1>
<nav aria-label="breadcrumb">
<h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="#">Page 1</a></li>
<li class="breadcrumb-item active"><a href="#">Page 2</a></li>
<li class="breadcrumb-item">Page 3</li>
</ol>
</nav>
</div>
</div>
{% set classes = attributes["class"] | join %}
<div class="row justify-content-center">
<div class="content-top {{ layout_classes }} {{ classes }}">
{% block cms_override %}
{% block page_title %}
{% include "@page_title" %}
{% endblock page_title %}
{% block breadcrumbs %}
{% include "@breadcrumbs" %}
{% endblock breadcrumbs %}
{% endblock cms_override %}
</div>
</div>
{
"page_header": "Page Title",
"bread_items": {
"1": {
"text": "Page 1",
"url": "#"
},
"2": {
"text": "Page 2",
"url": "#"
},
"3": {
"text": "Page 3",
"url": ""
}
},
"layout_classes": "col-12 col-print-12"
}
.content-top {
background-color: $grey_20;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
padding: $space_three_quarter $spacer;
display: flex;
flex-direction: column;
margin: 0 0 $spacer 0;
.color-scheme-dark & {
background-color: $dark_mode_grey;
}
.page-title {
order: 2;
}
.breadcrumb {
order: 1;
}
}
Display top section of the main content that includes the breadcrumb navigation and page title.