Component Library

Faculty Staff Card 

<div class="faculty-staff-card">
    <div class="faculty-staff-card__media">
        <div class="faculty-staff-card__media-container">
            <img src="../../img/emmanuel_agba.png" alt="test" loading="lazy" />
        </div>
    </div>
    <div class="faculty-staff-card__content">
        <p class="faculty-staff-card__content-title">
            <a href="#" class="iastate22-link-secondary">Lorem ipsum
          <span class="arrow"></span>
        </a>
        </p>
        <p class="faculty-staff-card__content-body">Sample Title.</p>
        <ul class="faculty-staff-card__content-contact">
            <li>
                <div class="faculty-staff-card__content-icon">
                    <a href="mailto:test@test.com">
              <i class="fak fa-iastate22-email"></i>
            </a>
                </div>
                <div class="faculty-staff-card__contact-field">
                    <a href="mailto:test@test.com">test@test.com</a>
                </div>
            </li>
            <li>
                <div class="faculty-staff-card__content-icon">
                    <i class="fak fa-iastate22-phone"></i>
                </div>
                <div class="faculty-staff-card__contact-field">(444) 444-4444</div>
            </li>
            <li>
                <div class="faculty-staff-card__content-key">
                    <strong>Name:</strong>
                </div>
                <div class="faculty-staff-card__contact-value">Lorem ipsum</div>
            </li>
            <li>
                <div class="faculty-staff-card__content-key">
                    <strong>Name2:</strong>
                </div>
                <div class="faculty-staff-card__contact-value"><a href='#'>Lorem ipsum</a></div>
            </li>
            <li>
                <div class="faculty-staff-card__content-key">
                    <strong>Name3:</strong>
                </div>
                <div class="faculty-staff-card__contact-value"><a href='#'>Lorem ipsum</a></div>
            </li>
            <li>
                <div class="faculty-staff-card__content-key">
                    <strong>Name4:</strong>
                </div>
                <div class="faculty-staff-card__contact-value">Lorem ipsum</div>
            </li>
        </ul>
    </div>
</div>
 
<div class="faculty-staff-card">
  <div class="faculty-staff-card__media">
    <div class="faculty-staff-card__media-container">
      <img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy"/>
    </div>
  </div>
  <div class="faculty-staff-card__content">
    <p class="faculty-staff-card__content-title">
      {% if url %}
        <a href="{{ url }}" class="iastate22-link-secondary">{{ title }}
          <span class="arrow"></span>
        </a>
      {% else %}
        {{ title }}
      {% endif %}
    </p>
    <p class="faculty-staff-card__content-body">{{ body }}</p>
    <ul class="faculty-staff-card__content-contact">
      {% if email %}
        <li>
          <div class="faculty-staff-card__content-icon">
            <a href="mailto:{{ email }}">
              <i class="fak fa-iastate22-email"></i>
            </a>
          </div>
          <div class="faculty-staff-card__contact-field">
            <a href="mailto:{{ email }}">{{ email }}</a>
          </div>
        </li>
      {% endif %}
      {% if phone %}
        <li>
          <div class="faculty-staff-card__content-icon">
            <i class="fak fa-iastate22-phone"></i>
          </div>
          <div class="faculty-staff-card__contact-field">{{ phone }}</div>
        </li>
      {% endif %}
      {% for fact in facts %}
        <li>
          <div class="faculty-staff-card__content-key">
            <strong>{{ fact.key }}:</strong>
          </div>
          <div class="faculty-staff-card__contact-value">{{ fact.value|raw }}</div>
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
 
{
  "image": {
    "src": "../../img/emmanuel_agba.png",
    "alt": "test"
  },
  "url": "#",
  "title": "Lorem ipsum",
  "body": "Sample Title.",
  "email": "test@test.com",
  "phone": "(444) 444-4444",
  "facts": [
    {
      "key": "Name",
      "value": "Lorem ipsum"
    },
    {
      "key": "Name2",
      "value": "<a href='#'>Lorem ipsum</a>"
    },
    {
      "key": "Name3",
      "value": "<a href='#'>Lorem ipsum</a>"
    },
    {
      "key": "Name4",
      "value": "Lorem ipsum"
    }
  ]
}
  • Content: 
    .faculty-staff-card {
  display: block;
  @include media-breakpoint-up(sm) {
    display: flex;
    flex-direction: row;
    gap: rem(20);
    max-width: rem(488);
  }
}
.faculty-staff-card__media {
  margin-bottom: rem(15);
}

.faculty-staff-card__media-container {
  @extend %responsive-img;
  position: relative;
  width: rem(200);
  &:before {
    padding-top: 100%;
  }
}

.faculty-staff-card__content-title {
  font-size: rem(21);
  color: $iastate-maroon;
  font-family: $typeface-sans-serif;
  font-weight: 700;
  line-height: (29 / 21);
  color: $iastate-maroon;
  .iastate22-link-secondary {
    font-size: rem(21);
    .arrow {
      bottom: rem(13);
    }
  }
  margin: 0;
  a {
    margin: 0;
  }
}
.faculty-staff-card__content-body {
  color: $grey;
  font-size: rem(16);
  margin: 0 0 rem(15);
}
.faculty-staff-card__content-contact {
  padding-left: 0;
  li {
    color: $iastate-maroon;
    margin: 0 0 rem(10);
    font-weight: 700;
    display: flex;
    .fa-iastate22-email,
    .fa-iastate22-phone {
      color: $iastate-maroon;
      font-size: rem(30);
    }
    a {
      color: $iastate-maroon;
    }

    &:before {
      content: "";
      padding: 0;
      margin-top: rem(5);
    }
  }
}

.faculty-staff-card__content-key {
  font-weight: 700;
}

.faculty-staff-card__contact-field {
  padding-left: rem(20);
}

.faculty-staff-card__contact-value {
  padding-left: rem(5);
}
  • URL: /components/raw/faculty-staff-card/_faculty-staff-card.scss
  • Filesystem Path: src/components/faculty-staff-card/_faculty-staff-card.scss
  • Size: 1.4 KB

There are no notes for this item.