Copy environment

Landing

<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  ">
    <div class="landing-hero  ">
        <div class="landing-hero__inner">
            <h1 class="landing-hero__title-container">
                <span class="landing-hero__title h1" data-text="Letters"><span class="landing-hero__title-text">Letters</span>Letters</span>
                <span class="landing-hero__title h1 landing-hero__title--second" data-text="from"><span class="landing-hero__title-text">from</span>from</span>
                <span class="landing-hero__title h1 landing-hero__title--third" data-text="Tartu"><span class="landing-hero__title-text">Tartu</span>Tartu</span>
            </h1>
            <div class="landing-hero__info-container">
                <div class="landing-hero__info text-large">
                    Creative initiative showcasing typefaces designed in Tartu and historical letters found around the town.
                </div>

                <a href="#" class="button button--icon-text landing-hero__button ">

                    <span class="button__inner" data-text="Read more">
                        <span class="button__text">
                            Read more
                            <svg class="icon  button__icon">
                                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                            </svg>

                        </span>
                    </span>
                </a>
            </div>
        </div>
    </div>

    <div class="content-section content-section--sticky ">
        <div class="content-section__title text-button">recent fonts</div>
        <div class="content-section__content">
            <div class="item-grid">
                <div class="item-grid__inner">

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>

                    <div class="item-cell item-cell--ratio item-grid__item" data-font="" data-id="">
                        <a class="item-cell__content" href="#">
                            <div class="item-cell__main-text">
                                Abg
                            </div>
                            <span class="item-cell__sub-text text-small">
                                Flex 0.1
                            </span>
                        </a>
                    </div>
                </div>

                <a href="#" class="button button--icon-text item-grid__button ">

                    <span class="button__inner" data-text="Browse more">
                        <span class="button__text">
                            Browse more
                            <svg class="icon  button__icon">
                                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
                            </svg>

                        </span>
                    </span>
                </a>
            </div>

        </div>
    </div>

    <div class="content-section content-section--sticky ">
        <div class="content-section__title text-button">newsletter</div>
        <div class="content-section__content">
            <div class="newsletter-module grid grid--no-gutter grid--middle-md grid--center-md">
                <div class="newsletter-module__inner grid__col grid__col--md-18 grid__col--lg-12">
                    <h3 class="newsletter-module__title">Subscribe to our newsletter</h3>
                    <div class="newsletter-module__text">Stay up to date with new additions and upcoming events</div>
                    <form class="newsletter  newsletter-module__newsletter ">
                        <div class="newsletter__textfield-container">

                            <div class="textfield textfield--label-hidden textfield--border-hidden newsletter__textfield">
                                <div class="textfield__inner">
                                    <input class="textfield__input" type="text" id="moduleEmail" name="textfield" placeholder="Enter your email here">
                                    <label class="textfield__label text-button " for="moduleEmail">
                                        newsletter
                                    </label>
                                </div>
                            </div>

                            <button type="submit" class="button  newsletter__button ">

                                <span class="button__inner" data-text="subscribe">
                                    <span class="button__text">
                                        subscribe

                                    </span>
                                </span>
                            </button>

                            <button type="submit" class="button button--icon newsletter__button newsletter__button--mobile ">
                                <span class="button__pseudo-icon">
                                    <svg class="icon  button__icon">
                                        <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></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#arrow-enter-bold"></use>
                                        </svg>

                                    </span>
                                </span>
                            </button>
                        </div>
                        <span class="newsletter__error-message"></span>
                        <div class="newsletter__check-container">

                            <div class="check newsletter__check">
                                <input type="checkbox" id="check1" name="check" value="" class="check__input">
                                <label for="check1" 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"><span>I agree with <a href="#" class="link">terms and conditions</a></span></span>
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

    <div class="content-section content-section--sticky ">
        <div class="content-section__title text-button">instagram</div>
        <div class="content-section__content">
            <div class="instagram-feed">
                <div class="instagram-feed__inner">
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                    <a class="instagram-feed__link" href="#">
                        <figure class="image image--fluid instagram-feed__image">
                            <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/300x300 300w, //via.placeholder.com/500x500 500w, //via.placeholder.com/1000x1000 1000w, //via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w" data-sizes="auto" alt="" class="image__img lazyload">

                        </figure>
                    </a>
                </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 '@landing-hero' with {data: data.landingHero} %}
    {% include '@item-grid' with {data: data.recentFonts} %}
    {% include '@newsletter-module' with {data: data.newsletter} %}
    {% include '@instagram-feed' with {data: data.instagram}%}
{% endblock %}
{
  "language": "en-US",
  "data": {
    "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"
      }
    },
    "landingHero": {
      "info": "Creative initiative showcasing typefaces designed in Tartu and historical letters found around the town.",
      "button": {
        "text": "Read more",
        "icon": "arrow-right",
        "link": "#"
      }
    },
    "instagram": {
      "title": "instagram",
      "items": [
        {
          "image": true,
          "link": "#"
        },
        {
          "image": true,
          "link": "#"
        },
        {
          "image": true,
          "link": "#"
        },
        {
          "image": true,
          "link": "#"
        },
        {
          "image": true,
          "link": "#"
        },
        {
          "image": true,
          "link": "#"
        }
      ]
    },
    "newsletter": {
      "sectionTitle": "newsletter",
      "title": "Subscribe to our newsletter",
      "text": "Stay up to date with new additions and upcoming events",
      "newsletter": {
        "textfield": {
          "label": "newsletter",
          "id": "moduleEmail",
          "name": "textfield",
          "placeholder": "Enter your email here"
        },
        "button": {
          "text": "subscribe"
        },
        "buttonMobile": {
          "icon": "arrow-enter-bold"
        },
        "check": {
          "label": "<span>I agree with <a href=\"#\" class=\"link\">terms and conditions</a></span>",
          "id": "check1",
          "name": "check"
        }
      }
    },
    "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": "#"
          }
        ]
      }
    },
    "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"
          }
        }
      }
    ],
    "recentFonts": {
      "sectionTitle": "recent fonts",
      "button": {
        "text": "Browse more",
        "icon": "arrow-right",
        "link": "#"
      },
      "items": [
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        },
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        },
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        },
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        },
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        },
        {
          "mainText": "Abg",
          "subText": "Flex 0.1",
          "link": "#"
        }
      ]
    }
  }
}