@illinois-toolkit/ilw-profile-card

ilw-profile-card

Links: ilw-profile-card in Builder | Illinois Web Theme | Toolkit Development

Overview

This is a profile card specifically tailored to display a person's profile, such as a faculty member, student, or staff member. It uses ilw-card as a base and adds specific slots and styling.

The profile card can be controlled with the following attributes:

• round clips the image into a round shape.
• The aspect ratio of the image slot can be forced using aspectratio, for example aspectratio="3/2".
• theme can be white (default) or gray.

Slots

Slot	Description
slot="image"	Placed at the top of the card, either full-width, or centered when round.
slot="name"	Below the image, this must be a heading of the appropriate level, with or without a link.
slot="title"	A title or short description shown below the name.
slot="address"	Displayed using a map marker icon. This can be an address or some other form of location, such as a department name.
slot="phone"	Shown as a phone number with a phone icon.
slot="email"	Shown as an email address with an email icon.
slot="hours"	A click icon that can be used for office hours.
slot="linkedin"	LinkedIn link.
slot="x"	X (Twitter) link.
slot="facebook"	Facebook link.
slot="news"	A news icon for linking to news feeds or articles.
slot="hr"	HR icon for human resource links.

Any additional content without a specific slot is shown below the slotted content, at the bottom of the card.

Code Examples

<ilw-profile-card>
    <img src="https://picsum.photos/320/200" alt="Photo of First Last in front of the Illini Union." slot="image">
    <h2 slot="name"><a href="#">First & Last Name</a></h2>
    <p slot="title">Job Title or Description</p>
    <div slot="address">
        <p>110A Education</p>
        <p>M/C 708</p>
    </div>
    <p slot="phone"><a href="#">217-333-0000</a></p>
    <p slot="email "><a href="#">[e-mail]</a></p>
</ilw-profile-card>

Accessibility Notes

• Make sure to use the correct heading level for the cards based on the rest of your page, if including a heading tag.
• The image will get reordered in the document to be below the unslotted content so it comes after the heading with the name. Including a descriptive alt text for the image is recommended.
• The following icons have alt text: address, phone, email, hours and HR. The others typically have a descriptive link text that would make the alt text repetitive (e.g. "Facebook graphic facebook link").

External References

• https://bbc.github.io/gel/components/cards/