Lehigh Clutch Style Guide

Staff Grid 

<section class="staff-grid">

    <div class="card staff">
        <div class="card-image">
            <img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="staff-name">
                <a href="https://es.pn">Jane Doe</a>
            </h3>
            <div class="staff-title detail">
                Job Title Here
            </div>
            <div class="staff-team detail">
                Team Name Here
            </div>
            <div class="staff-email detail">
                <a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
            </div>
            <div class="staff-phone detail">
                123-456-6778
            </div>
            <div class="staff-text detail">
                <h4>Ask me about:</h4>
                <ul>
                    <li>Area of Expertise 1</li>
                    <li>Area of Expertise 2</li>
                    <li>Area of Expertise 3</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card staff">
        <div class="card-image">
            <img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="staff-name">
                <a href="https://es.pn">John Doe</a>
            </h3>
            <div class="staff-title detail">
                Job Title Here
            </div>
            <div class="staff-team detail">
                Team Name Here
            </div>
            <div class="staff-email detail">
                <a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
            </div>
            <div class="staff-phone detail">
                123-456-6778
            </div>
            <div class="staff-text detail">
                <h4>Ask me about:</h4>
                <ul>
                    <li>Area of Expertise 1</li>
                    <li>Area of Expertise 2</li>
                    <li>Area of Expertise 3</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card staff">
        <div class="card-image">
            <img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="staff-name">
                <a href="https://es.pn">Steve Doe</a>
            </h3>
            <div class="staff-title detail">
                Job Title Here
            </div>
            <div class="staff-team detail">
                Team Name Here
            </div>
            <div class="staff-email detail">
                <a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
            </div>
            <div class="staff-phone detail">
                123-456-6778
            </div>
            <div class="staff-text detail">
                <h4>Ask me about:</h4>
                <ul>
                    <li>Area of Expertise 1</li>
                    <li>Area of Expertise 2</li>
                    <li>Area of Expertise 3</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card staff">
        <div class="card-image">
            <img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="staff-name">
                <a href="https://es.pn">Steve Doe</a>
            </h3>
            <div class="staff-title detail">
                Job Title Here
            </div>
            <div class="staff-team detail">
                Team Name Here
            </div>
            <div class="staff-email detail">
                <a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
            </div>
            <div class="staff-phone detail">
                123-456-6778
            </div>
            <div class="staff-text detail">
                <h4>Ask me about:</h4>
                <ul>
                    <li>Area of Expertise 1</li>
                    <li>Area of Expertise 2</li>
                    <li>Area of Expertise 3</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="card staff">
        <div class="card-image">
            <img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
        </div>
        <div class="card-body">
            <h3 class="staff-name">
                <a href="https://es.pn">Steve Doe</a>
            </h3>
            <div class="staff-title detail">
                Job Title Here
            </div>
            <div class="staff-team detail">
                Team Name Here
            </div>
            <div class="staff-email detail">
                <a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
            </div>
            <div class="staff-phone detail">
                123-456-6778
            </div>
            <div class="staff-text detail">
                <h4>Ask me about:</h4>
                <ul>
                    <li>Area of Expertise 1</li>
                    <li>Area of Expertise 2</li>
                    <li>Area of Expertise 3</li>
                </ul>
            </div>
        </div>
    </div>
</section>
 
<section class="staff-grid">
{% for staff_item in staff_items %}
  {% include "@staff_card" with staff_item %}
{% endfor %}
</section>
 
{
  "staff_items": {
    "1": {
      "card_img": "/img/silhoutte.jpg",
      "name_link": "https://es.pn",
      "name": "Jane Doe",
      "title": "Job Title Here",
      "staff_team": "Team Name Here",
      "staff_email": "email123@lehigh.edu",
      "phone": "123-456-6778",
      "staff_expertise": {
        "1": {
          "text": "Area of Expertise 1"
        },
        "2": {
          "text": "Area of Expertise 2"
        },
        "3": {
          "text": "Area of Expertise 3"
        }
      }
    },
    "2": {
      "card_img": "/img/silhoutte.jpg",
      "name_link": "https://es.pn",
      "name": "John Doe",
      "title": "Job Title Here",
      "staff_team": "Team Name Here",
      "staff_email": "email123@lehigh.edu",
      "phone": "123-456-6778",
      "staff_expertise": {
        "1": {
          "text": "Area of Expertise 1"
        },
        "2": {
          "text": "Area of Expertise 2"
        },
        "3": {
          "text": "Area of Expertise 3"
        }
      }
    },
    "3": {
      "card_img": "/img/silhoutte.jpg",
      "name_link": "https://es.pn",
      "name": "Steve Doe",
      "title": "Job Title Here",
      "staff_team": "Team Name Here",
      "staff_email": "email123@lehigh.edu",
      "phone": "123-456-6778",
      "staff_expertise": {
        "1": {
          "text": "Area of Expertise 1"
        },
        "2": {
          "text": "Area of Expertise 2"
        },
        "3": {
          "text": "Area of Expertise 3"
        }
      }
    },
    "4": {
      "card_img": "/img/silhoutte.jpg",
      "name_link": "https://es.pn",
      "name": "Steve Doe",
      "title": "Job Title Here",
      "staff_team": "Team Name Here",
      "staff_email": "email123@lehigh.edu",
      "phone": "123-456-6778",
      "staff_expertise": {
        "1": {
          "text": "Area of Expertise 1"
        },
        "2": {
          "text": "Area of Expertise 2"
        },
        "3": {
          "text": "Area of Expertise 3"
        }
      }
    },
    "5": {
      "card_img": "/img/silhoutte.jpg",
      "name_link": "https://es.pn",
      "name": "Steve Doe",
      "title": "Job Title Here",
      "staff_team": "Team Name Here",
      "staff_email": "email123@lehigh.edu",
      "phone": "123-456-6778",
      "staff_expertise": {
        "1": {
          "text": "Area of Expertise 1"
        },
        "2": {
          "text": "Area of Expertise 2"
        },
        "3": {
          "text": "Area of Expertise 3"
        }
      }
    }
  }
}
  • Content: 
    .staff-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: $space_two;

  .staff {
    max-width: calc(300px + $spacer);
  }
}

#views-exposed-form-research-staff-directory-block-1 {
  .form-select {
    width: unset;
    max-width: 250px;
  }
}
  • URL: /components/raw/staff_grid/staff_grid.scss
  • Filesystem Path: bits/05-sections/staff_grid/staff_grid.scss
  • Size: 298 Bytes

Display staff in a grid pattern.