Category cards
Default
View code
<div class="row">
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image">
<img src="https://picsum.photos/600?1" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image">
<img src="https://picsum.photos/600?2" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
</div>
Image mask on hover
View code
<div class="row">
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-hover-mask">
<img src="https://picsum.photos/600?1" />
<div class="image-mask"></div>
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-hover-mask">
<img src="https://picsum.photos/600?2" />
<div class="image-mask"></div>
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
</div>
Colour image on hover
View code
<div class="row">
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-hover-colour">
<img src="https://picsum.photos/600?1" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-hover-colour">
<img src="https://picsum.photos/600?2" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
</div>
Large image
View code
<div class="row">
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-image-large">
<img src="https://picsum.photos/600?1" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
<div class="col-md-6 category-card-wrapper">
<div class="card category-card">
<a class="card-link" href="#">
<div class="card-image card-image-large">
<img src="https://picsum.photos/600?2" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
</div>
Specified highlight colour for screen width
View code
<div class="row">
<div class="col-md-6 category-card-wrapper">
<div class="card category-card card-highlight-md-pink">
<a class="card-link" href="#">
<div class="card-image">
<img src="https://picsum.photos/600?1" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
<div class="col-md-6 category-card-wrapper">
<div class="card category-card card-highlight-md-pink">
<a class="card-link" href="#">
<div class="card-image">
<img src="https://picsum.photos/600?2" />
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="card-body">
<p>
Ipsum dolor sit amet consectetur adipiscing elit ut
aliquam purus. Mauris cursus mattis molestie a
iaculis. Cras tincidunt lobortis feugiat vivamus.
Sit amet mauris commodo quis imperdiet massa
tincidunt nunc.
</p>
</div>
</a>
</div>
</div>
</div>