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