Copy environment

Single 

<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="h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-12 grid__col--md-4">
                <article>
                    <figure class="image image--fluid ">
                        <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%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>
                    <h2><a href="#">Pealkiri</a></h2>
                    <time datetime="2017-01-01T00:00:00+00:00">May 13, 2017</time>
                    <span></span>
                    <div class="editor text">
                        <blockquote>
                            <p>This should be a blockquote.</p>
                        </blockquote>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                        <figure>
                            <figure class="image image--fluid ">
                                <picture class="image__picture">
                                    <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20150%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/150x100 150w, //via.placeholder.com/300x200 300w, //via.placeholder.com/600x400 600w" media="(min-width: 1024px)" />
                                    <source srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20125%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/125x100 125w, //via.placeholder.com/250x200 250w, //via.placeholder.com/500x400 500w" media="(min-width: 768px)" />
                                    <img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%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">

                                </picture>

                            </figure>
                        </figure>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iure, sequi maiores. Quae, unde accusantium, repellat labore adipisci dicta, cupiditate, laboriosam qui accusamus laudantium illum nisi nemo. Error, voluptatem, similique.</p>
                    </div>
                </article>
            </div>
        </div>
    </div>

</main>
 
{% extends '@view-base' %}

{% block page %}
    <div class="h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-12 grid__col--md-4">
                <article>
                    {% include '@image' with { modifier: 'image--fluid', data: data.image|srcset('100x100') } %}
                    <h2><a href="{{ data.permalink }}">{{ data.title }}</a></h2>
                    <time datetime="{{ data.isoDate }}">{{ data.date }}</time>
                    <span>{{ data.author }}</span>
                    {% if data.content is defined %}
                        {{ data.content }}
                    {% else %}
                        {% include '@editor' %}
                    {% endif %}
                </article>
            </div>
        </div>
    </div>
{% 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"
      }
    },
    "title": "Pealkiri",
    "permalink": "#",
    "isoDate": "2017-01-01T00:00:00+00:00",
    "date": "May 13, 2017",
    "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"
          }
        }
      }
    ]
  }
}
  • Handle: @view-single
  • Filesystem Path: src/patterns/views/single/single.twig
  • References (3): @view-base, @image, @editor