<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">عنوان کارت</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_2">هفته</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_2">ماه</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">سال</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_2">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_2" role="tabpanel">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_2" role="tabpanel">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-title">
<h3 class="card-label">عنوان کارت همراه با آیکون</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_3">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_3">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_3">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_3" role="tabpanel" aria-labelledby="kt_tab_pane_1_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_3" role="tabpanel" aria-labelledby="kt_tab_pane_2_3">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_3" role="tabpanel" aria-labelledby="kt_tab_pane_3_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-tabs-line">
<div class="card-toolbar">
<ul class="nav nav-tabs nav-bold nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1_4">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2_4">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-left">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_3_4">جداکننده</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">اکشن</a>
<a class="dropdown-item" href="#">اکشن دیگر</a>
<a class="dropdown-item" href="#">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">جداکننده</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_1_4" role="tabpanel" aria-labelledby="kt_tab_pane_1_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_2_4" role="tabpanel" aria-labelledby="kt_tab_pane_2_4">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_3_4" role="tabpanel" aria-labelledby="kt_tab_pane_3_4">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">عنوان کارت</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7_1">هفته</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_7_2">ماه</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
سال
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_7_3">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_7_1" role="tabpanel" aria-labelledby="kt_tab_pane_7_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_2" role="tabpanel" aria-labelledby="kt_tab_pane_7_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_7_3" role="tabpanel" aria-labelledby="kt_tab_pane_7_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-title">
<h3 class="card-label">عنوان کارت همراه با آیکون</h3>
</div>
<div class="card-toolbar">
<ul class="nav nav-light-success nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_4_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_4_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_4_3">جداکننده</a>
</div>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_4_1" role="tabpanel" aria-labelledby="kt_tab_pane_4_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_2" role="tabpanel" aria-labelledby="kt_tab_pane_4_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_4_3" role="tabpanel" aria-labelledby="kt_tab_pane_4_3">
...
</div>
</div>
</div>
</div>
<div class="card card-custom">
<div class="card-header">
<div class="card-toolbar">
<ul class="nav nav-light-danger nav-bold nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_5_1">
<span class="nav-icon"><i class="flaticon2-chat-1"></i></span>
<span class="nav-text">هفته</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_5_2">
<span class="nav-icon"><i class="flaticon2-drop"></i></span>
<span class="nav-text">ماه</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class="nav-icon"><i class="flaticon2-gear"></i></span>
<span class="nav-text">سال</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">اکشن</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">اکشن دیگر</a>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" data-toggle="tab" href="#kt_tab_pane_5_3">جداکننده</a>
</div>
</li>
</ul>
</div>
<div class="card-toolbar">
<div class="dropdown dropdown-inline">
<button type="button" class="btn btn-hover-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="ki ki-bold-more-hor "></i>
</button>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
<a class="dropdown-item" href="#">اکشن</a>
<a class="dropdown-item" href="#">اکشن دیگر</a>
<a class="dropdown-item" href="#">اکشن سوم</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">جداکننده</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane fade show active" id="kt_tab_pane_5_1" role="tabpanel" aria-labelledby="kt_tab_pane_5_1">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_2" role="tabpanel" aria-labelledby="kt_tab_pane_5_2">
...
</div>
<div class="tab-pane fade" id="kt_tab_pane_5_3" role="tabpanel" aria-labelledby="kt_tab_pane_5_3">
...
</div>
</div>
</div>
</div>
