<div class="notification-list"></div>
<div class="cursor-gradient">
</div>
<header class="header ">
<div class="header__inner">
<div class="header__grid grid grid--no-gutter">
<div class="header__column grid__col grid__col--md-5">
<button type="button" class="button button--icon header__burger-button ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
</span>
</span>
</button>
<div class="logo header__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<button type="button" class="button button--icon header__search-button header__search-button--mobile ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
</span>
</span>
</button>
</div>
<div class="header__column header__column--desktop grid__col grid__col--md-19">
<div class="header__theme-wrapper">
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
</div>
<button type="button" class="button button--icon-text header__search-button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-down-left"></use>
</svg>
</span>
</span>
</button>
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="header__burger-top">
<button type="button" class="button button--icon header__burger-button header__burger-button--close ">
<span class="button__pseudo-icon">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
<span class="button__inner" data-text="">
<span class="button__text">
<svg class="icon button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
</span>
</span>
</button>
</div>
</div>
<div class="header_appear-container">
<div class="header__search">
<form method="get" action="the.url.com">
<div class="textfield textfield--label-hidden header__search-field">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="search" name="textfield" placeholder="Search">
<label class="textfield__label text-button " for="search">
Textfield label
</label>
</div>
</div>
</form>
</div>
<div class="header__burger">
<nav class="navigation header__navigation text-button">
<ul class="navigation__list">
<li class="navigation__item is-current navigation__item--only-mobile " data-text="home">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
home
</span>
</a>
</li>
<li class="navigation__item " data-text="fonts">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
fonts
</span>
</a>
</li>
<li class="navigation__item " data-text="about">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
about
</span>
</a>
</li>
<li class="navigation__item navigation__item--only-mobile " data-text="contact">
<a href="#" class="navigation__link">
<span class="navigation__link-text">
contact
</span>
</a>
</li>
</ul>
</nav>
<div class="header__burger-heading text-small">switch themes</div>
<div class="theme-switcher header__theme">
<button data-theme="theme-beige" class="theme-switcher__button theme-switcher__button--beige">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-gray" class="theme-switcher__button theme-switcher__button--gray">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-yellow" class="theme-switcher__button theme-switcher__button--yellow">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-green" class="theme-switcher__button theme-switcher__button--green">
<span class="theme-switcher__icon-cross"></span>
</button>
<button data-theme="theme-dark" class="theme-switcher__button theme-switcher__button--dark">
<span class="theme-switcher__icon-cross"></span>
</button>
</div>
<div class="header__burger-heading text-small">Instagram</div>
<a href="#" class="header__link h2">@lettersfromtartu</a>
</div>
</div>
</header>
<main class="main main--double-padding">
<div class="content-section content-section--sticky content-section--inset content-section--visible-sm ">
<div class="content-section__title text-button">terms and conditions</div>
<div class="content-section__content">
<div class="terms">
<div class="content-section content-section--sticky-z terms__section terms__section--large">
<div class="content-section__title text-button">1. introduction</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
<div class="content-section content-section--outset content-section--lineless terms__sub-section">
<div class="content-section__title ">1.2 subsection</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky-z terms__section">
<div class="content-section__title text-button">2. authorized use</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
</div>
</div>
<div class="content-section content-section--sticky-z terms__section">
<div class="content-section__title text-button">3. information we collect</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
</div>
</div>
<div class="content-section content-section--sticky-z terms__section">
<div class="content-section__title text-button">4. our commitment</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
</div>
</div>
<div class="content-section content-section--sticky-z terms__section">
<div class="content-section__title text-button">5. in e-mail and other electronics</div>
<div class="content-section__content">
<div class="terms__section-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer__top grid grid--no-gutter">
<div class="footer__col grid__col grid__col--md-8">
<div class="footer__link-title text-small">facebook</div>
<div class="footer__link-wrapper h2">
<a class="footer__link" href="#">
@lettersfromtartu
</a>
</div>
</div>
<div class="footer__col grid__col grid__col--md-9 grid__col--lg-10">
<form class="newsletter footer__newsletter newsletter--block">
<div class="newsletter__textfield-container">
<div class="newsletter__button-wrapper">
<div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
<div class="textfield__inner">
<input class="textfield__input" type="text" id="footerEmail" name="textfield" placeholder="Enter your email here">
<label class="textfield__label text-button " for="footerEmail">
newsletter
</label>
</div>
</div>
<button type="submit" class="button newsletter__button newsletter__button--mobile ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
<div class="newsletter__button-wrapper">
<div class="newsletter__label text-small">
newsletter
<span class="newsletter__error-message"></span>
</div>
<button type="submit" class="button newsletter__button ">
<span class="button__inner" data-text="subscribe">
<span class="button__text">
subscribe
</span>
</span>
</button>
</div>
</div>
<div class="newsletter__success">
<div class="text-large newsletter__vw-title">
Thank you for signing up!
</div>
Your subscription has been confirmed. You've been added to our list and will hear back from us soon.
</div>
</form>
</div>
<div class="footer__col grid__col grid__col--md-7 grid__col--lg-6">
<div class="button-list button-list--col-2 footer__button-list">
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Search">
<span class="button__text">
Search
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="FAQ">
<span class="button__text">
FAQ
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Index">
<span class="button__text">
Index
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Fonts">
<span class="button__text">
Fonts
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="About">
<span class="button__text">
About
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
<div class="button-list__item">
<a href="#" class="button button--icon-text button-list__button ">
<span class="button__inner" data-text="Contact">
<span class="button__text">
Contact
<svg class="icon button__icon--appear button__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="footer__bottom-left text-small">
2020 Letters from Tartu. All rights reserved.
</div>
<div class="logo footer__logo">
<a href="#" class="logo__content logo__link">
<figure class="image logo__image">
<img loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/logo/logo.svg" data-sizes="auto" alt="letters-logo" class="image__img lazyload">
</figure>
</a>
</div>
<div class="footer__bottom-right text-small">
<a class="link" href="#">
Terms and conditions
</a>
</div>
</div>
</footer>
{% extends '@view-base' %}
{% block page %}
{% include '@terms' with {data: data.terms} %}
{% endblock %}
{
"language": "en-US",
"data": {
"paddingModifier": "main--double-padding",
"header": {
"themeHeading": "switch themes",
"instagram": {
"heading": "Instagram",
"link": "#",
"handle": "lettersfromtartu"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"searchButton": {
"text": "Search"
},
"navigation": {
"items": [
{
"link": "#",
"title": "home",
"current": "true",
"is_only_mobile": true
},
{
"link": "#",
"title": "fonts"
},
{
"link": "#",
"title": "about"
},
{
"link": "#",
"title": "contact",
"is_only_mobile": true
}
]
},
"search": {
"label": "Textfield label",
"id": "search",
"name": "textfield",
"placeholder": "Search",
"url": "the.url.com"
}
},
"footer": {
"socialMedia": {
"title": "facebook",
"text": " @lettersfromtartu",
"link": "#"
},
"rightsText": "2020 Letters from Tartu. All rights reserved.",
"terms": {
"text": "Terms and conditions",
"link": "#"
},
"logo": {
"image": {
"alt": "letters-logo",
"srcset": "../../inc/logo/logo.svg"
},
"link": "#"
},
"newsletter": {
"textfield": {
"label": "newsletter",
"id": "footerEmail",
"name": "textfield",
"placeholder": "Enter your email here"
},
"button": {
"text": "subscribe"
},
"buttonMobile": {
"icon": "arrow-enter-bold"
},
"label": "newsletter",
"thanks": {
"title": "Thank you for signing up!",
"message": "Your subscription has been confirmed. You've been added to our list and will hear back from us soon."
}
},
"buttonList": {
"buttonModifier": "button--icon-text button-ico",
"buttons": [
{
"text": "Search",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "FAQ",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Index",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Fonts",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "About",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
},
{
"text": "Contact",
"icon": "arrow-right",
"iconAppear": true,
"link": "#"
}
]
}
},
"terms": {
"sectionTitle": "terms and conditions",
"sections": [
{
"title": "1. introduction",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie.",
"subSections": [
{
"title": "1.2 subsection",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
}
]
},
{
"title": "2. authorized use",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
},
{
"title": "3. information we collect",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
},
{
"title": "4. our commitment",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
},
{
"title": "5. in e-mail and other electronics",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sem arcu, convallis et nunc nec, luctus auctor quam. Nam consectetur velit a ipsum elementum consequat. Sed eget viverra ipsum, eu imperdiet nibh. Nulla lacinia odio id nulla faucibus, vitae hendrerit ligula placerat. Nullam luctus est id risus elementum molestie."
}
]
},
"notifications": [
{
"component": "BrowserNotification",
"data": {
"content": "You are using an outdated browser. Please upgrade your browser to improve your experience and security.",
"actions": [
{
"link": "https://google.com",
"text": "Learn more",
"attributes": "target='_blank'"
}
],
"button": {
"text": "OK"
}
}
},
{
"component": "CookieNotification",
"data": {
"content": "Our website uses cookies to make your browsing experience better. By using our site you agree to our <a href='#' class=\"text\">Cookie Policy</a>.",
"button": {
"text": "I Agree"
}
}
}
]
}
}