Tabs

Dynamic tabbed interfaces.

Tabs #1

Set your priorities and align your teams

This is where we sit down, grab a cup of coffee and dial in the details.

  • Understanding who you are
  • Whether it's branding, print, UI + UX
  • We've got your front end and back end needs covered
Image Description
Image Description

Focus on achieving measurable outcomes

Now that we've aligned the details, it's time to get things mapped out and organized.

  • We aim high at being focused on building relationships
  • Working together on the daily requires each individual
  • It's important to stay detail oriented with every project we tackle
Image Description
Image Description

Review performance and improve strategy

The time has come to bring those ideas and plans to life.

  • Whether through commerce or just an experience
  • Now that your brand is all dressed up
  • This part is really crucial in keeping the project
Image Description
Image Description
              
                <!-- Features Section -->
                <div id="SVGmockupBg" class="svg-preloader container space-2">
                  <!-- Nav Classic -->
                  <div class="position-relative w-lg-85 bg-white text-center z-index-2 mx-lg-auto">
                    <ul class="nav nav-classic nav-rounded nav-shadow nav-justified" id="pills-tab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link font-weight-medium active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">
                          <div class="d-md-flex justify-content-md-center align-items-md-center">
                            <figure class="ie-height-40 d-none d-md-block w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-14.svg" alt="SVG"
                                   data-parent="#SVGmockupBg">
                            </figure>
                            Priority
                          </div>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link font-weight-medium" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">
                          <div class="d-md-flex justify-content-md-center align-items-md-center">
                            <figure class="ie-height-40 d-none d-md-block w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-21.svg" alt="SVG"
                                   data-parent="#SVGmockupBg">
                            </figure>
                            Achieve
                          </div>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link font-weight-medium" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">
                          <div class="d-md-flex justify-content-md-center align-items-md-center">
                            <figure class="ie-height-40 d-none d-md-block w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
                                   data-parent="#SVGmockupBg">
                            </figure>
                            Performance
                          </div>
                        </a>
                      </li>
                    </ul>
                  </div>
                  <!-- End Nav Classic -->

                  <!-- Tab Content -->
                  <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade pt-9 show active" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
                      <!-- Mockup Block -->
                      <div class="row justify-content-lg-between align-items-lg-center">
                        <div class="col-lg-4 mb-9 mb-lg-0">
                          <!-- Info -->
                          <div class="mb-5">
                            <h3 class="h4 font-weight-semi-bold">Set your priorities and align your teams</h3>
                            <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                          </div>

                          <ul class="list-unstyled text-secondary font-size-1">
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                Understanding who you are
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                Whether it's branding, print, UI + UX
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                We've got your front end and back end needs covered
                              </span>
                            </li>
                          </ul>
                          <!-- End Info -->
                        </div>

                        <div class="col-lg-7 position-relative">
                          <div class="pl-md-9">
                            <img class="img-fluid shadow rounded" src="../../assets/img/700x525/img1.jpg" alt="Image Description">
                          </div>

                          <!-- SVG Component -->
                          <div class="position-absolute bottom-0 left-0 w-75 z-index-n1">
                            <figure class="ie-abstract-shapes-2">
                              <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-2.svg" alt="Image Description"
                                   data-parent="#SVGmockupBg">
                            </figure>
                          </div>
                          <!-- End SVG Component -->
                        </div>
                      </div>
                      <!-- End Mockup Block -->
                    </div>
                    <div class="tab-pane fade pt-9" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab">
                      <!-- Mockup Block -->
                      <div class="row justify-content-lg-between align-items-lg-center">
                        <div class="col-lg-4 mb-9 mb-lg-0">
                          <!-- Info -->
                          <div class="mb-5">
                            <h3 class="h4 font-weight-semi-bold">Focus on achieving measurable outcomes</h3>
                            <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
                          </div>

                          <ul class="list-unstyled text-secondary font-size-1">
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                We aim high at being focused on building relationships
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                Working together on the daily requires each individual
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                It's important to stay detail oriented with every project we tackle
                              </span>
                            </li>
                          </ul>
                          <!-- End Info -->
                        </div>

                        <div class="col-lg-7 position-relative">
                          <div class="pl-md-9">
                            <img class="img-fluid shadow-sm rounded" src="../../assets/img/700x525/img2.jpg" alt="Image Description">
                          </div>

                          <!-- SVG Component -->
                          <div class="position-absolute bottom-0 left-0 w-75 z-index-n1">
                            <figure class="ie-abstract-shapes-4">
                              <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-4.svg" alt="Image Description"
                                   data-parent="#SVGmockupBg">
                            </figure>
                          </div>
                          <!-- End SVG Component -->
                        </div>
                      </div>
                      <!-- End Mockup Block -->
                    </div>
                    <div class="tab-pane fade pt-9" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab">
                      <!-- Mockup Block -->
                      <div class="row justify-content-lg-between align-items-lg-center">
                        <div class="col-lg-4 mb-9 mb-lg-0">
                          <!-- Info -->
                          <div class="mb-5">
                            <h3 class="h4 font-weight-semi-bold">Review performance and improve strategy</h3>
                            <p>The time has come to bring those ideas and plans to life.</p>
                          </div>

                          <ul class="list-unstyled text-secondary font-size-1">
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                Whether through commerce or just an experience
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                Now that your brand is all dressed up
                              </span>
                            </li>
                            <li class="media my-3">
                              <span class="fas fa-check text-primary mt-1 mr-3"></span>
                              <span class="media-body">
                                This part is really crucial in keeping the project
                              </span>
                            </li>
                          </ul>
                          <!-- End Info -->
                        </div>

                        <div class="col-lg-7 position-relative">
                          <div class="pl-md-9">
                            <img class="img-fluid shadow-sm rounded" src="../../assets/img/700x525/img3.jpg" alt="Image Description">
                          </div>

                          <!-- SVG Component -->
                          <div class="position-absolute bottom-0 left-0 w-75 z-index-n1">
                            <figure class="ie-abstract-shapes-3">
                              <img class="js-svg-injector" src="../../assets/svg/components/abstract-shapes-3.svg" alt="Image Description"
                                   data-parent="#SVGmockupBg">
                            </figure>
                          </div>
                          <!-- End SVG Component -->
                        </div>
                      </div>
                      <!-- End Mockup Block -->
                    </div>
                  </div>
                  <!-- End Tab Content -->
                </div>
                <!-- End Features Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>