The profile card calls out key information about a user and showcases the
user's image. In the example below the profile card does not have any more
styles.
Jane Doe
ID #88888810
LINQ High School
M - F 7:00AM - 8:00PM
account_circle
Profile Card with More Info
The example below has extra information, but the extra information styles
are not part of the profile card styles. The extra information is using
key/value classes, not profile card specific class names.
Kitty McCatterson
ID #34548810
Failed Obedience Training
S - M 3:00AM - 6:00AM
Key
Value
Profile Card Full Design
Nicolas Cage
ID #496382856
Beverly Hills High School
F - S 5:00PM - 1:00AM
Meal Balance (as of December 10)
$88.07
Fees Due (as of December 10th)
$50.00
Bus Pick Up
Main St / Wilson Blvd 6:35AM
Bus Drop Off
171 Main Street 5:05AM
not_interested
Food Allergies: None
medical_services
Bee Sting Requires EpiPen
Profile Cards in Grid
By design Cards, like (almost) all components, do not have a set width. The
width must be set by the parent container