Web Implementation Guidelines Group Component Builder Information (v3+)

Preview: Profile Card 1.0

These are a preview of components with individual items triggered. Because this is automatically generated, some of these components may look similiar to each other. This is also used by the Axe Monitor process to validate accessibility.

Preview: Base level for default

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and theme =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and theme = gray

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and round =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and round = true

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and aspectratio =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and aspectratio = 1/1

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and aspectratio = 2/1

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and aspectratio = 16/10

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: default and aspectratio = 10/16

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708

217-333-0000

example@illinois.edu

Preview: Base level for all

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and theme =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and theme = gray

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and round =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and round = true

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and aspectratio =

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and aspectratio = 1/1

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and aspectratio = 2/1

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and aspectratio = 16/10

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

Preview: all and aspectratio = 10/16

Photo of First Last in front of the Illini Union.

First & Last Name

Job Title or Description

110A Education M/C 708 M/C 708 M/C 708

217-333-0000

example@illinois.edu

M-F 8:00 AM-4:30 PM In Office

LinkedIn

X (Twitter)

Facebook

Related News

Manager: Last Name, First Name

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

Web Implementation Guidelines Group Component Builder Information (v3+)

Note: this page is not using the toolkit because it is meant to test individual components in isolation.