Copy environment

Timeline

Preview 
<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>
 
{
  "language": "en-US",
  "data": {
    "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
      }
    ]
  }
}

Simple

Preview 
<div class="timeline timeline--simple ">
    <div class="h-container">
        <div class="timeline__list">
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1916</span><br> Eesti põlevkivitööstus saab alguse Esimesel maailmasõjal puhkenud kütusekriisi tõttu
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">24.11.1918</span><br> moodustatakse RAS Esimene Eesti Põlevkivitööstus
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1921</span><br> Kohtla-Järvel prooviõlivabriku käivitamine, võimsus 40 t/ööpäevas
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1924…1943</span><br> ehitatakse neli Kiviter õlivabrikut
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1945</span><br> Uue põlevkivitöötlemise kompleksi rajamine Kohtla-Järvel
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1948…1952</span><br> Majapidamiskgaasi pumpamine Leningradi ning Tallinna
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1951 ja 1981</span><br> Valmivad 5. õlivabrik ning 1000-tonnine seade
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">1962</span><br> Toodetakse esimesed tonnid benseeni ja tolueeni
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">27.11.1997</span><br> RAS Kiviter erastamine ja VKG asutamine
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">2009 … 2014 … 2015</span><br> Petroter I, II, III avamised
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">2010</span><br> Ojamaa kaevandus hakkab tootma põlevkivi ning 31.01.2013 toimub kaevanduse pidulik avamine
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">2012</span><br> Ainulaadse maapealse kaetud 12,5km konveieri käiku laskmine
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">2008 … 2014 … 2016</span><br> Esimene ettevõte Eestis, mis hakkas kasutama suitsugaaside väävlist puhastamise seadmeid
                    </div>
                </div>
            </div>
            <div class="timeline__item">
                <div class="timeline__figure">
                    <div class="timeline__bullet-container">
                        <div class="timeline__bullet"></div>
                    </div>
                </div>
                <div class="timeline__content">
                    <div class="timeline__text text">
                        <span class="bold">2018</span><br> Kogu tooraine ja jäätmed liiguvad keskkonnasõbralikutes konveierisüsteemides
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "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
      }
    ]
  },
  "modifier": "timeline--simple"
}
  • Handle: @timeline--simple
  • Tags:
  • Variants (2): default, simple
  • Preview:
  • Filesystem Path: src/patterns/components/timeline/timeline.twig
  • References (1): @image