The Action Card is a smaller level component and is not designed to be used stand-alone.
Please see the corresponding Content Group components to use a component of this type.
You should use an action card component when you are looking to add a three-column layout with an image, headline, description, and link.
If one of the requirements above isn’t met, it’s suggested that you use another layout/component.
Please ensure the image has appropriate alt text, and the link is descriptive. Please refrain from using “Click here” or “Learn more” for the link text.
This component is supported in our Cascade templates via the Asset Factory: Blocks > Action Card Group and can be assigned in a page template at the row level.
There is a variant for Headings Only where the description is not included. Only use this if the other action cards in the group do not use a description, so they are all consistent.
Each action card is composed of the following elements:
Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#content-card
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg h-100">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative grey-bg px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">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>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
<!-- End card Component -->
/* components/02-components/01-card/01-action-card/action-card.scss */
/* BEGIN action-card.scss */
.content-card-wrapper {
height: 100%;
background-color: $white;
position: relative;
.content-card-content .h5 {
font-size:28px;
}
.content-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
.content-card-img {
img {
width: 100%;
height: 210px;
-o-object-fit: cover;
object-fit: cover;
}
}
.content-card-content {
flex: 1 1 auto;
padding: 26px 33px;
position: relative;
border-top: 6px solid $orange;
p, ul li {
font-size: 14px;
color: $blue;
}
.content-card-link {
line-height: 1.1;
font-size: 25px;
margin-bottom: 24px;
color: $orange-a11y;
font-weight: 700;
display: block;
text-decoration: none;
}
.content-card-link:hover {
color: $blue;
text-decoration: underline;
}
&.grey-bg {
.content-card-link:hover {
color: $white;
}
}
}
.action-btn {
//position: absolute;
//bottom: 25px;
//width: calc(100% - 66px);
// left: 0;
// right: 0;
// margin: 0px;
margin-top: 3.0rem;
background-color: $blue;
color: $white;
}
.action-btn:hover {
background-color: $orange-b;
color: $white;
}
}
}
/* Dark Mode - Component Styles - Action Card */
@include color-mode(dark) {
.content-card-wrapper .content-card.white-bg .content-card-content {
ul li {
color:$blue;
}
}
}
/* Component Styles - Action Card END */
@media (min-width: 1200px) {
.content-card-wrapper {
width: 100%;
max-width: 1038px;
margin: 0 auto;
}
}
@media (max-width: 991px) {
.content-card-wrapper {
.content-card-content {
padding: 15px;
}
.content-card-content .h5 {
font-size: 18px;
margin-bottom: 10px;
}
.content-card-list .row>div {
margin-bottom: 20px;
}
}
}
@media (max-width: 767px) {
.contact-card-wrapper {
.content-card-img>img {
height: auto;
}
.content-card-content {
padding-bottom: 15px !important;
}
.action-btn {
position: relative;
margin-top: 40px;
}
}
}
/* END action-card.scss */
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg h-100">
<div class="content-card-img">
<img src="{{ path image }}" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative grey-bg px-lg-2">
<a href="#" class="content-card-link px-lg-2">{{heading}} </a>
<p class="font-14 blue regular px-lg-2">{{text}}</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
<!-- End card Component -->