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

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

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 
<!-- 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-example1-tab" data-toggle="pill" href="#pills-one-example1" role="tab" aria-controls="pills-one-example1" 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-example1-tab" data-toggle="pill" href="#pills-two-example1" role="tab" aria-controls="pills-two-example1" 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-example1-tab" data-toggle="pill" href="#pills-three-example1" role="tab" aria-controls="pills-three-example1" 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-example1" role="tabpanel" aria-labelledby="pills-one-example1-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-example1" role="tabpanel" aria-labelledby="pills-two-example1-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-example1" role="tabpanel" aria-labelledby="pills-three-example1-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 -->
Copy
<!-- 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>
Copy

Tabs #2

Key facts

  • Property ID: HG328e91UA
  • Property type: Studio, House
  • Year built: 2015
  • Lot size: 1,328 sq.m.
  • Bedrooms: 2
  • Bathrooms: 1.5
  • Kitchen: 1
  • Living room: 3
Last 30 days: 920 page views
Since listed: 471 page views
This extremely spacious two/three bedroom duplex apartment occupies a desirable position to the South-West of Harrogate's town centre and offers a huge amount of scope to update and re-model to suit the individual including a large eaves storage room ripe for conversion into a second bathroom.
Accessed via a communal hall up to the first floor, the apartment opens into a split level hall. To the front elevation there is a lovely, light and airy lounge with far reaching views towards the town centre and countryside beyond. Adjoining there is a well proportioned double bedroom with a fitted wardrobe. 
<!-- Nav Classic -->
<ul id="SVGnavIcons" class="svg-preloader nav nav-classic nav-rounded nav-shadow nav-justified border" role="tablist">
  <li class="nav-item">
    <a class="nav-link font-weight-medium active" id="pills-one-example2-tab" data-toggle="pill" href="#pills-one-example2" role="tab" aria-controls="pills-one-example2" 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-13.svg" alt="SVG"
               data-parent="#SVGnavIcons">
        </figure>
        Property details
      </div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link font-weight-medium" id="pills-two-example2-tab" data-toggle="pill" href="#pills-two-example2" role="tab" aria-controls="pills-two-example2" 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-63.svg" alt="SVG"
               data-parent="#SVGnavIcons">
        </figure>
        Floorplan
      </div>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link font-weight-medium" id="pills-three-example2-tab" data-toggle="pill" href="#pills-three-example2" role="tab" aria-controls="pills-three-example2" 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="#SVGnavIcons">
        </figure>
        Market stats
      </div>
    </a>
  </li>
</ul>
<!-- End Nav Classic -->

<!-- Tab Content -->
<div class="tab-content">
  <div class="tab-pane fade pt-6 show active" id="pills-one-example2" role="tabpanel" aria-labelledby="pills-one-example2-tab">
    <!-- Title -->
    <div class="mb-3">
      <h2 class="h5">Key facts</h2>
    </div>
    <!-- End Title -->

    <!-- Key Facts -->
    <div class="row">
      <div class="col-md-6">
        <!-- Fact List -->
        <ul class="list-unstyled font-size-1 mb-0">
          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Property ID:</span>
            <span class="text-secondary">HG328e91UA</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Property type:</span>
            <span class="text-secondary">Studio, House</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Year built:</span>
            <span class="text-secondary">2015</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Lot size:</span>
            <span class="text-secondary">1,328 sq.m.</span>
          </li>
        </ul>
        <!-- End Fact List -->
      </div>

      <div class="col-md-6">
        <!-- Fact List -->
        <ul class="list-unstyled font-size-1 mb-0">
          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Bedrooms:</span>
            <span class="text-secondary">2</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Bathrooms:</span>
            <span class="text-secondary">1.5</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Kitchen:</span>
            <span class="text-secondary">1</span>
          </li>

          <li class="d-sm-flex justify-content-sm-between py-1">
            <span class="font-weight-medium">Living room:</span>
            <span class="text-secondary">3</span>
          </li>
        </ul>
        <!-- End Fact List -->
      </div>
    </div>
    <!-- End Key Facts -->

    <!-- View Info -->
    <div class="border-top border-bottom py-4 my-6">
      <div class="row justify-content-sm-between">
        <div class="col-sm-6 text-sm-right u-ver-divider u-ver-divider--none-sm mb-2 mb-sm-0">
          <div class="pr-md-4">
            <span class="text-secondary">Last 30 days:</span>
            <strong class="text-dark">920 page views</strong>
          </div>
        </div>
        <div class="col-sm-6 ">
          <div class="pl-md-4">
            <span class="text-secondary">Since listed:</span>
            <strong class="text-dark">471 page views</strong>
          </div>
        </div>
      </div>
    </div>
    <!-- End View Info -->
  </div>

  <div class="tab-pane fade pt-6" id="pills-two-example2" role="tabpanel" aria-labelledby="pills-two-example2-tab">
    This extremely spacious two/three bedroom duplex apartment occupies a desirable position to the South-West of Harrogate's town centre and offers a huge amount of scope to update and re-model to suit the individual including a large eaves storage room ripe for conversion into a second bathroom.
  </div>

  <div class="tab-pane fade pt-6" id="pills-three-example2" role="tabpanel" aria-labelledby="pills-three-example2-tab">
    Accessed via a communal hall up to the first floor, the apartment opens into a split level hall. To the front elevation there is a lovely, light and airy lounge with far reaching views towards the town centre and countryside beyond. Adjoining there is a well proportioned double bedroom with a fitted wardrobe.
  </div>
</div>
<!-- End Tab Content -->
Copy
<!-- 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>
Copy