Alt Profile Card Component

[kgarza-utsa]

@garza here is the code snippet - don't harshly judge the table :P ... it was a quick way for me to sketch up how to visualize a counselor card for our use case and figure out the balance between button and image, etc. Any thoughts from the team would be helpful!

FYI - everything below uses DLS styles for the profile card component but there were some overwrites to <td> and <tr> styles if we decide to keep it in a table ...

<div class="profile-card white-b-bg">

<div class="profile-card-img text-center pt-3 pb-2" style="border-bottom:6px solid #f15a22;"> <a href="https://futurenew.flywheelsites.com/counselors/alaysia/"> <img src="https://marvel-b1-cdn.bc0a.com/f00000000183808/futurenew.flywheelsites.com/wp-content/uploads/counselor_Desinty.jpg'"> </a> </div>

<div class="profile-card-content"> <p class="profile-card-name"><a href="#">Alaysia Moore</a></p> <p class="profile-card-title">Undergradaute Admissions Counseor</p> <a class="blue-btn" href="#">Contact Alaysia</a> <table> <tbody> <tr> <td width="5%"><i class="fa-solid fa-user-group orange-a11y"></i></td> <td class="fw-normal"><p style="line-height:1.3;" class="pt-1">Freshman</p></td> </tr> <tr> <td width="5%"><i class="fa-solid fa-location-dot orange-a11y"></i></td> <td class="fw-normal"> <p style="line-height:1.3;" class="pt-1">Amarillo / Panhandle</p> <p style="line-height:1.3;" class="pt-1">Del Rio / Uvalde / Laredo</p> <p style="line-height:1.3;" class="pt-1">El Paso / West Texas</p> <p style="line-height:1.3;" class="pt-1">Rio Grande Valley (Northwest)</p> <p style="line-height:1.3;" class="pt-1">San Antonio (Northeast)</p></td> </tr> <tr> <td width="5%"><i class="fa-solid fa-school-flag orange-a11y"></i></td> <td class="fw-normal"> <p style="line-height:1.3;" class="pt-1">Comal ISD</p> <p style="line-height:1.3;" class="pt-1">Judson ISD</p> <p style="line-height:1.3;" class="pt-1">Marion ISD</p> <p style="line-height:1.3;" class="pt-1">Northeast ISD</p> <p style="line-height:1.3;" class="pt-1">Schertz/ Cibolo/Universal ISD</p></td> </tr> <tr> <td width="5%"><i class="fa-solid fa-earth-americas orange-a11y"></i></td> <td class="fw-normal"><p style="line-height:1.3;" class="pt-1">se habla español</p></td> </tr> </tbody> </table> </div>

</div>

[garza-utsa]

I could see us reusing this for a staff directory type of card, I'll think of a good name for a variant

[garza-utsa]

@kgarza-utsa, just to follow up, you mentioned that @jampafoo will be working on this first before contributing something back?

[garza-utsa]

Closing due to in-activity. @kgarza-utsa, feel free to re-open when you have more details/progress =)