Feature cards
Default
View code
<div class="card feature-card card-left">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image">
<img src="https://picsum.photos/600?1" />
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-pink{fill:#ff51a9;}</style></defs><path class="fill-pink" d="M0,0,320.273,241.14l83.2-14.381,94.9,52.787,59.388-41.929,55.448-16.594,94.072-41.637,132.563,26.535,80.262-2.038,41.835,38.176-6.719-43.751,2.2-15.5,2.125-52.115ZM573.582,250.667l-64.309,49.065L398.054,265.324,349.211,287.2l-3.542,24.966,56.271-17.555,115.726,31.749L602.839,294.1,706.47,234.021l140.041,8.89,87.248,39.531,67.493,39.838,12.033-38.039L937.568,255.6l-53.183-29.377L718.512,195.951Zm143.008-5.223L530.155,338.1l-99.2,6.958-56.088-7.883-2.731,19.246,60.744,13.652,94.367-11.482,177.764-76.542,93.049-.1L1030.7,397.855l16.285-51.482v0L813.71,256.428Z" transform="matrix(-0.921, 0.391, -0.391, -0.921, 1119.207, 366.227)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="card feature-card card-right">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6 order-last">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image">
<img src="https://picsum.photos/600?2" />
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-primary{fill:#00fce8;}</style></defs><path class="fill-primary" d="M0,397.855l320.273-241.14,83.2,14.381,94.9-52.787,59.388,41.929,55.448,16.594,94.072,41.637,132.563-26.535,80.262,2.038L961.941,155.8l-6.719,43.751,2.2,15.5,2.125,52.115ZM573.582,147.188,509.273,98.123,398.054,132.531l-48.844-21.878-3.542-24.966,56.271,17.555L517.665,71.494l85.174,32.256L706.47,163.834l140.041-8.89,87.248-39.531,67.493-39.838,12.033,38.039-75.717,28.64-53.183,29.377L718.512,201.9Zm143.008,5.223L530.155,59.759l-99.2-6.958-56.088,7.883-2.731-19.246,60.744-13.652,94.367,11.482L705.011,115.81l93.049.1L1030.7,0l16.285,51.482v0L813.71,141.427Z" transform="matrix(0.921, 0.391, -0.391, 0.921, 155.454, 0)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>
Image mask on hover
View code
<div class="card feature-card card-left">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image card-hover-mask">
<img src="https://picsum.photos/600?1" />
<div class="image-mask"></div>
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-pink{fill:#ff51a9;}</style></defs><path class="fill-pink" d="M0,0,320.273,241.14l83.2-14.381,94.9,52.787,59.388-41.929,55.448-16.594,94.072-41.637,132.563,26.535,80.262-2.038,41.835,38.176-6.719-43.751,2.2-15.5,2.125-52.115ZM573.582,250.667l-64.309,49.065L398.054,265.324,349.211,287.2l-3.542,24.966,56.271-17.555,115.726,31.749L602.839,294.1,706.47,234.021l140.041,8.89,87.248,39.531,67.493,39.838,12.033-38.039L937.568,255.6l-53.183-29.377L718.512,195.951Zm143.008-5.223L530.155,338.1l-99.2,6.958-56.088-7.883-2.731,19.246,60.744,13.652,94.367-11.482,177.764-76.542,93.049-.1L1030.7,397.855l16.285-51.482v0L813.71,256.428Z" transform="matrix(-0.921, 0.391, -0.391, -0.921, 1119.207, 366.227)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="card feature-card card-right">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6 order-last">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image card-hover-mask">
<img src="https://picsum.photos/600?2" />
<div class="image-mask"></div>
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-primary{fill:#00fce8;}</style></defs><path class="fill-primary" d="M0,397.855l320.273-241.14,83.2,14.381,94.9-52.787,59.388,41.929,55.448,16.594,94.072,41.637,132.563-26.535,80.262,2.038L961.941,155.8l-6.719,43.751,2.2,15.5,2.125,52.115ZM573.582,147.188,509.273,98.123,398.054,132.531l-48.844-21.878-3.542-24.966,56.271,17.555L517.665,71.494l85.174,32.256L706.47,163.834l140.041-8.89,87.248-39.531,67.493-39.838,12.033,38.039-75.717,28.64-53.183,29.377L718.512,201.9Zm143.008,5.223L530.155,59.759l-99.2-6.958-56.088,7.883-2.731-19.246,60.744-13.652,94.367,11.482L705.011,115.81l93.049.1L1030.7,0l16.285,51.482v0L813.71,141.427Z" transform="matrix(0.921, 0.391, -0.391, 0.921, 155.454, 0)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>
Colour image on hover
View code
<div class="card feature-card card-left">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image card-hover-colour">
<img src="https://picsum.photos/600?1" />
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-pink{fill:#ff51a9;}</style></defs><path class="fill-pink" d="M0,0,320.273,241.14l83.2-14.381,94.9,52.787,59.388-41.929,55.448-16.594,94.072-41.637,132.563,26.535,80.262-2.038,41.835,38.176-6.719-43.751,2.2-15.5,2.125-52.115ZM573.582,250.667l-64.309,49.065L398.054,265.324,349.211,287.2l-3.542,24.966,56.271-17.555,115.726,31.749L602.839,294.1,706.47,234.021l140.041,8.89,87.248,39.531,67.493,39.838,12.033-38.039L937.568,255.6l-53.183-29.377L718.512,195.951Zm143.008-5.223L530.155,338.1l-99.2,6.958-56.088-7.883-2.731,19.246,60.744,13.652,94.367-11.482,177.764-76.542,93.049-.1L1030.7,397.855l16.285-51.482v0L813.71,256.428Z" transform="matrix(-0.921, 0.391, -0.391, -0.921, 1119.207, 366.227)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="card feature-card card-right">
<a class="card-link" href="#">
<div class="row no-gutters">
<div class="card-body col-lg-6 order-last">
<div class="card-text">
<h3 class="h2">
Lorem ipsum dolor sit amet
</h3>
<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>
<p>
<span class="btn btn-brand-neutral-black">Read more…</span>
</p>
</div>
</div>
<div class="d-none d-lg-block col-lg-6">
<div class="card-image card-hover-colour">
<img src="https://picsum.photos/600?2" />
<div class="card-image-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="1119.207" height="775.316" viewBox="0 0 1119.207 775.316"><defs><style>.fill-primary{fill:#00fce8;}</style></defs><path class="fill-primary" d="M0,397.855l320.273-241.14,83.2,14.381,94.9-52.787,59.388,41.929,55.448,16.594,94.072,41.637,132.563-26.535,80.262,2.038L961.941,155.8l-6.719,43.751,2.2,15.5,2.125,52.115ZM573.582,147.188,509.273,98.123,398.054,132.531l-48.844-21.878-3.542-24.966,56.271,17.555L517.665,71.494l85.174,32.256L706.47,163.834l140.041-8.89,87.248-39.531,67.493-39.838,12.033,38.039-75.717,28.64-53.183,29.377L718.512,201.9Zm143.008,5.223L530.155,59.759l-99.2-6.958-56.088,7.883-2.731-19.246,60.744-13.652,94.367,11.482L705.011,115.81l93.049.1L1030.7,0l16.285,51.482v0L813.71,141.427Z" transform="matrix(0.921, 0.391, -0.391, 0.921, 155.454, 0)"/></svg>
</div>
</div>
</div>
</div>
</a>
</div>