HighFive Design System

Directory Profile

Firstname Lastname

Department / Division

  • Example Division

Classification

  • Example Classification

Discipline

  • Example Discipline

Title

  • Manager

Contact

netid@msstate.edu
(662) 325-5555

Bio

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?

CV

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?

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>