<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>
{% if title is iterable %}
	{% set titles = title %}
{% else %}
	{% set titles = title is defined ? [title] : [] %}
{% endif %}
{% if phone is iterable %}
	{% set phones = phone %}
{% else %}
	{% set phones = phone ? [phone] : [] %}
{% endif %}
{% if staff_expertise is iterable %}
	{% set staff_expertises = staff_expertise %}
{% else %}
	{% set staff_expertises = staff_expertise is defined ? [staff_expertise] : [] %}
{% endif %}


<div class="card staff">
  {% block card_img %}
  {% if card_img %}
  <div class="card-image">
    <img src="{{ card_img }}" class="card-img-top" alt="" />
  </div>
  {% endif %}
  {% endblock card_img %}
  <div class="card-body">
    <h3 class="staff-name">
    {% block profile_name %}
    {% if name %}
      {% if name_link %}
      <a href="{{ name_link }}">{{ name }}</a>
      {% endif %}
    {% endif %}
    {% endblock profile_name %}
    </h3>
    {% for title in titles %}
    {% block staff_title %}
    {% if title %}
    <div class="staff-title detail">
      {{ title }}
    </div>
    {% endif %}
    {% endblock staff_title %}
    {% endfor %}
    {% block staff_team %}
    {% if staff_team %}
    <div class="staff-team detail">
      {{ staff_team }}
    </div>
    {% endif %}
    {% endblock staff_team %}
    {% block staff_email %}
    {% if staff_email %}
    <div class="staff-email detail">
      <a href="mailto:{{ staff_email }}">{{ staff_email }}</a>
    </div>
    {% endif %}
    {% endblock staff_email %}
    {% for phone in phones %}
    {% if phone %}
    <div class="staff-phone detail">
      {{ phone }}
    </div>
    {% endif %}
    {% endfor %}
    {% if staff_expertise %}
    <div class="staff-text detail">
      <h4>Ask me about:</h4>
      <ul>
    {% endif %}
      {% block staff_expertise %}
      {% for staff_expertise in staff_expertises %}
        <li>{{ staff_expertise.text }}</li>
      {% endfor %}
      {% endblock staff_expertise %}
    {% if staff_expertise %}
      </ul>
    </div>
    {% endif %}
  </div>
</div>
{
  "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"
    }
  }
}
  • Content:
    .card {
      &.staff {
        width: 100%;
        background-color: $white;
        background-color: var(--white, $white);
        border-left: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 5px;
        border-top: 3px solid $accent_color;
        border-top: 3px solid var(--accent_color, $accent_color);
        padding: $space_one_half;
        -webkit-box-shadow: 0 5px 15px $drop_shadow;
        -moz-box-shadow: 0 5px 15px $drop_shadow;
        box-shadow: 0 5px 15px $drop_shadow;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    
        .color-scheme-dark & {
          -webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
          -moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
          box-shadow: 0 5px 15px $drop_shadow_darkmode;
          color: $base_font;
          color: var(--base_font, $base_font);
    
          h3 {
            a {
              color: var(--hyperlink, $hyperlink);
    
              &:hover,
              &:focus {
                text-decoration: none;
                color: var(--black, $black) !important;
                border-bottom: 2px solid var(--accent_color, $accent_color);
              }
            }
          }
        }
    
        .card-img-top {
          transition: transform .2s;
        }
    
        &:hover,
        &:focus-within {
          -webkit-box-shadow: 0 0 10px $drop_shadow;
          -moz-box-shadow: 0 0 10px $drop_shadow;
          box-shadow: 0 0 10px $drop_shadow;
    
          .color-scheme-dark & {
            -webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
            -moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
            box-shadow: 0 0 10px $drop_shadow_darkmode;
          }
        }
    
        .card-image,
        .profile-square {
          max-width: unset;
    
          .media {
            display: block;
          }
    
          img {
            width: 300px;
          }
        }
    
        .card-body {
          display: flex;
          flex-direction: column;
    
          .staff-name {
            color: $body-color;
            color: var(--body-color, $body-color);
    
            a {
              color: inherit;
              text-decoration: underline;
              border-bottom: 0;
    
              &:hover,
              &:focus {
                text-decoration: none;
    
                .color-scheme-dark & {
                  color: $body-color;
                  color: var(--body-color, $body-color);
                }
    
                .accent-lehigh_brown &,
                .accent-blue_k60 & {
                  .color-scheme-dark & {
                    color: $white;
                    color: var(--white, $white);
                  }
                }
              }
            }
          }
        }
        .detail {
          margin: 0 0 $space_one_half 0;
    
          &:last-of-type {
            margin: 0;
          }
    
          &.staff-text {
            margin: $spacer 0;
    
            .color-scheme-dark & {
              color: $base_font;
              color: var(--base_font, $base_font);
            }
    
            a {
              color: $hyperlink_breadcrumb;
              color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
              border-bottom: 2px solid $hyperlink_breadcrumb;
              border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
            }
    
            .color-scheme-dark & {
              a {
                color: $hyperlink_breadcrumb;
                color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
                border-bottom: 2px solid $hyperlink_breadcrumb;
                border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
    
                .accent-lehigh_brown &,
                .accent-blue_k60 & {
                  color: $white;
                  color: var(--white, $white);
                  border-bottom: 2px solid $white;
                  border-bottom: 2px solid var(--white, $white);
                }
    
                &:hover,
                &:focus {
                  color: $black !important;
                  color: var(--black, $black) !important;
                  border-bottom: $accent_color !important;
                  border-bottom: var(--accent_color, $accent_color) !important;
                }
              }
            }
    
            h4 {
              font-size: 1.25rem;
            }
    
            ul {
              @include reset-list;
    
              li {
                margin: 0 0 0 $spacer;
                list-style-type: none;
              }
            }
          }
        }
      }
    }
    
  • URL: /components/raw/staff_card/staff_card.scss
  • Filesystem Path: bits/04-components/staff_card/staff_card.scss
  • Size: 4.2 KB

Display card with image.