Timeline

Timeline a display of a list of events in chronological order.

Timeline #1

1

Consult

This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.
2

Plan

Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.
3

Develop

Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.
4

Release

Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.

HTML:

              
                <!-- Timeline Section -->
                <div class="container">
                  <ul class="u-timeline">
                    <li class="u-timeline__item">
                      <div class="u-timeline__content">
                        <div class="media">
                          <span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
                            <span class="u-icon__inner">1</span>
                          </span>
                          <div class="media-body">
                            <h4 class="h5">Consult</h4>
                            <p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                          </div>
                        </div>
                      </div>
                      <div class="u-timeline__info">
                        <img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/planning-illustration.svg" alt="Image Description">
                      </div>
                      <div class="u-timeline__spacer"></div>
                    </li>

                    <li class="u-timeline__item">
                      <div class="u-timeline__content">
                        <div class="media">
                          <span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
                            <span class="u-icon__inner">2</span>
                          </span>
                          <div class="media-body">
                            <h4 class="h5">Plan</h4>
                            <p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
                          </div>
                        </div>
                      </div>
                      <div class="u-timeline__info">
                        <img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/creation-process-illustration.svg" alt="Image Description">
                      </div>
                      <div class="u-timeline__spacer"></div>
                    </li>

                    <li class="u-timeline__item">
                      <div class="u-timeline__content">
                        <div class="media">
                          <span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
                            <span class="u-icon__inner">3</span>
                          </span>
                          <div class="media-body">
                            <h4 class="h5">Develop</h4>
                            <p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
                          </div>
                        </div>
                      </div>
                      <div class="u-timeline__info">
                        <img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/co-working-illustration.svg" alt="Image Description">
                      </div>
                      <div class="u-timeline__spacer"></div>
                    </li>

                    <li class="u-timeline__item">
                      <div class="u-timeline__content">
                        <div class="media">
                          <span class="u-icon u-icon--primary u-icon--sm u-timeline__icon rounded-circle mr-3">
                            <span class="u-icon__inner">4</span>
                          </span>
                          <div class="media-body">
                            <h4 class="h5">Release</h4>
                            <p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                          </div>
                        </div>
                      </div>
                      <div class="u-timeline__info">
                        <img class="w-sm-50 w-lg-75 mx-lg-auto" src="../assets/svg/components/news-illustration.svg" alt="Image Description">
                      </div>
                      <div class="u-timeline__spacer"></div>
                    </li>
                  </ul>
                </div>
                <!-- End Timeline Section -->