<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--inset content-section--sticky faq">
<div class="content-section__title text-button">frequently asked questions</div>
<div class="content-section__content">
<div class="accordion js-accordion-group faq__accordion">
<div class="accordion__item js-accordion is-open" id="accordion-item-1">
<a href="#accordion-item-1" class="accordion__header js-accordion-control">
<div class="accordion__title">How Letters from Tartu works? <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-2">
<a href="#accordion-item-2" class="accordion__header js-accordion-control">
<div class="accordion__title">How can I use Letters from Tartu fonts? <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-3">
<a href="#accordion-item-3" class="accordion__header js-accordion-control">
<div class="accordion__title">How often are new fonts uploaded? <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
</div>
</div>
</div>
<div class="accordion__item js-accordion " id="accordion-item-4">
<a href="#accordion-item-4" class="accordion__header js-accordion-control">
<div class="accordion__title">Can we work together? <svg class="icon accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<svg class="icon accordion__header-icon--collapse accordion__header-icon">
<use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
</div>
</a>
<div class="accordion__content js-accordion-content">
<div class="accordion__inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet.
</div>
</div>
</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 '@faq' with {data: data.faq} %}
{% include '@instagram-feed' with {data: data.instagram}%}
{% 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": "#"
}
]
}
},
"faq": {
"title": "frequently asked questions",
"questions": {
"items": [
{
"id": "accordion-item-1",
"title": "How Letters from Tartu works?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
},
{
"id": "accordion-item-2",
"title": "How can I use Letters from Tartu fonts?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
},
{
"id": "accordion-item-3",
"title": "How often are new fonts uploaded?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
},
{
"id": "accordion-item-4",
"title": "Can we work together?",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nulla sed ullamcorper placerat, eros purus ultrices ipsum, ac fermentum nisi mi eget felis. Vestibulum vel facilisis sapien. Nunc nulla ex, laoreet nec viverra sit amet, blandit sit amet risus. Nulla at felis quis lacus hendrerit aliquet."
}
]
}
},
"instagram": {
"title": "instagram",
"items": [
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": true,
"link": "#"
},
{
"image": 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"
}
}
}
]
}
}