College Design Language System

Faculty Bio

Faculty Bio Documentation

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

Implementation Notes

This component may be big enough to promote to a section component. More work will be needed. For an example of this component in action see the Reference - Institute Secondary Page

Media Requirements

  • Faculty Bio 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)
<div class="container">
     <div class="row">
         <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
             <div class="bio-component-img"> <img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Tracy-Cowden.jpg" alt="Bio Component"> </div>
         </div>
         <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
             <div class="bio-content-list">
                 <h5>Jane Doe, Ph.D</h5>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fusce id velit ut tortor pretium viverra suspendisse. Dignissim convallis aenean et tortor at risus. At lectus urna duis convallis convallis tellus. Tellus orci ac auctor augue mauris.</p>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fusce id velit ut tortor pretium viverra suspendisse. Dignissim convallis aenean et tortor at risus. At lectus urna duis convallis convallis tellus. Tellus orci ac auctor augue mauris.</p>
             </div>
         </div>
     </div>
 </div>
  • Content: 
    /* components/02-components/01-card/05-profile/04-faculty-bio/faculty-bio.scss */
/* BEGIN faculty-bio.scss */
#bio-component .bio-component {
    padding-top: 81px;
    padding-bottom: 81px;
}
.bio-content-list p {
	line-height: 1.6;
	font-size: 17px;
}
.bio-content-list h5 {
	margin-bottom: 21px;
	font-size: 28px;
	color: $orange-a11y;
	font-weight: 700;
}
.bio-component-img>img {
    width: 100%;
}
.bio-component-img {
    margin-bottom: 20px;
}

@include media-breakpoint-down(lg) {
	#bio-component .bio-component {
		padding-top: 45px;
		padding-bottom: 45px;
	}

	.bio-component p {
		margin-bottom: 0px;
	}
}
/* END faculty-bio.scss */
  • URL: /components/raw/faculty-bio/faculty-bio.scss
  • Filesystem Path: components/02-components/04-profile/04-faculty-bio/faculty-bio.scss
  • Size: 646 Bytes 
<div class="container">
     <div class="row">
         <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
             <div class="bio-component-img"> <img class="clip-mask-top-right" src="{{path image}}" alt="Bio Component"> </div>
         </div>
         <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
             <div class="bio-content-list">
                 <h5>{{ name }}</h5>
                 <p>{{ graph-01 }}</p>
                 <p>{{ graph-02 }}</p>
             </div>
         </div>
     </div>
 </div>