College of Business Style Guide

Profile List 

<div class="az-index-group">
    <h2 id="A">A</h2>
    <ul class="profile-list">
        <li>
            <div class="az-profile">
                <div class="az-profile-image">
                    <a href="">
                        <img src="/images/headshot@2x.png" alt="John Smith headshot" />
                    </a>
                </div>
                <div class="az-profile-info">
                    <h3><a href="">John Smith</a></h3>
                    <p>
                        Space Invader<br /> NASA<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
                </div><!-- end az-profile-info -->
            </div><!-- az-profile -->
        </li>
        <li>
            <div class="az-profile">
                <div class="az-profile-image">
                    <a href="">
                        <img src="/images/headshot@2x.png" alt="John Smith headshot" />
                    </a>
                </div>
                <div class="az-profile-info">
                    <h3><a href="">John Smith</a></h3>
                    <p>
                        Space Invader<br /> NASA<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
                </div><!-- end az-profile-info -->
            </div><!-- az-profile -->
        </li>
        <li>
            <div class="az-profile">
                <div class="az-profile-image">
                    <a href="">
                        <img src="/images/headshot@2x.png" alt="John Smith headshot" />
                    </a>
                </div>
                <div class="az-profile-info">
                    <h3><a href="">John Smith</a></h3>
                    <p>
                        Space Invader<br /> NASA<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
                </div><!-- end az-profile-info -->
            </div><!-- az-profile -->
        </li>
        <li>
            <div class="az-profile">
                <div class="az-profile-image">
                    <a href="">
                        <img src="/images/headshot@2x.png" alt="John Smith headshot" />
                    </a>
                </div>
                <div class="az-profile-info">
                    <h3><a href="">John Smith</a></h3>
                    <p>
                        Space Invader<br /> NASA<br /> <a href="mailto:jsmith@lehigh.edu">jsmith@lehigh.edu</a><br /> <a href="tel:+1-123-456-7890">123-456-7890</a> </p>
                </div><!-- end az-profile-info -->
            </div><!-- az-profile -->
        </li>
    </ul>
</div>
 
<div class="az-index-group">
    <h2 id="{{ letter }}">{{ letter }}</h2>
    <ul class="profile-list">
        {% for profile_item in profile_items %}
            <li>{% include "@az_index" with {
                    img_src: profile_item.img_src,
                    name: profile_item.name,
                    job_title: profile_item.job_title,
                    department: profile_item.department,
                    email: profile_item.email,
                    phone: profile_item.phone
                } %}</li>
        {% endfor %}
    </ul>
</div>
 
{
  "letter": "A",
  "profile_items": {
    "1": {
      "img_src": "/images/headshot@2x.png",
      "name": "John Smith",
      "job_title": "Space Invader",
      "department": "NASA",
      "email": "jsmith@lehigh.edu",
      "phone": "123-456-7890"
    },
    "2": {
      "img_src": "/images/headshot@2x.png",
      "name": "John Smith",
      "job_title": "Space Invader",
      "department": "NASA",
      "email": "jsmith@lehigh.edu",
      "phone": "123-456-7890"
    },
    "3": {
      "img_src": "/images/headshot@2x.png",
      "name": "John Smith",
      "job_title": "Space Invader",
      "department": "NASA",
      "email": "jsmith@lehigh.edu",
      "phone": "123-456-7890"
    },
    "4": {
      "img_src": "/images/headshot@2x.png",
      "name": "John Smith",
      "job_title": "Space Invader",
      "department": "NASA",
      "email": "jsmith@lehigh.edu",
      "phone": "123-456-7890"
    }
  }
}
  • Content: 
    .az-index-group {
  border-bottom: 1px solid $grey_light;
  padding: $space-double $space-double 0 $space-double;

  @media only screen and (min-width: $break-desktop) {
    margin: 0 0 $space-triple 0;
    border: 0;
    padding: 0;

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

  h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: $grey_dark;
  }

  .profile-list {
    @include reset-list-nav;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    li {
      width: inherit;
      height: inherit;
      margin: $space $space-double;

      @media only screen and (min-width: $break-desktop) {
        max-width: calc(100% / 3);
        min-width: calc(100% / 3);
        margin: $space 0;
      }
    }
  }
}
  • URL: /components/raw/profile_list/profile_list.scss
  • Filesystem Path: components/02-pieces/15-profile_list/profile_list.scss
  • Size: 777 Bytes

No notes defined.