Lehigh Clutch Style Guide

Directory Layout 

<!--UCPA Emergency Banner Alert-->
  <div id="emergencyalert">
      <div id="AppArmorAlertID_2"></div>
      <script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
  </div>
  <!--End UCPA Emergency Banner Alert-->
  <header class="header">
      <div class="container-fluid">
          <div class="row logo-wrapper">
              <button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
              </button>
              <div class="logo">
                  <picture class="image lehigh-logo e11y-ok">
                      <a href="" class="logo__link">
                          <img class="web" src="" alt="Lehigh University logo" width="200" height="43" />
                          <span class="u-a11y-text">Go to homepage</span>
                      </a>
                  </picture>
              </div><!-- end logo -->
              <div class="mobile-search">
                  <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
              </div><!-- end mobile-search -->
          </div>
      </div>
      <div class="header-wrapper container-fluid">
          <div class="row">
              <div class="col title">
                  <span class="site-title"><a href=""></a></span>
              </div><!-- title -->
          </div>
          <div class="navigation-wrapper">
          </div><!-- end navigation-wrapper -->
      </div><!-- end header-wrapper -->
  </header>

  <main class="d-print-block accent-">
      <a id="main-content" tabindex="-1"></a>

      <div class="container-fluid">
          <div class="row justify-content-center">
              <div class="content-top col-12 col-md-9 col-print-12 ">
                  <h1 class="page-title">Staff Directory</h1>
                  <nav aria-label="breadcrumb">
                      <h2 id="system-breadcrumb" class="sr-only">Breadcrumb</h2>
                      <ol class="breadcrumb">
                      </ol>
                  </nav>
              </div>
          </div>

      </div>

      <div class="container-fluid">

          <div class="row justify-content-center">

              <section class="main-content col-12 col-print-12">
                  <div class="a-z">
                      <ul class="index">
                          <li><a href="#a" class="btn index_btn">a</a></li>
                          <li><a href="#b" class="btn index_btn">b</a></li>
                          <li><a href="#c" class="btn index_btn">c</a></li>
                          <li><a href="#d" class="btn index_btn">d</a></li>
                          <li><a href="#e" class="btn index_btn">e</a></li>
                          <li><a href="#f" class="btn index_btn">f</a></li>
                          <li><a href="#g" class="btn index_btn">g</a></li>
                          <li><a href="#h" class="btn index_btn">h</a></li>
                          <li><a href="#i" class="btn index_btn">i</a></li>
                          <li><a href="#j" class="btn index_btn">j</a></li>
                          <li><a href="#k" class="btn index_btn">k</a></li>
                          <li><a href="#l" class="btn index_btn">l</a></li>
                          <li><a href="#m" class="btn index_btn">m</a></li>
                          <li><a href="#n" class="btn index_btn">n</a></li>
                          <li><a href="#o" class="btn index_btn">o</a></li>
                          <li><a href="#p" class="btn index_btn">p</a></li>
                          <li><a href="#q" class="btn index_btn">q</a></li>
                          <li><a href="#r" class="btn index_btn">r</a></li>
                          <li><a href="#s" class="btn index_btn">s</a></li>
                          <li><a href="#t" class="btn index_btn">t</a></li>
                          <li><a href="#u" class="btn index_btn">u</a></li>
                          <li><a href="#v" class="btn index_btn">v</a></li>
                          <li><a href="#w" class="btn index_btn">w</a></li>
                          <li><a href="#x" class="btn index_btn">x</a></li>
                          <li><a href="#y" class="btn index_btn">y</a></li>
                          <li><a href="#z" class="btn index_btn">z</a></li>
                      </ul>
                  </div>
                  <div class="letter_region" id="a">
                      <h2 class="letter_head">a</h2>
                      <div class="persons">
                          <div class="person_profile">
                              <div class="profile-circle">
                                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
                              </div>
                              <div class="person_profile_details">
                                  <h3 class="name">Joe Aaronson</h3>
                                  <h4 class="job_title">Web Developer</h4>
                                  <div class="email"><a href="mailto:j03@lehigh.edu">j03@lehigh.edu</a></div>
                                  <div class="phone"><a href="tel:+1610-758-0002">610-758-0002</a></div>
                              </div>
                          </div>
                          <div class="person_profile">
                              <div class="profile-circle">
                                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
                              </div>
                              <div class="person_profile_details">
                                  <h3 class="name">Sam Akers</h3>
                                  <h4 class="job_title">Web Developer</h4>
                                  <div class="email"><a href="mailto:j03@lehigh.edu">j03@lehigh.edu</a></div>
                                  <div class="phone"><a href="tel:+1610-758-0002">610-758-0002</a></div>
                              </div>
                          </div>
                          <div class="person_profile">
                              <div class="profile-circle">
                                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
                              </div>
                              <div class="person_profile_details">
                                  <h3 class="name">Cindy Adams</h3>
                                  <h4 class="job_title">Web Developer</h4>
                                  <div class="email"><a href="mailto:j03@lehigh.edu">j03@lehigh.edu</a></div>
                                  <div class="phone"><a href="tel:+1610-758-0002">610-758-0002</a></div>
                              </div>
                          </div>
                      </div><!-- end persons -->
                  </div>
                  <div class="letter_region" id="b">
                      <h2 class="letter_head">b</h2>
                      <div class="persons">
                          <div class="person_profile">
                              <div class="profile-circle">
                                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
                              </div>
                              <div class="person_profile_details">
                                  <h3 class="name">Joe Aaronson</h3>
                                  <h4 class="job_title">Web Developer</h4>
                                  <div class="email"><a href="mailto:j03@lehigh.edu">j03@lehigh.edu</a></div>
                                  <div class="phone"><a href="tel:+1610-758-0002">610-758-0002</a></div>
                              </div>
                          </div>
                      </div><!-- end persons -->
                  </div>
                  <div class="letter_region" id="c">
                      <h2 class="letter_head">c</h2>
                      <div class="persons">
                          <div class="person_profile">
                              <div class="profile-circle">
                                  <img src="/img/silhoutte.jpg" alt="silhoutte profile" />
                              </div>
                              <div class="person_profile_details">
                                  <h3 class="name">Joe Aaronson</h3>
                                  <h4 class="job_title">Web Developer</h4>
                                  <div class="email"><a href="mailto:j03@lehigh.edu">j03@lehigh.edu</a></div>
                                  <div class="phone"><a href="tel:+1610-758-0002">610-758-0002</a></div>
                              </div>
                          </div>
                      </div><!-- end persons -->
                  </div>
              </section>

          </div><!-- end row -->
      </div><!-- end container-fluid -->
  </main>

  <footer id="site_footer">
      <div class="footer_wrapper">
          <div class="row">
              <script src="/files/lehigh_footer-clutch-min.js"></script>
              <!-- region for footer-main -->
              <section class="department_footer">
                  <!-- Single block styled as department footer -->

                  <h2>Lehigh's New theme- clutch</h2>
                  <ul class="social-media">

                      <li>
                          <a href="https://twitter.com/lehighu">
                              <i class="fab fa-twitter"></i>
                              <span class="sr-only">Like us on Twitter</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://www.facebook.com/lehighu">
                              <i class="fab fa-facebook-f"></i>
                              <span class="sr-only">Like us on Facebook</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://www.linkedin.com/school/lehigh-college-of-business/">
                              <i class="fab fa-linkedin"></i>
                              <span class="sr-only">Like us on LinkedIn</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://lehighu.tumblr.com/">
                              <i class="fab fa-tumblr"></i>
                              <span class="sr-only">Like us on Tumblr</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://www.tiktok.com/@lehighadmissions">
                              <i class="fab fa-tiktok"></i>
                              <span class="sr-only">Like us on TikTok</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://www.instagram.com/lehighu/">
                              <i class="fab fa-instagram"></i>
                              <span class="sr-only">Like us on Instagram</span>
                          </a>
                      </li>
                      <li>
                          <a href="https://www.youtube.com/user/lehighuofficial">
                              <i class="fab fa-youtube"></i>
                              <span class="sr-only">Like us on YouTube</span>
                          </a>
                      </li>

                  </ul>

                  <ul class="contact-info">
                      <li>
                          <i class="fas fa-phone"></i>
                          <span class="sr-only">Phone Number</span>
                          <span>(610) 758 4025</span>
                      </li>
                      <li>
                          <i class="fas fa-fax"></i>
                          <span class="sr-only">Fax Number</span>
                          <span>(610) 758 4026</span>
                      </li>
                      <li>
                          <a href="https://www.google.com/maps/@40.6078606,-75.379379,19z" target="_blank">
                              <i class="fas fa-map-marker-alt"></i>
                              <span class="sr-only">Address</span>
                              <address>19 Memorial Drive W.<br /> Lehigh University<br /> Bethlehem, PA<br /> 18015</address>
                          </a>
                      </li>
                      <li>
                          <a href="mailto:email@lehigh.edu">
                              <i class="fas fa-envelope"></i>
                              <span class="sr-only">Email address</span>
                              email@lehigh.edu
                          </a>
                      </li>
                  </ul>

                  <div class="footer-buttons text-center">
                      <a href="#" class="btn btn-primary gold" role="button">
                          <span class="button_text">Contact Us</span>
                          <span class="arrow fal fa-chevron-right"></span>
                      </a>
                      <a href="#" class="btn btn-primary gold" role="button">
                          <span class="button_text">Get Help</span>
                          <span class="arrow fal fa-chevron-right"></span>
                      </a>
                  </div>
              </section>
              <!-- endregion for footer-main -->

              <!-- region for footer-group -->
              <!-- endregion for footer-group -->
          </div>
          <div class="row">
              <div class="dark-toggle">
                  <div class="moon">
                      <span class="sr-only">Dark mode toggle on and off switch</span>
                  </div>
              </div>
          </div>
      </div>
  </footer>
 
