Styleguide

Tab List: No Icons 

<section class="mt-5" id="jobs-tabs-diversity">
    <a name="NavDiversity">
    </a>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">
                <nav>
                    <div id="nav-tab" class="nav nav-tabs d-none d-lg-block d-xl-inline-flex w-100" role="tablist">
                        <a id="nav-it-tab" href="#it" title="Business Unit IT" class="nav-link nav-item flex-xl-fill px-0 active" role="tab" data-toggle="tab" aria-controls="nav-it" aria-selected="true" data-slideto="NavDiversity">IT
                        </a>
                        <a id="nav-marketing-tab" href="#marketing" title="Business Unit IT" class="nav-link nav-item flex-xl-fill px-0" role="tab" data-toggle="tab" aria-controls="nav-it" aria-selected="true" data-slideto="NavDiversity">Marketing
                        </a>
                        <a id="nav-sales-tab" href="#sales" title="Business Unit IT" class="nav-link nav-item flex-xl-fill px-0" role="tab" data-toggle="tab" aria-controls="nav-it" aria-selected="true" data-slideto="NavDiversity">Sales
                        </a>
                    </div>
                </nav>
            </div>
        </div>
    </div>
    <div id="myTabContent" class="tab-content mx-2 wow fadeIn">
        <div id="it" class="card tab-pane customized fade active show" aria-labelledby="it-collapse" role="tabpanel">
            <div id="it-tab" class="card-header customized">
                <a href="#it-collapse" class="text-decoration-none d-block collapsed text-center" data-toggle="collapse" data-parent="#" aria-expanded="false" aria-controls="it-tab">IT
                </a>
            </div>
            <div id="it-collapse" class="customized collapse" role="tabpanel" aria-labelledby="it-collapse">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">IT</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="marketing" class="card tab-pane customized fade" aria-labelledby="marketing-collapse" role="tabpanel">
            <div id="marketing-tab" class="card-header customized">
                <a href="#marketing-collapse" class="text-decoration-none d-block collapsed text-center" data-toggle="collapse" data-parent="#" aria-expanded="false" aria-controls="marketing-tab">Marketing
                </a>
            </div>
            <div id="marketing-collapse" class="customized collapse" role="tabpanel" aria-labelledby="marketing-collapse">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">Marketing</div>
                    </div>
                </div>
            </div>
        </div>
        <div id="sales" class="card tab-pane customized fade" aria-labelledby="sales-collapse" role="tabpanel">
            <div id="sales-tab" class="card-header customized">
                <a href="#sales-collapse" class="text-decoration-none d-block collapsed text-center" data-toggle="collapse" data-parent="#" aria-expanded="false" aria-controls="sales-tab">Sales
                </a>
            </div>
            <div id="sales-collapse" class="customized collapse" role="tabpanel" aria-labelledby="sales-collapse">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">Sales</div>
                    </div>
                </div>
            </div>
        </div>
</section>
 
<section class="mt-5" id="jobs-tabs-diversity">
  <a name="{{target}}">
  </a>
  {{#with tab}}
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">
          <nav>
            <div
              id="nav-tab"
              class="nav nav-tabs d-none d-lg-block d-xl-inline-flex w-100"
              role="tablist"
            >
            {{#each item}}
            {{#with link}}
              <a
                id="{{id}}"
                href="#{{href}}"
                title="{{title}}"
                class="nav-link nav-item flex-xl-fill px-0{{#if active}} active{{/if}}"
                role="tab"
                data-toggle="tab"
                aria-controls="nav-it"
                aria-selected="true"
                data-slideto="{{../../../target}}"
              >{{text}}
              </a>
              {{/with}}
              {{/each}}
            </div>
          </nav>
        </div>
      </div>
    </div>
    <div id="{{contentId}}" class="tab-content mx-2 wow fadeIn">
        {{#each item}}
      <div
        id="{{link.href}}"
        class="card tab-pane customized fade{{#if link.active}} active show{{/if}}"
        aria-labelledby="{{link.href}}-collapse"
        role="tabpanel"
      >
        <div id="{{link.href}}-tab" class="card-header customized">
          <a
            href="#{{link.href}}-collapse"
            class="text-decoration-none d-block collapsed text-center"
            data-toggle="collapse"
            data-parent="#{{contentId}}"
            aria-expanded="false"
            aria-controls="{{link.href}}-tab"
          >{{link.text}}
          </a>
        </div>
        <div
          id="{{link.href}}-collapse"
          class="customized collapse"
          role="tabpanel"
          aria-labelledby="{{link.href}}-collapse"
        >
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-sm-12 col-md-8 col-lg-8 col-xl-8">{{link.text}}</div>
            </div>
        </div>
      </div>
    </div>
    {{/each}}
  {{/with}}
</section>
 
{
  "target": "NavDiversity",
  "tab": {
    "contentId": "myTabContent",
    "item": [
      {
        "link": {
          "id": "nav-it-tab",
          "href": "it",
          "title": "Business Unit IT",
          "text": "IT",
          "active": true
        }
      },
      {
        "link": {
          "id": "nav-marketing-tab",
          "href": "marketing",
          "title": "Business Unit IT",
          "text": "Marketing"
        }
      },
      {
        "link": {
          "id": "nav-sales-tab",
          "href": "sales",
          "title": "Business Unit IT",
          "text": "Sales"
        }
      }
    ]
  }
}

No notes defined.