College Design Language System

Profile Card: Blue

About Profile Card

This is a smaller level component and is not designed to be used stand alone.

An example of this component in action, please see the corresponding Faculty Group component.

Guidance

When to use the Profile Card component

This component should only be used in Faculty Group, on a marketing landing or home page for displaying a quick list of faculty.

When to consider something else

If you need to display more information about a faculty member on a page, please consider the Profile Info or Faculty Bio components.

Accessibility Notes

The name of the person in the profile card is meant to be linked to a more detail page, for faculty, this would be their respective faculty profile page. This feature is optional, and without it, there should be no other interaction within this component except for any anchor tags contained within the card content box (email, phone, anchor tags in the short content field).

Using the quickfacts component

This component is supported in our Cascade templates via the Asset Factory: Blocks > Faculty and is used via the faculty listing page template.

Component Variants

This component currently only supports two variants:

  • Default: white background with orange text name, and regular text
  • Blue (Alt): blue background with white name and white regular text

Media Requirements

  • Profile Card Image: The headshot image of the person in the profile card. Our standard headshot image size is 400px (width) by 500px (height), 72 ppi (pixels per inch) jpeg or png.
    • Image should be no larger than 300kb (kilobytes)

Copy Requirements

A profile card consists of the following elements:

  • Headshot: the image to be displayed in the card (headshot of the person)
  • Display Name: the name of the person
  • Details
    • Title: a text field for displaying the person’s primary title (Required)
    • Secondary Title: a text field for displaying alternative or additional title information (Optional)
    • Profile Link: a URL for hyperlinking the Display Name (Optional)
    • Content: a WYSIWYG box for the rest of the content on the card, please keep in mind this component will be displayed next to other cards so it is important to keep the details content consistent in formatting and length with all the other cards being displayed. Again, please see Faculty Group for an example.

Original Source and Implementation Notes

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#profile-card

<div class="profile-card blue-bg white">
    <div class="profile-card-img">
        <img src="../../college-dls/college/images/faculty/Nicole-Beebe.jpg" alt="Card Image">
    </div>
    <div class="profile-card-content">
        <p class="profile-card-name">
            Nicole Beebe, Ph.D., CISSP
            </a></p>
        <p class="profile-card-title">Professor, Information Systems and Cyber Security</p>
        <p><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a class="phone-no" href="tel:210-123-4567">210-123-4567</a></p>
        <p><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a class="mail-info" href="mailto:supercalifragilisticexpialidocious.Supercalifragilisticexpialidocious@utsa.edu">supercalifragilisticexpialidocious.Supercalifragilisticexpialidocious@utsa.edu</a></p>
    </div>
</div>
  • Content: 
    /* components/02-components/01-card/05-profile/01-profile-card/profile-card.scss */
/* BEGIN profile-card.scss */


.profile-card {
	// clip-path: polygon(100% 0, 100% 18%, 100% 84%, 84% 100%, 0 100%, 0% 60%, 0 0);
	// -webkit-clip-path: polygon(100% 0, 100% 18%, 100% 84%, 84% 100%, 0 100%, 0% 60%, 0 0);
	--notchSize: 3.8rem;
	clip-path: polygon(100% 0,
			100% calc(100% - var(--notchSize)),
			calc(100% - var(--notchSize)) 100%,
			0 100%,
			0 0);
	-webkit-clip-path: polygon(100% 0,
			100% calc(100% - var(--notchSize)),
			calc(100% - var(--notchSize)) 100%,
			0 100%,
			0 0);
	height: 100%;

	a {
		word-wrap: break-word; /* Internet Explorer 5.5+ */
	}

	.profile-card-img>img {
		width: 100%;
		min-height: 500px;
		-o-object-fit: cover;
		object-fit: cover;
	}

	.profile-card-content {
		padding: 17px 35px;
		border-top: 6px solid $orange;

		p {
			margin-bottom: 5px;
		}

		.profile-card-link {
			font-size: 1.3rem;
			font-weight: 700;
			text-decoration: none;
			color: $orange-a11y;
		}

		.profile-card-name {
			font-size: 1.3rem;
			font-weight: 700;
			color: $blue;

		}

		.h5 {
			font-size: 25px;
			margin-bottom: 16px;
		}

		.profile-card-title {
			margin-bottom: 10px;
			font-weight: 600;
		}

		.profile-description {
			padding: 10px 0;
		}

		.icon {
			display: inline-block;
			font-size: 15px;
			width: 15px;
			margin-right: 5px;
			text-align: center;
		}
	}

	&.blue-bg {
		.profile-card-name {
			color: $grey-b;
		}

		.profile-card-link {
			color: $white;
		}
	
		.profile-card-link>a:hover {
			color: $orange-a11y;
		}
	
		.profile-card-name>a {
			color: $white;
			text-decoration: none;
		}
	
		.profile-card-name a:hover {
			color: $orange-a11y;
		}
	
		p {
			color: $white;
		}
	
		.profile-card-content,
		a {
			color: $white;
		}
	
		p a:hover {
			color: $orange-a11y;
		}
	}

	& .profile-card-link {
		color: $orange-a11y;
	}

	& .profile-card-link>a:hover {
		color: $blue;
	}

	& .profile-card-name,
	& .profile-card-name>a {
		color: $orange-a11y;
		text-decoration: none;
	}

	& .profile-card-name>a:hover {
		color: $blue;
		background-color: $grey;
	}

	& .phone-no:hover,
	& .mail-info:hover {
		color: $blue;
		background-color: $grey;
	}

	& .phone-no,
	& .mail-info {
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
	}
}

@include media-breakpoint-down(md) {
	.profile-card {
		.profile-details .right-arrow-link {
			position: absolute;
			top: 0;
			right: 0;
		}	
	}
}

/* Dark Mode - Component Styles - Faculty Profiles */
@include color-mode(dark) {
	.profile-card.blue-bg .profile-card-content {
		p, .mail-info, .phone-no {
			color:$white;
 		}
	}
	.profile-card.blue-bg .profile-card-content {
		.profile-card-name {
			color:$grey-b;
 		}
	}
	.profile-card.blue-bg .profile-card-content {
		a:hover {
		color: $blue;
		background-color: $grey;
 		}
	}
	.profile-card .profile-card-content {
		a:hover {
		color: $blue;
		background-color: $grey;
 		}
		ul li {
			color: $blue;
		}
	}
}
/* Component Styles - Faculty Profiles END */

/* END profile-card.scss */
  • URL: /components/raw/profile-card/profile-card.scss
  • Filesystem Path: components/02-components/04-profile/01-profile-card/profile-card.scss
  • Size: 3.1 KB 
<div class="profile-card blue-bg white">
    <div class="profile-card-img">
        <img src="{{path image}}" alt="Card Image">
    </div>
    <div class="profile-card-content">
        <p class="profile-card-name">
            {{#if link }}
                <span class="icon"><i class=" fa-solid fa-link" aria-hidden="true"></i></span> <a href="#">{{ name }}</a>
            {{else}}
                {{ name }}
            {{/if}}
        </a></p>
        <p class="profile-card-title">{{ title }}</p>
        <p><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a class="phone-no" href="tel:{{ phone }}">{{ phone }}</a></p>
        <p><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a class="mail-info" href="mailto:{{ email }}">{{ email }}</a></p>
    </div>
</div>