A responsive profile card component for displaying faculty/staff information including photo, name, title, department, contact details, and an optional bio.
All blocks stack vertically in DOM order: image, identity (name/title/unit), contact info, and bio text. Each section spans full width.
At the large breakpoint, the layout splits into two independent float-based columns:
min-height ensures enough vertical space for the image, so the contact naturally sits directly beneath it.A :before pseudo-element on the right column extends the grey background 60px to the left, creating a subtle overlap onto the image column.
The component conditionally renders: image, title (supports multiple as an array), unit, phone, email, location, profile URL, and bio. A :has() selector adjusts identity padding depending on whether a bio is present.
<div class="tcu-profile-card-bio tcu-component">
<div class="tcu-profile-card-bio__image">
<img src="https://www.tcu.edu/directory/images/Falcone-Ellie.jpg" alt="Ellie Falcone headshot" width="200" height="200" loading="lazy">
</div>
<div class="tcu-profile-card-bio__identity">
<div class="tcu-profile-card-bio__name">Ellie Falcone</div>
<div class="tcu-profile-card-bio__title">
<p>Assistant Professor of Supply Chain Management</p>
</div>
<div class="tcu-profile-card-bio__unit">Information Systems & Supply Chain Management</div>
</div>
<div class="tcu-profile-card-bio__contact">
<span class="tcu-profile__icon">
<svg class="tcu-phone-icon" focusable="false" height="24" width="24">
<use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icon-phone-icon" xlink:href="#icon-phone-icon">
</use>
</svg>
817-257-6260
</span>
<span class="tcu-profile__icon">
<svg class="tcu-email-icon" focusable="false" height="24" width="24">
<use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icon-email-icon" xlink:href="#icon-email-icon">
</use>
</svg>
<a href="mailto:e.falcone@tcu.edu">e.falcone@tcu.edu</a>
</span>
<span class="tcu-profile__icon">
<svg class="tcu-location-pin-icon" focusable="false" height="24" width="24">
<use xmlns:xlink="http://www.w3.org/1999/xlink" href="#icon-location-pin-icon" xlink:href="#icon-location-pin-icon"></use>
</svg>
Neeley 3240
</span>
<a href="https://neeley.dev.tcu.edu/view/falcone-ellie" aria-label="View Ellie Falcone Profile">View Profile</a>
</div>
<div class="tcu-profile-card-bio__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>