Component Library

Faculty Staff Card Set 

<div class="faculty-staff-card-set">
    <div>
        <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>
    <div>
        <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-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>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <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">
                            <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>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <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-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>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="faculty-staff-card-set">
  {% for card in cards %}
    <div>
      {% include "@faculty-staff-card" with card %}
    </div>
  {% endfor %}
</div>
 
{
  "cards": [
    {
      "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"
        }
      ]
    },
    {
      "image": {
        "src": "../../img/emmanuel_agba.png",
        "alt": "test"
      },
      "url": "#",
      "title": "Lorem ipsum",
      "body": "Sample Title",
      "email": "test@test.com",
      "phone": "",
      "facts": [
        {
          "key": "Name",
          "value": "Lorem ipsum"
        },
        {
          "key": "Name2",
          "value": "<a href='#'>Lorem ipsum</a>"
        }
      ]
    },
    {
      "image": {
        "src": "../../img/emmanuel_agba.png",
        "alt": "test"
      },
      "url": "#",
      "title": "Lorem ipsum",
      "body": "Sample Title",
      "email": "",
      "phone": "(444) 444-4444",
      "facts": [
        {
          "key": "Name",
          "value": "Lorem ipsum"
        }
      ]
    },
    {
      "image": {
        "src": "../../img/emmanuel_agba.png",
        "alt": "test"
      },
      "url": "#",
      "title": "Lorem ipsum",
      "body": "Sample Title",
      "email": "",
      "phone": "",
      "facts": [
        {
          "key": "Name",
          "value": "Lorem ipsum"
        },
        {
          "key": "Name2",
          "value": "<a href='#'>Lorem ipsum</a>"
        },
        {
          "key": "Name3",
          "value": "<a href='#'>Lorem ipsum</a>"
        }
      ]
    }
  ]
}
  • Content: 
    .faculty-staff-card-set {
  display: block;
  @include media-breakpoint-up(lg) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: rem(40);
  }
  .faculty-staff-card {
    margin-bottom: rem(40);
  }
}
  • URL: /components/raw/faculty-staff-card-set/_faculty-staff-card-set.scss
  • Filesystem Path: src/components/faculty-staff-card-set/_faculty-staff-card-set.scss
  • Size: 225 Bytes

There are no notes for this item.