<div class="hero ">
<div class="hero__inner">
<h1 class="hero__title">Letters from Tartu catalogue version 0.1 .pdf</h1>
<a href="#" class="button button--bordered hero__button ">
<span class="button__inner" data-text="Download">
<span class="button__text">
Download
</span>
</span>
</a>
</div>
</div>
<div class="hero {{ modifier }} {{ class }}">
<div class="hero__inner">
{% if data.title %}
<h1 class="hero__title">{{ data.title }}</h1>
{% endif %}
{% if data.text %}
<div class="hero__text text-large">{{ data.text }}</div>
{% endif %}
{% if data.button %}
{% include '@button' with { data: data.button, modifier: 'button--bordered', class: 'hero__button' } %}
{% endif %}
</div>
</div>
{
"language": "en-US",
"data": {
"title": "Letters from Tartu catalogue version 0.1 .pdf",
"button": {
"text": "Download",
"link": "#"
}
}
}
.hero {
padding: 64px 16px;
@include bp(sm-min) {
padding: 120px 99px 176px;
}
}
.hero--offset {
display: flex;
align-items: center;
padding: 68px 16px 64px;
@include bp(md-min) {
min-height: 100vh;
padding: 96px 32px 64px;
}
}
.hero__title {
text-transform: none;
font-size: $font-size-large;
line-height: $font-line-height-large;
font-weight: $font-weight-normal;
@include bp(sm-min) {
font-size: $font-size-h3-lg;
line-height: $font-line-height-h3-lg;
}
@include bp(md-min) {
@include gridcol(max-width, 14, $grid-cols-md);
}
.hero--offset & {
font-size: $font-size-h3;
font-weight: $font-weight-thin;
line-height: $font-line-height-h3;
max-width: 100%;
@include bp(sm-min) {
font-size: $font-size-h1-lg;
line-height: $font-line-height-h1-lg;
}
}
}
.hero__text {
margin-top: 64px;
@include gridcol(margin-left, .5, $grid-cols);
.hero--offset & {
margin-top: 35px;
@include bp(md-min) {
margin-top: 64px;
@include gridcol(margin-left, 8, $grid-cols-md);
}
}
}
.hero__button {
margin-top: 24px;
@include bp(md-min) {
margin-top: 64px;
}
}
import './hero.scss';
<div class="hero hero--offset ">
<div class="hero__inner">
<h1 class="hero__title">This is <br>Letters from Tartu</h1>
<div class="hero__text text-large">
<p>Me ei esitle ainult kirjapilte, me räägime ka kultuuriruumist mis nad on sünnitanud. Letters from Tartu on ühtlasi päevik Tartu (tüpo)elust — maja- ja poesildid, reklaamid, pakendigraafika, graffiti tüpo — kõik mis meie keskkonnas unikaalne.</p>
</div>
</div>
</div>
<div class="hero {{ modifier }} {{ class }}">
<div class="hero__inner">
{% if data.title %}
<h1 class="hero__title">{{ data.title }}</h1>
{% endif %}
{% if data.text %}
<div class="hero__text text-large">{{ data.text }}</div>
{% endif %}
{% if data.button %}
{% include '@button' with { data: data.button, modifier: 'button--bordered', class: 'hero__button' } %}
{% endif %}
</div>
</div>
{
"language": "en-US",
"data": {
"title": "This is <br>Letters from Tartu",
"button": false,
"text": "<p>Me ei esitle ainult kirjapilte, me räägime ka kultuuriruumist mis nad on sünnitanud. Letters from Tartu on ühtlasi päevik Tartu (tüpo)elust — maja- ja poesildid, reklaamid, pakendigraafika, graffiti tüpo — kõik mis meie keskkonnas unikaalne.</p>"
},
"modifier": "hero--offset"
}
.hero {
padding: 64px 16px;
@include bp(sm-min) {
padding: 120px 99px 176px;
}
}
.hero--offset {
display: flex;
align-items: center;
padding: 68px 16px 64px;
@include bp(md-min) {
min-height: 100vh;
padding: 96px 32px 64px;
}
}
.hero__title {
text-transform: none;
font-size: $font-size-large;
line-height: $font-line-height-large;
font-weight: $font-weight-normal;
@include bp(sm-min) {
font-size: $font-size-h3-lg;
line-height: $font-line-height-h3-lg;
}
@include bp(md-min) {
@include gridcol(max-width, 14, $grid-cols-md);
}
.hero--offset & {
font-size: $font-size-h3;
font-weight: $font-weight-thin;
line-height: $font-line-height-h3;
max-width: 100%;
@include bp(sm-min) {
font-size: $font-size-h1-lg;
line-height: $font-line-height-h1-lg;
}
}
}
.hero__text {
margin-top: 64px;
@include gridcol(margin-left, .5, $grid-cols);
.hero--offset & {
margin-top: 35px;
@include bp(md-min) {
margin-top: 64px;
@include gridcol(margin-left, 8, $grid-cols-md);
}
}
}
.hero__button {
margin-top: 24px;
@include bp(md-min) {
margin-top: 64px;
}
}
import './hero.scss';