<div class="wt-grid-full banner banner--top-level-page">
<div class="wt-grid-main wt-grid-content-main">
<div class="wt-grid-left banner--top-level-page__margin"></div>
<div class="wt-grid-center wt-grid-section-center banner--top-level-page__title">
<h1>Top Level Page Banner</h1>
</div>
</div>
</div>
.banner--top-level-page {
background: $topLevelPageHeadingBackground;
h1 {
color: $white;
margin-top: 0;
padding-bottom: $grid-typo-spacing-s;
padding-top: $grid-typo-spacing-xl;
@media print {
padding-top: $grid-typo-spacing-l;
}
}
.wt-grid-main {
@include bigWBackground(center right);
padding-top: $secondaryNavHeight - $grid-typo-spacing-xs;
@media print {
padding-top: 0;
}
}
}
.banner--top-level-page__margin {
display: none;
@include respond-to($grid-breakpoint-ml) {
display: inline-block;
}
}
.banner--top-level-page__title {
margin-bottom: 0;
}
A banner with the Wellcome W in the background and a large title.
Example usage: https://wellcome.ac.uk/what-we-do
{
"title": "Top Level Page Banner"
}