Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/style-component.html
The web vendor that completed this section included several redundant (due to bootstrap) classes and extra class names that may not be consistent with the rest of the project. These utility classes are not necessarily designed to be used in new designs moving forward.
<section class="py-5">
<div class="container">
<div class="row pb-3">
<div class="col">
<h3>Top Left Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-top-left</span>
</p>
<img src="../../college-dls/college/images/content-highland-card.png" class="clip-mask-top-left" alt="Card Image" />
</div>
<div class="col">
<h3>Top Right Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-top-right</span>
</p>
<img src="../../college-dls/college/images/content-highland-card.png" class="clip-mask-top-right" alt="Card Image" />
</div>
</div>
<div class="row pt-3">
<div class="col">
<h3>Bottom Left Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-bottom-left</span>
</p>
<img src="../../college-dls/college/images/content-highland-card.png" class="clip-mask-bottom-left" alt="Card Image" />
</div>
<div class="col">
<h3>Bottom Right Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-bottom-right</span>
</p>
<img src="../../college-dls/college/images/content-highland-card.png" class="clip-mask-bottom-right" alt="Card Image" />
</div>
</div>
</div>
</section>
<div class="py-5 grey-bg d-none">
<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>
<div class="css-box">
<p>Orange Anchor Tag : <span class="css-class">.orange-anchor</span></p>
<p>Grey Anchor Tag : <span class="css-class">.grey-anchor</span></p>
<p>Dark Blue Anchor Tag : <span class="css-class">.blue-anchor</span></p>
</div>
<div class="css-box">
<p>Button Design : <span class="css-class">.action-btn</span></p>
<p>Form Design : <span class="css-class">.form-btn</span></p>
</div>
/* components/01-visual-styling/06-utility/06-misc/misc.scss */
/* BEGIN misc.scss */
/* Image Clip */
[class*="clip"] {
position: relative;
}
.clip-mask-top-left {
--notchSize: 2.0rem;
clip-path: polygon(var(--notchSize) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notchSize));
-webkit-clip-path: polygon(var(--notchSize) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notchSize));
}
.clip-mask-top-right {
--notchSize: 2.0rem;
clip-path: polygon(calc(100% - var(--notchSize)) 0, 100% var(--notchSize), 100% 100%, 0 100%, 0 0);
-webkit-clip-path: polygon(calc(100% - var(--notchSize)) 0, 100% var(--notchSize), 100% 100%, 0 100%, 0 0);
}
.clip-mask-bottom-left {
--notchSize: 2.0rem;
clip-path: polygon( 0 0, 100% 0, 100% 100%, var(--notchSize) 100%, 0 calc(100% - var(--notchSize)));
-webkit-clip-path: polygon( 0 0, 100% 0, 100% 100%, var(--notchSize) 100%, 0 calc(100% - var(--notchSize)));
}
.clip-mask-bottom-right {
--notchSize: 2.0rem;
clip-path: polygon(100% 0, 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, 0 100%, 0 0);
-webkit-clip-path: polygon(100% 0, 100% calc(100% - var(--notchSize)), calc(100% - var(--notchSize)) 100%, 0 100%, 0 0);
}
/* Dark Mode */
@include color-mode(dark) {
p span.css-class {
color: #8d1c00;
}
.white-bg .content-card-img {
background-color: $gray-900;
}
}
/* Dark Mode END */
/*End Image Clip */
/* END misc.scss */
<section class="py-5">
<div class="container">
<div class="row pb-3">
<div class="col">
<h3>Top Left Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-top-left</span>
</p>
<img src="{{ path mask.image }}" class="clip-mask-top-left" alt="Card Image" />
</div>
<div class="col">
<h3>Top Right Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-top-right</span>
</p>
<img src="{{ path mask.image }}" class="clip-mask-top-right" alt="Card Image" />
</div>
</div>
<div class="row pt-3">
<div class="col">
<h3>Bottom Left Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-bottom-left</span>
</p>
<img src="{{ path mask.image }}" class="clip-mask-bottom-left" alt="Card Image" />
</div>
<div class="col">
<h3>Bottom Right Mask Clip</h3>
<p>
<span class="css-class">.clip-mask-bottom-right</span>
</p>
<img src="{{ path mask.image }}" class="clip-mask-bottom-right" alt="Card Image" />
</div>
</div>
</div>
</section>
<div class="py-5 grey-bg d-none">
<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>
<div class="css-box">
<p>Orange Anchor Tag : <span class="css-class">.orange-anchor</span></p>
<p>Grey Anchor Tag : <span class="css-class">.grey-anchor</span></p>
<p>Dark Blue Anchor Tag : <span class="css-class">.blue-anchor</span></p>
</div>
<div class="css-box">
<p>Button Design : <span class="css-class">.action-btn</span></p>
<p>Form Design : <span class="css-class">.form-btn</span></p>
</div>