<div class="page-header page-header--image">
<img src="https://magicyeti.us/1160/338/davidson" alt="Page Header Placeholder image. This should be real alt text when implemented." class="" />
<div class="slab ">
<div class="slab__wrapper">
<h1 class="headline-group ">
<span class="headline-group__head">Title of the Page</span>
</h1>
</div>
</div>
</div>
<div class="page-header-suffix">
<div class="breadcrumb ">
<nav role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
<ul class="piped">
<li><a href="http://www.example.com/" class="">Home</a>
</li>
<li><a href="http://www.example.com/" class="">Main Landing Page</a>
</li>
<li><a href="http://www.example.com/" class="">Probably a Routing Page</a>
</li>
<li><a href="http://www.example.com/" class="">This page's parent</a>
</li>
</ul>
</nav>
</div>
<div class="local-tasks">
<h2 class="visually-hidden">Primary tabs</h2>
<ul class="inline">
<li><a href="#" class="is-active">View</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
<li><a href="#">Revisions</a></li>
<li><a href="#">Devel</a></li>
</ul>
</div>
</div>
{% set has_image = page_header.image is not empty %}
{% if page_header is not empty %}
{% if not has_image %}
<div class="page-header-prefix">
{% include '@local-tasks' %}
{% include '@breadcrumbs' %}
</div>
{% endif %}
<div class="page-header {{ page_header.variant }}">
{% if has_image %}
{% include '@image' with {
image: page_header.image
} %}
{% endif %}
{% embed '@slab' %}
{% block slab_content %}
{% include '@headline-group' with {
hg: {
tag: 'h1',
headline: page_header.page_title,
super: page_header.page_title_superhead,
sub: page_header.page_title_subhead
}
} %}
{% include '@button' with { button: page_header.button } %}
{% endblock %}
{% endembed %}
</div>
{% if has_image %}
<div class="page-header-suffix">
{% include '@breadcrumbs' %}
{% include '@local-tasks' %}
</div>
{% endif %}
{% endif %}
{
"breadcrumbs": {
"items": [
{
"link": {
"url": "http://www.example.com/",
"title": "Home"
}
},
{
"link": {
"url": "http://www.example.com/",
"title": "Main Landing Page"
}
},
{
"link": {
"url": "http://www.example.com/",
"title": "Probably a Routing Page"
}
},
{
"link": {
"url": "http://www.example.com/",
"title": "This page's parent"
}
}
]
},
"page_header": {
"page_title": "Title of the Page",
"variant": "page-header--image",
"image": {
"ratio": "24:7",
"width": 1160,
"alt": "Page Header Placeholder image. This should be real alt text when implemented.",
"tag": "davidson"
}
}
}
.page-header {
background-color: color(davidson-red);
position: relative;
z-index: 1;
// gray background: keeping because open issue
// delete later after it's settled
// @include rr-break-directive(l) {
// background-color: color(gray--medium-light);
// }
.slab {
padding: 0;
.slab__wrapper {
position: relative;
@include rr-break-directive(m) {
display: flex;
align-items: flex-start;
justify-content: space-between;
align-content: flex-start;
}
.headline-group {
padding: rr-gridbase(2) rr-gridbase(4);
color: color(davidson-white);
margin-bottom: 0;
@include rr-break-directive(l) {
display: inline-block;
@include faux-touch-edge($touch-color: color(davidson-red));
}
@include rr-break-directive(xl) {
padding: rr-gridbase(2) rr-gridbase(4) rr-gridbase(2) 0;
}
.headline-group__head {
@include rr-font-compute(5xl, medium);
}
.headline-group__super,
.headline-group__sub {
@include rr-font-compute(2xl, medium);
}
}
.button,
button,
& > .button:last-child,
& > button:last-child, {
margin: 0 rr-gridbase(4) rr-gridbase(2) rr-gridbase(4);
@include rr-break-directive(m) {
align-self: center;
margin-right: rr-gridbase(2);
margin-bottom: 0;
}
}
}
}
&.page-header--image {
position: relative;
.slab {
.slab__wrapper {
.headline-group {
@include rr-break-directive(l) {
position: absolute;
bottom: 0;
}
}
.button,
button {
@include rr-break-directive(l) {
position: absolute;
bottom: 0;
right: 0;
left: auto;
top: auto;
margin-bottom: rr-gridbase(2);
}
}
}
}
}
&.page-header--simple {
background: transparent;
.slab {
padding: rr-gridbase(4) rr-gridbase(2);
.slab__wrapper {
display: block;
.headline-group {
max-width: none;
padding: 0;
background: transparent;
color: color(davidson-red);
display: block;
&::before {
display: none;
}
}
.button,
button {
display: inline-block;
margin: rr-gridbase(2) 0 0 0;
}
}
}
}
&.page-header--news-story {
position: relative;
margin-top: 5rem;
padding-top: 3rem;
background: transparent;
@include end-glyph;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
margin: auto;
border: color(davidson-red) .3em solid;
background-color: transparent;
}
.slab {
padding-left: rem(32px);
padding-right: rem(32px);
// @include rr-break-directive(l) {
// padding-left: 0;
// padding-right: 0;
// }
.slab__wrapper {
.headline-group {
max-width: none;
padding: 0;
background: transparent;
color: color(gray-darkest);
@include rr-break-directive(l) {
margin-left: $news-story-bump-in;
.headline-group__head {
font-size: rem(56px);
line-height: 1.25em;
}
.headline-group__sub,
.headline-group__super {
font-size: rem(34px);
line-height: 1.25em;
}
.headline-group__super {
margin-bottom: rr-gridbase(4);
}
.headline-group__sub {
margin-top: rr-gridbase(4);
}
}
&::before {
display: none;
}
@include rr-break-directive(xl) {
// max-width: 70%;
// margin-right: auto;
// margin-left: auto;
}
}
}
}
}
&.page-header--visually-hidden {
@include visually-hidden;
}
}
.page-header-suffix {
max-width: 100vw;
overflow: hidden;
.breadcrumb,
.local-tasks {
@include rr-break-directive(l) {
display: block;
position: relative;
left: calc(50% - #{$global-width/2});
max-width: $global-width;
@include faux-touch-edge($touch-color: color(davidson-black), $side: right);
}
}
.local-tasks {
background-color: color(davidson-red);
&::before {
background-color: color(davidson-red);
}
}
}
There are no notes for this item.