<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="item-filter " data-query="">
<div class="content-section content-section--sticky item-filter__font-col">
<div class="content-section__title text-button">
<div class="item-filter__font-title">
<div class="item-filter__font-title-text">
recent fonts
</div>
<button type="button" class="button item-filter__burger-open ">
<span class="button__inner" data-text="filter and sort">
<span class="button__text">
filter and sort
</span>
</span>
</button>
</div>
</div>
<div class="content-section__content">
<div class="item-list item-filter__item-list ">
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Väike mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Eriti väike mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Kõige väiksem mölder hüppas rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
<div class="item-cell item-list__cell" data-font="" data-id="">
<a class="item-cell__content" href="#">
<div class="item-cell__main-text">
Väike mölder hüppas eriti suurele rongile.
</div>
<span class="item-cell__sub-text text-small">
Flex 0.1
</span>
</a>
</div>
</div>
</div>
</div>
<div class="content-section content-section--sticky item-filter__filter-col">
<div class="content-section__title text-button">
<div class="item-filter__filter-text">filter by</div>
</div>
<div class="content-section__content">
<div class="content-section item-filter__sort-content item-filter__sort-content--small-top">
<div class="content-section__content">
<fieldset class="choice-group item-filter__filter-list">
<legend class="choice-group__label"></legend>
<div class="choice-group__inner">
<div class="check choice-group__item">
<input type="checkbox" id="latin" name="filter" value="" class="check__input">
<label for="latin" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
</span>
<span class="check__text">Latin</span>
</label>
</div>
<div class="check choice-group__item">
<input type="checkbox" id="sans" name="filter" value="" class="check__input">
<label for="sans" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
</span>
<span class="check__text">Sans Serif</span>
</label>
</div>
<div class="check choice-group__item">
<input type="checkbox" id="display" name="filter" value="" class="check__input">
<label for="display" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
</span>
<span class="check__text">Display</span>
</label>
</div>
<div class="check choice-group__item">
<input type="checkbox" id="serif" name="filter" value="" class="check__input">
<label for="serif" class="check__label">
<span class="check__indicator">
<svg class="icon check__icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
</span>
<span class="check__text">Serif</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="item-filter__burger-heading">switch colors</div>
<div class="theme-switcher item-filter__theme-switcher">
<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>
</div>
<div class="item-filter__burger-header">
<button type="button" class="button button--icon item-filter__burger-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>
</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 '@item-filter' with {data: data.itemFilter} %}
{% 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": "#"
}
]
}
},
"itemFilter": {
"listTitle": "recent fonts",
"itemList": {
"items": [
{
"mainText": "Väike mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Eriti väike mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Kõige väiksem mölder hüppas rongile.",
"subText": "Flex 0.1",
"link": "#"
},
{
"mainText": "Väike mölder hüppas eriti suurele rongile.",
"subText": "Flex 0.1",
"link": "#"
}
]
},
"filterTitle": "filter by",
"themeSwitcherTitle": "switch colors",
"themeSwitcher": {
"palettes": [
{
"class": "beige"
},
{
"class": "gray"
},
{
"class": "yellow"
},
{
"class": "green"
},
{
"class": "dark"
}
]
},
"burgerButton": {
"text": "filter and sort"
},
"burgerCloseButton": {
"text": null,
"icon": "exit"
},
"filters": {
"type": "check",
"choices": [
{
"id": "latin",
"label": "Latin",
"name": "filter"
},
{
"id": "sans",
"label": "Sans Serif",
"name": "filter"
},
{
"id": "display",
"label": "Display",
"name": "filter"
},
{
"id": "serif",
"label": "Serif",
"name": "filter"
}
]
}
}
}
}