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="far 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="far fa-search"></i><span class="sr-only">Open search bar</span></button>
                </div><!-- end mobile-search -->
            </div>
        </div>
        <div class="header-wrapper container-fluid  empty-nav">

            <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-md-9 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="far fa-phone"></i>
                            <span class="sr-only">Phone Number</span>
                            <span>(610) 758 4025</span>
                        </li>
                        <li>
                            <i class="far 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="far 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="far 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>
    </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;

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

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

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

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

  .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;
      }

      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: 1.5 KB

This shows an option for staff directory.