5.8.3 Cards/Tiles
Content Card Component
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Content Card Example:
<div class="content-card-list">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="content-card-component-div">
<div class="content-card-component-img">
<img src="../college/images/card-image.png" alt="Content Card Image">
</div>
<div class="content-card-component-content">
<a href="#" class="content-card-link">Lorem ipsum dolor sit amet, consectetur </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></a>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="content-card-component-div">
<div class="content-card-component-img">
<img src="../college/images/content-card-2.png" alt="Content Card Image">
</div>
<div class="content-card-component-content">
<a href="#" class="content-card-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</a>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
Deadline Card Component
Apr - May
29-3
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
29-3
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Deadline Card Example:
<div class="deadline-card-list">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div blue">
<p class="card-month">Apr - May</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div silver">
<p class="card-month">Apr - May</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
</div>
Content Highlight Card Component
Content Highlight Card Component Example:
<div class="highlight-card-list">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="highlight-card-component-div blue">
<div class="highlight-card-img">
<img src="../college/images/content-highland-card.png" alt="Card Image">
</div>
<div class="highlight-card-content">
<a href="#">Lorem ipsum dolor sit </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-component-div white">
<div class="highlight-card-img">
<img src="../college/images/content-highland-card.png" alt="Card Image">
</div>
<div class="highlight-card-content">
<a href="#">Lorem ipsum dolor sit </a>
</div>
</div>
</div>
</div>
</div>
News Card Component
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Dorem ipsum dolor sit amet, consectetur adipiscing elit.
News Card Component Example:
<div class="news-card-list">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div blue">
<div class="news-card-img">
<img src="../college/images/news-card.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div silver">
<div class="news-card-img">
<img src="../college/images/news-card.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
Profile Card Component
Profile Card Component Example:
<div class="profile-card-list">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="profile-card-component-div blue">
<div class="profile-card-img">
<img src="../college/images/Profile.png" alt="Card Image">
</div>
<div class="profile-card-content">
<a href="#" class="card-link">Dr. John Doe</a>
<p class="profile-card-title">Title at UTSA</p>
<a class="phone-no" href="tel:210-458-4011">210-458-4011</a>
<a class="mail-info" href="mailto:drjohndoe@utsa.edu">drjohndoe@utsa.edu</a>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="profile-card-component-div white">
<div class="profile-card-img">
<img src="../college/images/Profile.png" alt="Card Image">
</div>
<div class="profile-card-content">
<a href="#" class="card-link">Dr. John Doe</a>
<p class="profile-card-title">Title at UTSA</p>
<a class="phone-no" href="tel:210-458-4011">210-458-4011</a>
<a class="mail-info" href="mailto:drjohndoe@utsa.edu">drjohndoe@utsa.edu</a>
</div>
</div>
</div>
</div>
</div>
Sidebar Faculty & Staff Callout Component
Sidebar Faculty & Staff Callout Component Example:
<div class="staff-card-list">
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="staff-card-component-div white">
<div class="row no-mrg">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div class="staff-card-img">
<img class="clip-top-img" src="../college/images/account-user.png" alt="Card Image">
</div>
</div>
<div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-12">
<div class="staff-card-content">
<h5>Contact</h5>
<p class="staff-card-name"><span class="first-name">Name</span> <span class="last-name">LastName</span></p>
<p class="staff-card-department">Department</p>
<a class="mail-info" href="mailto:first.last@utsa.edu">first.last@utsa.edu</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Profile Detail Component
Profile Detail Component Example:
<div class="profile-details-list">
<div class="profile-details-component-div white">
<div class="row no-mrg">
<div class="col-xxl-5 col-xl-5 col-lg-5 col-md-5 col-sm-12">
<div class="profile-details-img">
<img class="clip-top-img" src="../college/images/profile-details.png" alt="Card Image">
</div>
</div>
<div class="col-xxl-7 col-xl-7 col-lg-7 col-md-7 col-sm-12">
<div class="profile-details-content">
<h5>Jane Doe, Ph.D</h5>
<p>Department</p>
<p>Title at UTSA</p>
<a class="phone-no" href="tel:210-458-4011">210-458-4011</a>
<a class="mail-info" href="mailto:janedoe@utsa.edu">janedoe@utsa.edu</a>
</div>
<div class="profile-details-ul">
<ul class="list-unstyled">
<li><a href="#">Degree from The University of </a></li>
<li><a href="#">Office Hours</a></li>
<li><a href="#">Texas at San Antonio</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Research Areas of Interest</a></li>
<li><a href="#">Courses Taught</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Download CV (PDF)</a></li>
</ul>
</div>
</div>
</div>
<div class="right-arrow-link">
<a href="#"><img src="../utsa/images/right-arrow-orange.png" alt="Arrow Image"></a>
</div>
</div>
Faculty Full Bio Component
Dr. Vangie Aguilera
Dr. Vangie Aguilera began her teaching career in the San Antonio Independent School District. During her tenure at SAISD, she served as bilingual education teacher, special education program supervisor, secondary school principal and Senior Executive Director for the Department of Special Education. Most recently, she joined the faculty of the Department of Educational Leadership and Policy Studies as the Assistant Professor of Practice at UTSA. Her focus is to help prepare school leaders to transform education.
Dr. Aguilera is a frequent presenter at has at state, national and international conferences. She has made extensive contributions to the work of several community boards and professional organizations including the Mayor’s Commission on the Status of Women, the KLRN Community Advisory Board and the Board of San Antonio 100. She currently serves on the Board of Urban Collaborative for Special Education Leadership and on the Board of the San Antonio Women’s Hall of Fame where she was a 2012 inductee. Dr. Aguilera is the recipient of several awards including the Community Champion Award -Bexar County Consumer and Family Support and Key Woman Educator-Delta Kappa Gamma-Theta Beta Chapter.
Faculty Full Bio Component Example:
<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 src="../college/images/dr-vangie.png" 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>Dr. Vangie Aguilera</h5>
<p>Dr. Vangie Aguilera began her teaching career in the San Antonio Independent School District. During her tenure at SAISD, she served as bilingual education teacher, special education program supervisor, secondary school principal and Senior Executive Director for the Department of Special Education. Most recently, she joined the faculty of the Department of Educational Leadership and Policy Studies as the Assistant Professor of Practice at UTSA. Her focus is to help prepare school leaders to transform education.</p>
<p>Dr. Aguilera is a frequent presenter at has at state, national and international conferences. She has made extensive contributions to the work of several community boards and professional organizations including the Mayor’s Commission on the Status of Women, the KLRN Community Advisory Board and the Board of San Antonio 100. She currently serves on the Board of Urban Collaborative for Special Education Leadership and on the Board of the San Antonio Women’s Hall of Fame where she was a 2012 inductee. Dr. Aguilera is the recipient of several awards including the Community Champion Award -Bexar County Consumer and Family Support and Key Woman Educator-Delta Kappa Gamma-Theta Beta Chapter.</p>
</div>
</div>
</div>
</div>
4-Column Deadline Card Component
Important Deadlines
View All Important DeadlinesApr - May
29-3
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
23
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
27
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
31
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
4-Column Deadline Blue Card Component Example:
<div class="inner-sec-headings">
<h4>Important Deadlines</h4>
<a class="view-all-link" href="#">View All Important Deadlines <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="deadline4-cards-blue">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div blue">
<p class="card-month">Apr - May</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div blue">
<p class="card-month">Apr - May</p>
<h2 class="card-date">23</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div> </div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div blue">
<p class="card-month">Apr - May</p>
<h2 class="card-date">27</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div blue">
<p class="card-month">Apr - May</p>
<h2 class="card-date">31</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
</div>
</div>
Apr - May
29-3
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
23
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
Apr - May
27
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
June
31
2021
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
4-Column Deadline Grey Card Component Example:
<div class="deadline4-cards-grey">
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div silver">
<p class="card-month">Apr - May</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div silver">
<p class="card-month">Apr - May</p>
<h2 class="card-date">23</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div silver">
<p class="card-month">Apr - May</p>
<h2 class="card-date">27</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card-component-div silver">
<p class="card-month">June</p>
<h2 class="card-date">31</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.</p>
</div>
</div>
</div>
</div>
</div>
3-Column News Card Component
UTSA News
Read All News Stories
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel.
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
UTSA News
Read All News Stories
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
June 1, 2021
Lorem ipsum dolor sit amet, conse ctetur adip elit.Published By Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Utsa News Blue Component Example:
<div class="news-card">
<div class="inner-sec-headings">
<h4>UTSA News</h4>
<a class="view-all-link" href="#">Read All News Stories <i class="fas fa-arrow-right"></i></a>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div blue">
<div class="news-card-img">
<img src="../college/images/News_Blog.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div blue">
<div class="news-card-img">
<img src="../college/images/News_Blog-1.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div blue">
<div class="news-card-img">
<img src="../college/images/News_Blog-2.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
Utsa News Grey Component Example:
<div class="news-card">
<div class="inner-sec-headings">
<h4>UTSA News</h4>
<a class="view-all-link" href="#">Read All News Stories <i class="fas fa-arrow-right"></i></a>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div white">
<div class="news-card-img">
<img src="../college/images/News_Blog.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div white">
<div class="news-card-img">
<img src="../college/images/News_Blog-1.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card-component-div white">
<div class="news-card-img">
<img src="../college/images/News_Blog-2.png" alt="Card Image">
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit.</a>
<p class="published-status">Published By Lorem Ipsum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
2-Column Content Card Component
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit
Action2-Column content Card Component Example:
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 ol-sm-12">
<div class="content-card-component-div">
<div class="content-card-component-img">
<img src="../college/images/two-column-billboard.png" alt="Content Card Image">
</div>
<div class="content-card-component-content">
<a href="#" class="content-card-link">Lorem ipsum dolor sit amet, consectetur </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 ol-sm-12">
<div class="content-card-component-div">
<div class="content-card-component-img">
<img src="../college/images/two-column-billboard-1.png" alt="Content Card Image">
</div>
<div class="content-card-component-content">
<a href="#" class="content-card-link">Lorem ipsum dolor sit amet, consectetur </a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<a href="#" class="action-btn">Action <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>