Copy environment

Timeline

Preview 
<div class="timeline  ">
    <div class="h-container">
        <div class="grid grid--center-xs grid--start-sm">
            <div class="grid__col grid__col--xs-20 grid__col--bottom-gutter-xs-2 grid__col--bottom-gutter-sm-1 grid__col--sm-16 grid__col--left-gutter-sm-4">
                <h2 class="color-green">Meie teekond</h2>
            </div>

            <div class="grid__col grid__col--xs-20">
                <div class="timeline  ">
                    <div class="h-container">
                        <div class="grid grid--equalheight timeline__list">
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1916</span><br> Eesti põlevkivitööstus saab alguse Esimesel maailmasõjal puhkenud kütusekriisi tõttu
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">24.11.1918</span><br> moodustatakse RAS Esimene Eesti Põlevkivitööstus
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1921</span><br> Kohtla-Järvel prooviõlivabriku käivitamine, võimsus 40 t/ööpäevas
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1924…1943</span><br> ehitatakse neli Kiviter õlivabrikut
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1945</span><br> Uue põlevkivitöötlemise kompleksi rajamine Kohtla-Järvel
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1948…1952</span><br> Majapidamiskgaasi pumpamine Leningradi ning Tallinna
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1951 ja 1981</span><br> Valmivad 5. õlivabrik ning 1000-tonnine seade
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">1962</span><br> Toodetakse esimesed tonnid benseeni ja tolueeni
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">27.11.1997</span><br> RAS Kiviter erastamine ja VKG asutamine
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">2009 … 2014 … 2015</span><br> Petroter I, II, III avamised
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">2010</span><br> Ojamaa kaevandus hakkab tootma põlevkivi ning 31.01.2013 toimub kaevanduse pidulik avamine
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">2012</span><br> Ainulaadse maapealse kaetud 12,5km konveieri käiku laskmine
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure ">
                                <div class="timeline__bullet-container">
                                    <div class="timeline__bullet"></div>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">2008 … 2014 … 2016</span><br> Esimene ettevõte Eestis, mis hakkas kasutama suitsugaaside väävlist puhastamise seadmeid
                                    </p>
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-6 grid__col--sm-3  grid__col--left-gutter-xs-2 grid__col--left-gutter-sm-4 timeline__figure timeline__figure--w-image">

                                <div class="image image--block timeline__image">
                                    <img 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="//placehold.it/100x100 100w 100h, //placehold.it/250x250 250w 250h, //placehold.it/500x500 500w 500h, //placehold.it/750x750 750w 750h, //placehold.it/1000x1000 1000w 1000h, //placehold.it/320x320 320w 320h, //placehold.it/640x640 640w 640h, //placehold.it/600x600 600w 600h, //placehold.it/1200x1200 1200w 1200h, //placehold.it/1600x1600 1600w 1600h, //placehold.it/3200x3200 3200w 3200h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="grid__col grid__col--xs-13 grid__col--sm-11 grid__col--left-gutter-xs-1 timeline__content">
                                <div class="timeline__text text">
                                    <p class="color-white">
                                        <span class="color-green bold timeline__date">2018</span><br> Kogu tooraine ja jäätmed liiguvad keskkonnasõbralikutes konveierisüsteemides
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "timeline",
    "timeline": {
      "items": [
        {
          "date": "1916",
          "text": "Eesti põlevkivitööstus saab alguse Esimesel maailmasõjal puhkenud kütusekriisi tõttu",
          "image": null
        },
        {
          "date": "24.11.1918",
          "text": "moodustatakse RAS Esimene Eesti Põlevkivitööstus",
          "image": true
        },
        {
          "date": "1921",
          "text": "Kohtla-Järvel prooviõlivabriku käivitamine, võimsus 40 t/ööpäevas",
          "image": null
        },
        {
          "date": "1924…1943",
          "text": "ehitatakse neli Kiviter õlivabrikut",
          "image": true
        },
        {
          "date": "1945",
          "text": "Uue põlevkivitöötlemise kompleksi rajamine Kohtla-Järvel",
          "image": null
        },
        {
          "date": "1948…1952",
          "text": "Majapidamiskgaasi pumpamine Leningradi ning Tallinna",
          "image": null
        },
        {
          "date": "1951 ja 1981",
          "text": "Valmivad 5. õlivabrik ning 1000-tonnine seade",
          "image": null
        },
        {
          "date": "1962",
          "text": "Toodetakse esimesed tonnid benseeni ja tolueeni",
          "image": null
        },
        {
          "date": "27.11.1997",
          "text": "RAS Kiviter erastamine ja VKG asutamine",
          "image": true
        },
        {
          "date": "2009 … 2014 … 2015",
          "text": "Petroter I, II, III avamised",
          "image": true
        },
        {
          "date": "2010",
          "text": "Ojamaa kaevandus hakkab tootma põlevkivi ning 31.01.2013 toimub kaevanduse pidulik avamine",
          "image": true
        },
        {
          "date": "2012",
          "text": "Ainulaadse maapealse kaetud 12,5km konveieri käiku laskmine",
          "image": null
        },
        {
          "date": "2008 … 2014 … 2016",
          "text": "Esimene ettevõte Eestis, mis hakkas kasutama suitsugaaside väävlist puhastamise seadmeid",
          "image": null
        },
        {
          "date": "2018",
          "text": "Kogu tooraine ja jäätmed liiguvad keskkonnasõbralikutes konveierisüsteemides",
          "image": true
        }
      ]
    },
    "title": "Meie teekond"
  }
}
  • Handle: @s-timeline--default
  • Tags:
  • Variants (2): default, view
  • Preview:
  • Filesystem Path: src/patterns/sections/timeline/timeline.twig
  • References (1): @timeline