<div class="pageheader-image-alt" style="background-image: url(../../dist/images/hero--mona-eendra-313518.jpg )">
<div class="pageheader-image-alt__inner">
<h1 class="pageheader-image-alt__heading">
Novicell Design System
</h1>
</div>
</div>
<div class="pageheader-image-alt" style="background-image: url({{ path '/dist/images/hero--mona-eendra-313518.jpg' }} )">
<div class="pageheader-image-alt__inner">
<h1 class="pageheader-image-alt__heading">
{{ header.text }}
</h1>
</div>
</div>
{
"header": {
"text": "Novicell Design System"
},
"button": {
"text": "See more"
}
}
/**
* Component: Pageheader-image
*/
:root {
--hero-text-color: var(--color-white);
--hero-background-color: var(--color-black);
--hero-content-opacity: 90%;
}
.pageheader-image-alt {
color: var(--hero-text-color);
padding-bottom: 60px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 60px;
position: relative;
background-size: cover;
@media (--viewport-md-min) {
height: 300px;
}
@media (--viewport-lg-min) {
height: 500px;
}
&:before {
background-color: color-mod(
var(--color-primary) alpha(var(--hero-content-opacity))
);
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
&__inner {
text-align: center;
position: relative;
}
&__heading {
color: var(--color-white);
font-size: 3vw;
}
}
There are no notes for this item.