College Design Language System

Content List: Default

Content List Documentation

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

Implementation Notes

All Content Group level components are designed to be full width. Depending on the size of the content and iamges, you may utilized 3 or 4 internal card components within a row.

Media Requirements

  • Action Card Image: Our standard image size is 460px (width) by 210px (height), 72 ppi (pixels per inch) jpeg or png.

    • Image should be no larger and 300kb (kilobytes)
<div class="py-5 content-listing">
     <div class="container">
         <div class="row">
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 <div class="highlight-card white-bg">
                     <div class="highlight-card-img">
                         <img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
                     </div>
                     <div class="highlight-card-content"><a class="highlight-card-link" href="#">Lorem ipsum dolor sit amet, consectetur</a></div>
                 </div>
             </div>
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 <div class="highlight-card white-bg">
                     <div class="highlight-card-img">
                         <img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
                     </div>
                     <div class="highlight-card-content"><a class="highlight-card-link" href="#">Lorem ipsum dolor sit amet, consectetur</a></div>
                 </div>
             </div>
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 <div class="highlight-card white-bg">
                     <div class="highlight-card-img">
                         <img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
                     </div>
                     <div class="highlight-card-content"><a class="highlight-card-link" href="#">Lorem ipsum dolor sit amet, consectetur</a></div>
                 </div>
             </div>
         </div>
     </div>
 </div>
  • Content: 
    /* components/03-sections/05-content-group/01-content-list/content-list.scss */
/* BEGIN content-list.scss */


/* Dark Mode - Component Styles - Content List */
@include color-mode(dark) {
	.highlight-card .highlight-card-content p {
		color: $blue;
	}
}
/* Component Styles - Content List END */
/* Dark Mode - Component Styles - Programs */
@include color-mode(dark) {
	.program-listing {
		h2, h3, h4, h5, h6 {
			color:$blue;
		}
	}
	.highlight-card .highlight-card-content>.blue-btn {
		color:$white;
		&:hover {
			background-color: $grey-b;
		}
	}
}
/* Component Styles - Programs END */


/* END content-list.scss */
  • URL: /components/raw/content-list/content-list.scss
  • Filesystem Path: components/03-sections/05-content-group/01-content-list/content-list.scss
  • Size: 625 Bytes 
<div class="py-5 content-listing">
     <div class="container">
         <div class="row">
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 {{ render '@content-card'}}
             </div>
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 {{ render '@content-card'}}
             </div>
             <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
                 {{ render '@content-card'}}
             </div>
         </div>
     </div>
 </div>