Organism

Section Timeline

Show code
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
            
              <section class="section-timeline">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

            
          

.has-color-blue.has-color-grey.has-color-orange

Show code
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
            
              <section class="section-timeline has-color-blue has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-timeline has-color-grey has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-timeline has-color-orange has-padding-m">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

            
          

.has-padding-s.has-padding-m.has-padding-l

Show code
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
            
              <section class="section-timeline has-padding-s has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-timeline has-padding-m has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-timeline has-padding-l has-color-blue">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

            
          

with headline, with headline & text

Show code

Headline

SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.

SLA-1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
DIY Printer

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
Witbox Go!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Link
            
              <section class="section-timeline">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-header align-center">
          <h3>
            Headline
          </h3>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div style="margin: 40px 0;"></div>
<section class="section-timeline">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-header align-center">
          <h3>
            Headline
          </h3>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="timeline">
          <div class="timeline-body">
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/SLA_1_old_school_3d_printer.png" alt=""> <span class="timeline-item-title">SLA-1</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/mendel_3D_printer_example_trinamic.png" alt=""> <span class="timeline-item-title">DIY Printer</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
            <div class="timeline-item">
              <img class="timeline-item-img" src="/images/_landing/modern_silent_3D_printer_bq_trinamic_inside.png" alt=""> <span class="timeline-item-title">Witbox Go!</span>
              <div class="timeline-item-divider"></div>
              <p>
                <span class="timeline-item-sub">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</span>
              <span class="timeline-item-sub"><a href="button-link" class="btn btn-link">Link</a></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>