<div class="main-header-intro" data-ghost-text="Main heading">
<h1 class="main-header-intro__heading">Main heading intro heading</h1>
<p class="main-header-intro__copy">Main heading intro copy</p>
</div>
This header is intended to be used as a standalone component that creates a heading for a group of components.
{
"ghost-text": "Main heading",
"heading": "Main heading intro heading",
"copy": "Main heading intro copy"
}
.main-header-intro {
display: flex;
flex-direction: column;
height: 17rem;
justify-content: center;
overflow: hidden;
position: relative;
&::before {
content: attr(data-ghost-text);
color: white;
display: block;
position: absolute;
font-family: $text-font2;
font-size: 20.6rem;
font-style: italic;
font-weight: bold;
opacity: 0.1;
text-align: center;
text-shadow: -1px -1px 0 var(--brand-primary),
1px -1px 0 var(--brand-primary), -1px 1px 0 var(--brand-primary),
1px 1px 0 var(--brand-primary);
text-transform: uppercase;
top: 50%;
transform: translateY(-50%);
width: 100%;
white-space: nowrap;
z-index: 0;
}
&__heading {
// We want to match the heading-1 style. But this component is only
// available for EF brands.
@extend .heading-1;
color: var(--brand-primary);
text-align: center;
z-index: 1;
}
&__copy {
@extend .p-1;
align-self: center;
max-width: 50rem;
text-align: center;
}
}
h2.main-header-intro {
&__heading {
@extend .heading-2;
}
}
<div class="main-header-intro" data-ghost-text="{{ghost-text}}">
{{#unless ish2styles}}
<h1 class="main-header-intro__heading">{{heading}}</h1>
{{/unless}}
{{#if ish2styles}}
<h2 class="main-header-intro__heading">{{heading}}</h2>
{{/if}}
{{#if copy}}<p class="main-header-intro__copy">{{copy}}</p>{{/if}}
</div>