College of Business Style Guide

AZ Index List 

<section class="az-index-section" role="region" aria-label="profile list section">
    <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>
        </ul>
    </div>
    <div class="az-index-group">
        <h2 id="B">B</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="C">C</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>
            <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>
</section>
 
<section class="az-index-section" role="region" aria-label="profile list section">
    {% for az_list_item in az_list_items %}
        {% include "@profile_list" with {
            letter: az_list_item.letter,
            profile_items: az_list_item.az_profile_items
        } %}
    {% endfor %}
</section>
 
{
  "az_list_items": {
    "1": {
      "letter": "A",
      "az_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"
        }
      }
    },
    "2": {
      "letter": "B",
      "az_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"
        }
      }
    },
    "3": {
      "letter": "C",
      "az_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"
        },
        "5": {
          "img_src": "/images/headshot@2x.png",
          "name": "John Smith",
          "job_title": "Space Invader",
          "department": "NASA",
          "email": "jsmith@lehigh.edu",
          "phone": "123-456-7890"
        },
        "6": {
          "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-section {
  @media only screen and (min-width: $break-desktop) {
    padding: $space-quadruple;
  }
}
  • URL: /components/raw/az_index_section/az_index_section.scss
  • Filesystem Path: components/03-sections/16-az_index_section/az_index_section.scss
  • Size: 111 Bytes

No notes defined.