University of Florida College of the Arts Pattern Library

Profile Mini: Default 

<div class="
    mini
    
">
    <div class="mini__title-and-cta">
        <h2 class="
                mini__title
                " data-show-title="true" data-cy="event-mini__title" id="Staff">
            Staff
        </h2>
        <div class="mini__cta-container" data-cy="event-mini__cta-container" data-show-cta="true">

            <a href="#" class="standard-button standard-button--light
            standard-button---width standard-button--tertiary">
                <div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See full directory</span><span class="standard-button__underline"></span></span></div>
            </a>
        </div>
    </div>
    <div class="mini__cards">
        <article class="card-with-image">
            <div class="card-with-image__image">
                <picture class="profile-card__picture">
                    <source srcset="https://placekitten.com/200/200" type="image/webp">
                    <img class="profile-card__image" src="https://placekitten.com/200/200" data-cy="profile-card__image" alt='friendly kitten' style="object-position: 50% 50%;" />
                </picture>
            </div>
            <div class="card-with-image__content">
                <div class="profile-card__title">

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">Terence J. Galbraith</span>
                        </a>
                    </h3>
                </div>
                <div class="profile-card__current">
                    <div class="profile-card__titles">
                        Señor
                    </div>
                </div>
                <div class="profile-card__contact">
                    <div class="profile-card__contact-email">
                        <span class="profile-card__contact-email-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <g id="mail">
                                    <mask id="mask0_4863_41353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                        <rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
                                    </mask>
                                    <g mask="url(#mask0_4863_41353)">
                                        <path id="mail_2" d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#162F93" />
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <a href="mailto:TerenceJGalbraith@jourrapide.com" class="profile-card__contact-email-link">
                            TerenceJGalbraith@jourrapide.com
                        </a>
                    </div>
                </div>
            </div>
        </article>
        <article class="card-with-image">
            <div class="card-with-image__image">
                <picture class="profile-card__picture">
                    <source srcset="https://placekitten.com/200/200" type="image/webp">
                    <img class="profile-card__image" src="https://placekitten.com/200/200" data-cy="profile-card__image" alt='friendly kitten' style="object-position: 50% 50%;" />
                </picture>
            </div>
            <div class="card-with-image__content">
                <div class="profile-card__title">

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">Wendy D. Sanchez</span>
                        </a>
                    </h3>
                </div>
                <div class="profile-card__current">
                    <div class="profile-card__titles">
                        Dr.
                    </div>
                </div>
                <div class="profile-card__contact">
                    <div class="profile-card__contact-email">
                        <span class="profile-card__contact-email-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <g id="mail">
                                    <mask id="mask0_4863_41353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                        <rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
                                    </mask>
                                    <g mask="url(#mask0_4863_41353)">
                                        <path id="mail_2" d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#162F93" />
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <a href="mailto:WendyDSanchez@teleworm.us" class="profile-card__contact-email-link">
                            WendyDSanchez@teleworm.us
                        </a>
                    </div>
                </div>
            </div>
        </article>
        <article class="card-with-image">
            <div class="card-with-image__image">
                <picture class="profile-card__picture">
                    <source srcset="https://placekitten.com/200/200" type="image/webp">
                    <img class="profile-card__image" src="https://placekitten.com/200/200" data-cy="profile-card__image" alt='friendly kitten' style="object-position: 50% 50%;" />
                </picture>
            </div>
            <div class="card-with-image__content">
                <div class="profile-card__title">

                    <h3 class="linked-title linked-title--h3">
                        <a href="#" class="linked-title__link">
                            <span class="linked-title__link-text">Antone T. Grissom</span>
                        </a>
                    </h3>
                </div>
                <div class="profile-card__current">
                    <div class="profile-card__titles">
                        Wizard
                    </div>
                </div>
                <div class="profile-card__contact">
                    <div class="profile-card__contact-email">
                        <span class="profile-card__contact-email-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <g id="mail">
                                    <mask id="mask0_4863_41353" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
                                        <rect id="Bounding box" width="24" height="24" fill="#D9D9D9" />
                                    </mask>
                                    <g mask="url(#mask0_4863_41353)">
                                        <path id="mail_2" d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="#162F93" />
                                    </g>
                                </g>
                            </svg>
                        </span>
                        <a href="mailto:AntoneTGrissom@rhyta.com" class="profile-card__contact-email-link">
                            AntoneTGrissom@rhyta.com
                        </a>
                    </div>
                </div>
            </div>
        </article>
    </div>

</div>
 
{% extends 'templates/mini/mini.twig' %}
    {% block content %}
       {% for person in fields.profiles %}
            {% include 'partials/profile-card/profile-card.twig' with {
                post: person,
                includeTags: false,
            }%}
        {% endfor %}
    {% endblock %}
 
{
  "fields": {
    "type": "profile-mini",
    "showTitle": true,
    "title": "Staff",
    "profiles": [
      {
        "fullName": "Terence J. Galbraith",
        "titles": "Señor",
        "featuredImage": {
          "src": "https://placekitten.com/200/200",
          "altText": "friendly kitten",
          "focalPoint": {
            "x": 50,
            "y": 50
          }
        },
        "emailAddress": "TerenceJGalbraith@jourrapide.com",
        "phoneNumber": "623-327-6582",
        "permalink": "#",
        "tags": [
          {
            "term_id": 5,
            "name": "Deans Office",
            "slug": "deans-office",
            "term_taxonomy_id": 5,
            "taxonomy": "units_and_areas",
            "parent": 0
          },
          {
            "term_id": 6,
            "name": "School of Music",
            "slug": "school-of-music",
            "term_taxonomy_id": 6,
            "taxonomy": "units_and_areas",
            "parent": 0
          }
        ]
      },
      {
        "fullName": "Wendy D. Sanchez",
        "titles": "Dr.",
        "featuredImage": {
          "src": "https://placekitten.com/200/200",
          "altText": "friendly kitten",
          "focalPoint": {
            "x": 50,
            "y": 50
          }
        },
        "emailAddress": "WendyDSanchez@teleworm.us",
        "phoneNumber": "615-691-3250",
        "permalink": "#",
        "tags": [
          {
            "term_id": 5,
            "name": "Deans Office",
            "slug": "deans-office",
            "term_taxonomy_id": 5,
            "taxonomy": "units_and_areas",
            "parent": 0
          },
          {
            "term_id": 6,
            "name": "School of Music",
            "slug": "school-of-music",
            "term_taxonomy_id": 6,
            "taxonomy": "units_and_areas",
            "parent": 0
          }
        ]
      },
      {
        "fullName": "Antone T. Grissom",
        "titles": "Wizard",
        "featuredImage": {
          "src": "https://placekitten.com/200/200",
          "altText": "friendly kitten",
          "focalPoint": {
            "x": 50,
            "y": 50
          }
        },
        "emailAddress": "AntoneTGrissom@rhyta.com",
        "phoneNumber": "425-502-0739",
        "permalink": "#",
        "tags": [
          {
            "term_id": 5,
            "name": "Deans Office",
            "slug": "deans-office",
            "term_taxonomy_id": 5,
            "taxonomy": "units_and_areas",
            "parent": 0
          },
          {
            "term_id": 6,
            "name": "School of Music",
            "slug": "school-of-music",
            "term_taxonomy_id": 6,
            "taxonomy": "units_and_areas",
            "parent": 0
          }
        ]
      }
    ],
    "showCTALink": true,
    "linkText": "See full directory",
    "linkUrl": "#"
  }
}

No notes defined.