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