Firstname Lastname

HTML

<section id="section--firstname-lastname" class="page-body section--firstname-lastname directory-container directory-bio " data-netid="netid" aria-labelledby="title--firstname-lastname">
    <div class="row justify-content-center">
      <div class="col-sm-10 col-md-7 col-lg-7 col-xl-6 col-xxl-6">
        <article>
        
          <div class="row">
            <div class="col">
              <h1 id="title--firstname-lastname" class="page-title node-title">
                Firstname Lastname
              </h1>
            </div>
          </div>

          <div class="row mb-5">
            <div class="col-sm-5 mb-5 mb-sm-0">
              <div class="profile-img-container ">
                <a href="https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg" class="d-block">                  
                  <img src="https://www.its.msstate.edu/sites/www.its.msstate.edu/files/styles/msstatedrupal_extra_large/public/2023-08/Dak_Welcome_Celebration_2023041420230414_G5C9558.jpg" alt="Fristname Lastname">
                  <span class="sr-only">Link to profile photo</span>                
                </a>              
              </div>
            </div>
            <div class="col-sm-7">
              <h2 class="h5 mb-1">Department / Division</h2>
              <ul class="field field--name-field-division field--type-entity-reference field--label-above field__items list-unstyled lead">
                <li class="field__item">Example Division</li>
              </ul>
              <h2 class="h5 mb-1">Classification</h2>
              <ul class="field field--name-field-classification field--type-entity-reference field--label-above field__items list-unstyled lead">
                <li class="field__item">Example Classification</li>
              </ul>
              <h2 class="h5 mb-1">Discipline</h2>
              <ul class="field field--name-field-discipline field--type-entity-reference field--label-above field__items list-unstyled lead">
                <li class="field__item">Example Discipline</li>
              </ul>
              <h2 class="h5 mb-1">Title</h2>
              <ul class="field field--name-field-position-titles field--type-string field--label-above field__items list-unstyled lead">
                <li class="field__item">Manager</li>
              </ul>
              <h2 class="h5 mb-1">Contact</h2>
              <p>
                <a href="mailto:kanderson@its.msstate.edu" class="local"><span class="fas fa-envelope me-2"></span>netid@msstate.edu</a><br>
                <a href="tel:(662) 325-6984" class="local"><span class="fas fa-phone me-2"></span>(662) 325-5555</a>
              </p>
            </div>
          </div>

          <div class="row">
            <div class="col">

              <div class="card card-nav-tabs" id="tab-group--1">

                <div class="card-header bg-gray-200">
                  <ul class="nav nav-tabs card-header-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                      <a class="nav-link local active" id="tab--bio" data-bs-toggle="tab" href="#pane--bio" type="button" role="tab" aria-controls="first" aria-selected="true">Bio</a>
                    </li>
                    <li class="nav-item" role="presentation">
                      <a class="nav-link local" id="tab--cv" data-bs-toggle="tab" href="#pane--cv" type="button" role="tab" aria-controls="first" aria-selected="false">CV</a>
                    </li>
                  </ul>

                </div>

                <div class="card-body text-black tab-content">

                  <div class="tab-pane fade active show" id="pane--bio" role="tabpanel" aria-label="Bio">
                    <h2 class="" data-onpage-link="true">Bio</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
                  </div>

                  <div class="tab-pane fade" id="pane--cv" role="tabpanel" aria-label="CV">
                    <h2 class="" data-onpage-link="true">CV</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Isto modo ne improbos quidem, si essent boni viri. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Cur deinde Metrodori liberos commendas?</p>
                  </div>

                </div>
              </div>

              <script>
                var firstTabEl = document.querySelector('#tab-group--1 .nav-tabs li:first-child a');
                var firstPaneEl = document.querySelector('#tab-group--1 .tab-content .tab-pane:first-child');

                firstTabEl.classList.add('active');
                firstPaneEl.classList.add('show');
                firstPaneEl.classList.add('active');
              </script>

            </div>
          </div>
          
        </article>
      </div>
    </div>
  </section>