College Design Language System

Contact Callout: Default Unlinked

Contact Callout Documentation

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

Implementation Notes

This is a smaller level component and is not designed to be used stand alone. TODO: Create a separate preview template for this component to pop into a col-3 or col-4 width size.

The Contact Callout is designed to be placed at the bottom of a sidebar or as a postfix to content, for a working example see the Reference - Department Secondary Page

Media Requirements

  • Profile Contact Image: The headshot image of the person in the profile contact. 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)
<div class="staff-card-component-div">
    <div class="row mb-5">
        <div class="col-12 col-sm-6 col-xl-4">
            <div class="staff-card-img">
                <img class="clip-mask-top-right" src="../../college-dls/college/images/account-user.png" alt="Card Image" />
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-8">
            <div class="staff-card-content">
                <h2 class="h4">Contact</h2>
                <p class="staff-card-name">Jane Doe, Ph.D.</p>
                <p class="profile-card-title mb-3">Associate Professor</p>
                <p class="staff-card-department">Department Name</p>
                <p class="mail-info">
                    <span class="icon"><i class="far fa-envelope fa-sm pr-1" aria-hidden="true"></i></span> <a href="#">jane.doe@utsa.edu</a>
                </p>
            </div>
        </div>
    </div>
</div>
  • Content: 
    /* components/02-components/01-card/05-profile/02-contact-callout/contact-callout.scss */
/* BEGIN contact-callout.scss */
.contact-card>.row>div {
	padding-left: 7px;
	padding-right: 7px;
}
.contact-card>.row {
	margin: 0px -7px;
}

.staff-card-content {
    margin-top: 15px;

	.staff-card-img img {
		width: 100%;
		height: 100%;
	}

	.staff-card-name {
		font-weight: 600;
		margin-bottom:0;
	}

	.staff-card-department {
		font-weight:bold;
		margin-bottom: 0;
	}

	.staff-card-name {
		font-weight: 600;
		
		a {
			color:$orange-a11y;
			text-decoration: none;
			&:hover {
				color:$blue;
				background-color:$grey;
			}
		}
	}
	
	h4 {
		color:  $blue;
		font-size: 20px;
		margin-bottom: 5px;
		font-weight: 600;
	}

	p {
		font-size: 15px;
	}

	a {
        text-decoration: underline;
		font-size: 15px;
    }

	.mail-info {
		font-size: 17px;
		color:  $blue;
		display: block;
	}

	.icon {
		margin-right: 2px;
	}
}

.staff-card-component-div {
	padding: 15px 15px;
}

.staff-card-component-div .white-bg {
	padding: 17px 10px;
}

.staff-card-component-div .row>div {
	padding: 0px 7px;
}

.contact-card .staff-card-content {
	p {
	margin-bottom: 3px;
	font-size: 15px;
	}
}
@include color-mode(dark) {
	.department-information h6, .contact-card .staff-card-content p, .staff-card-content .h4 {
		color: $white;
	}
	.department-information ul li {
		color: $white;
	}
	.staff-card-content .staff-card-name a, .staff-card-content .mail-info a {
		color: $orange;
		&:hover {
			color: $blue;
		}
	}
	.staff-card-content p.mail-info {
		color:$white;
	}
}
/* END contact-callout.scss */
  • URL: /components/raw/contact-callout/contact-callout.scss
  • Filesystem Path: components/02-components/04-profile/02-contact-callout/contact-callout.scss
  • Size: 1.6 KB 
<div class="staff-card-component-div">
    <div class="row mb-5">
        <div class="col-12 col-sm-6 col-xl-4">
            <div class="staff-card-img">
                <img class="clip-mask-top-right" src="{{path image}}" alt="Card Image" />
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-8">
            <div class="staff-card-content">
                <h2 class="h4">Contact</h2>
                <p class="staff-card-name">{{ name }}</p>
                <p class="profile-card-title mb-3">{{ title }}</p>
                <p class="staff-card-department">{{ department }}</p>
                <p class="mail-info">
                     <span class="icon"><i class="far fa-envelope fa-sm pr-1" aria-hidden="true"></i></span> <a href="#">{{ email }}</a>
                </p>
            </div>
        </div>
    </div>
</div>