{% extends '@base_layout' %}

{% block region_main %}
  <div class="a-z">
    <ul class="index">
    {% for index in indexs %}
      <li><a href="#{{ index.letter }}" class="btn index_btn">{{ index.letter }}</a></li>
    {% endfor %}
    </ul>
  </div>
  {% for letter_region in letter_regions %}
    <div class="letter_region" id="{{ letter_region.letter }}">
      <h2 class="letter_head">{{ letter_region.letter }}</h2>
      <div class="persons">
      {% for person in letter_region.persons %}
        {% include "@profile_listing" with {
          profile_image: person.profile_image,
          name: person.name,
          job_title: person.job_title,
          email: person.email,
          phone: person.phone
        } %}
      {% endfor %}
      </div><!-- end persons -->
    </div>
  {% endfor %}
{% endblock region_main %}

{% block footer %}
  {% render "@footer_option_2" %}
{% endblock footer %}
 
{
  "has_sidebar": false,
  "page_header": "Staff Directory",
  "indexs": [
    {
      "letter": "a"
    },
    {
      "letter": "b"
    },
    {
      "letter": "c"
    },
    {
      "letter": "d"
    },
    {
      "letter": "e"
    },
    {
      "letter": "f"
    },
    {
      "letter": "g"
    },
    {
      "letter": "h"
    },
    {
      "letter": "i"
    },
    {
      "letter": "j"
    },
    {
      "letter": "k"
    },
    {
      "letter": "l"
    },
    {
      "letter": "m"
    },
    {
      "letter": "n"
    },
    {
      "letter": "o"
    },
    {
      "letter": "p"
    },
    {
      "letter": "q"
    },
    {
      "letter": "r"
    },
    {
      "letter": "s"
    },
    {
      "letter": "t"
    },
    {
      "letter": "u"
    },
    {
      "letter": "v"
    },
    {
      "letter": "w"
    },
    {
      "letter": "x"
    },
    {
      "letter": "y"
    },
    {
      "letter": "z"
    }
  ],
  "letter_regions": {
    "1": {
      "letter": "a",
      "persons": {
        "1": {
          "profile_image": {
            "img": "/img/silhoutte.jpg",
            "imgAlt": "silhoutte profile"
          },
          "name": "Joe Aaronson",
          "job_title": "Web Developer",
          "email": "j03@lehigh.edu",
          "phone": "610-758-0002"
        },
        "2": {
          "profile_image": {
            "img": "/img/silhoutte.jpg",
            "imgAlt": "silhoutte profile"
          },
          "name": "Sam Akers",
          "job_title": "Web Developer",
          "email": "j03@lehigh.edu",
          "phone": "610-758-0002"
        },
        "3": {
          "profile_image": {
            "img": "/img/silhoutte.jpg",
            "imgAlt": "silhoutte profile"
          },
          "name": "Cindy Adams",
          "job_title": "Web Developer",
          "email": "j03@lehigh.edu",
          "phone": "610-758-0002"
        }
      }
    },
    "2": {
      "letter": "b",
      "persons": {
        "1": {
          "profile_image": {
            "img": "/img/silhoutte.jpg",
            "imgAlt": "silhoutte profile"
          },
          "name": "Joe Aaronson",
          "job_title": "Web Developer",
          "email": "j03@lehigh.edu",
          "phone": "610-758-0002"
        }
      }
    },
    "3": {
      "letter": "c",
      "persons": {
        "1": {
          "profile_image": {
            "img": "/img/silhoutte.jpg",
            "imgAlt": "silhoutte profile"
          },
          "name": "Joe Aaronson",
          "job_title": "Web Developer",
          "email": "j03@lehigh.edu",
          "phone": "610-758-0002"
        }
      }
    }
  }
}
  • Content: 
    .a-z {
  margin: 0 0 $space_three 0;

  .index {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    @include reset-list-nav;

    li {
      margin: $space_one_half;

      .btn {
        background-color: $accent_color;
        background-color: var(--accent_color, $accent_color);
        width: 50px;
        height: 50px;
        text-transform: uppercase;
        font-weight: bold !important;
        border: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0 5px 10px 0 $drop_shadow;
        box-shadow: 0 5px 10px 0 $drop_shadow;

        .color-scheme-dark & {
          -webkit-box-shadow: 0 5px 10px 0 $drop_shadow_darkmode;
          box-shadow: 0 5px 10px 0 $drop_shadow_darkmode;
        }

        &:hover,
        &:focus {
          -webkit-box-shadow: 5px 5px 10px 0 $drop_shadow;
          box-shadow: 5px 5px 10px 0 $drop_shadow;

          .color-scheme-dark & {
            -webkit-box-shadow: 5px 5px 10px 0 $drop_shadow_darkmode;
            box-shadow: 5px 5px 10px 0 $drop_shadow_darkmode;
          }
        }

        &::after {
          content: '';
          position: unset;
        }
      }
    }
  }
}

.letter_region {
  margin: 0 0 $space-two 0;

  .letter_head {
    text-transform: uppercase;
    color: $grey_darkest;

    .color-scheme-dark & {
      color: $white;
    }
  }

  .persons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .person_profile {
      margin: 0 $spacer 0 0;
      padding: $space_one_half;

      &:last-of-type {
        margin: 0;
      }

      &:nth-of-type(even) {
        background-color: $grey_lightest;

        .color-scheme-dark & {
          background-color: $dark_mode_grey;
        }
      }

      a {
        font-weight: normal;
        border: 0;
        text-decoration: underline;

        &:hover,
        &:focus {
          text-decoration: none;
        }
      }
    }
  }
}
  • URL: /components/raw/staff_directory/staff_directory.scss
  • Filesystem Path: bits/06-page_layouts/staff_directory/staff_directory.scss
  • Size: 2 KB

This shows an option for staff directory.