<div class="content-section content-section--inset content-section--sticky ">
<div class="content-section__title text-button">get in touch</div>
<div class="content-section__content">
<div class="contact ">
<div class="contact__info text-large">
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
tartu@font.ee
</div>
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
instagram.com/lettersfromtartu
</div>
<div class="contact__info-text"><svg class="icon contact__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
facebook.com/lettersfromtartu
</div>
</div>
<form class="contact__form" name="contact" action="/">
<div class="grid grid--no-gutter">
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="name" name="contact" placeholder="What is your name?">
<label class="textfield__label text-button " for="name">
Hello!
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="email" name="contact" placeholder="example@example.com">
<label class="textfield__label text-button " for="email">
Where can we reach you at?
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<div class="textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="line" name="contact" placeholder="Type here">
<label class="textfield__label text-button " for="line">
Send us a line!
</label>
</div>
</div>
</div>
<div class="grid__col grid__col--xs-12">
<button type="button" class="button button--bordered contact__submit-button ">
<span class="button__inner" data-text="send">
<span class="button__text">
send
</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
{% set content %}
<div class="contact {{ class }} {{ modifier }}">
{% if data.contactInfo %}
<div class="contact__info text-large">
{% for contact in data.contactInfo %}
{% spaceless %}
<div class="contact__info-text">
{% if data.contactIcon %}
{% include '@icon' with {class: "contact__icon", name: data.contactIcon} %}
{% endif %}
{{ contact.text }}
</div>
{% endspaceless %}
{% endfor %}
</div>
{% endif %}
{% if data.fields %}
<form class="contact__form" name="{{ data.formName }}" action="/">
<div class="grid grid--no-gutter">
{% for field in data.fields %}
<div class="grid__col grid__col--xs-12">
{% include '@textfield' with {data: field|merge({name: data.formName})} %}
</div>
{% endfor %}
{% if data.submitButton %}
<div class="grid__col grid__col--xs-12">
{% include '@button' with {class: "contact__submit-button", modifier: "button--bordered", data: data.submitButton} %}
</div>
{% endif %}
</div>
</form>
{% elseif data.form %}
{{ data.form }}
{% endif %}
</div>
{% endset %}
{% include '@content-section' with {modifier: "content-section--inset content-section--sticky", data: {title: data.title, content: content}} %}
{
"language": "en-US",
"data": {
"title": "get in touch",
"contactInfo": [
{
"text": "tartu@font.ee"
},
{
"text": "instagram.com/lettersfromtartu"
},
{
"text": "facebook.com/lettersfromtartu"
}
],
"contactIcon": "arrow-enter-bold",
"formName": "contact",
"fields": [
{
"label": "Hello!",
"id": "name",
"name": "contact",
"placeholder": "What is your name?"
},
{
"label": "Where can we reach you at?",
"id": "email",
"name": "contact",
"placeholder": "example@example.com"
},
{
"label": "Send us a line!",
"id": "line",
"name": "contact",
"placeholder": "Type here"
}
],
"submitButton": {
"text": "send"
}
}
}
.contact {
display: flex;
flex-direction: column-reverse;
@include bp(sm-min) {
flex-direction: column;
}
}
.contact__info {
border-top: 1px solid var(--color-brand);
transition: border-top-color $transition-duration $transition-easing;
padding: 24px;
@include bp(sm-min) {
border-top: none;
padding: 40px 84px;
}
}
.contact__icon {
margin-bottom: -1px;
font-size: 11px;
@include bp(sm-min) {
font-size: 19px;
}
}
.contact__form {
@include bp(sm-min) {
border-top: 1px solid var(--color-brand);
transition: border-top-color $transition-duration $transition-easing;
}
}
.textfield__li {
margin: 0 !important;
padding: 0 !important;
}
.textfield__label {
.contact & {
height: auto;
margin-bottom: 0;
padding-top: 28px;
padding-bottom: 8px;
@include bp(sm-min) {
padding-top: 32px;
padding-bottom: 26px;
}
}
}
.contact__submit-button {
margin: 36px 16px 40px;
@include bp(sm-min) {
margin: 64px 82px 96px;
}
}
.contact__message {
padding: 158px 82px;
}
import './contact.scss';