Skip to main content

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.

    Image Description
  • 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.

    Image Description
  • 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.

    Image Description
  • 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.

    Image Description

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 -->