<div class="page-title">
<div class="h-container">
<h1 class="page-title__text">Page Title</h1>
</div>
</div>
<div {{ class('page-title', [
isFullWidth ? 'page-title--full-width' : ''
]) }}
>
<div class="h-container">
<h1 class="page-title__text">{{ data.title }}</h1>
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Page Title"
}
}
.page-title {
width: 100%;
padding: 16px 0;
@include bp(md-min) {
padding: 24px 0 12px;
}
}
.page-title--full-width {
width: 100%;
padding: 12px 0;
background: $L-background-strong;
margin: 0;
@include bp(md-min) {
padding: 28px 0;
}
}
.page-title__text {
.page-title--full-width & {
@include h2;
color: $L-text-weak;
}
}
import './page-title.scss';
<div class="page-title page-title--full-width">
<div class="h-container">
<h1 class="page-title__text">Page Title</h1>
</div>
</div>
<div {{ class('page-title', [
isFullWidth ? 'page-title--full-width' : ''
]) }}
>
<div class="h-container">
<h1 class="page-title__text">{{ data.title }}</h1>
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Page Title"
},
"isFullWidth": true
}
.page-title {
width: 100%;
padding: 16px 0;
@include bp(md-min) {
padding: 24px 0 12px;
}
}
.page-title--full-width {
width: 100%;
padding: 12px 0;
background: $L-background-strong;
margin: 0;
@include bp(md-min) {
padding: 28px 0;
}
}
.page-title__text {
.page-title--full-width & {
@include h2;
color: $L-text-weak;
}
}
import './page-title.scss';