Copy environment

Timeline

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