Component: Profile Card 1.0

This builder will allow you to generate a custom version of the Profile Card component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

theme (attribute)

Color theme used

round (attribute)

Make the profile image round

aspectratio (attribute)

Force image aspect ratio

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-profile-card--font

Font for the card content [default: var(--il-font-sans)]

--ilw-profile-card--heading-color

Color of the heading in the card [default: var(--il-blue)]

--ilw-profile-card--text-color

Color of text in the card [default: var(--ilw-text--color)]

--ilw-profile-card--heading--font-size

Size of headings inside the card [default: 1.5em]

--ilw-profile-card--title--font-size

Size of the title below the name [default: 1.1em]

--ilw-profile-card--link

Color for links inside the card [default: var(--il-industrial)]

--ilw-profile-card--link-focus

Focus and hover color for links inside the card [default: var(--ilw-link--focused-color)]

--ilw-profile-card--link-visited

Visited link color for inside the card [default: var(--il-industrial)]

--ilw-profile-card--border-bottom

Bottom border for the card [default: 4px solid var(--il-blue)]

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

A card component built to show a profile card.

Full Version: 1.0.0

Type: web component

Date Created: 10/22/2024

Version notes:

Github repository: https://github.com/web-illinois/ilw-profile-card/

Javascript file: https://cdn.toolkit.illinois.edu/ilw-profile-card/1.0.0/ilw-profile-card.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-profile-card/1.0.0/ilw-profile-card.css

JSON information: ilw-profile-card.1.0.json