<a class="background-image-content-card" href="">
<picture class="background-image-content-card__image">
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
<h2 class="background-image-content-card__title">Clean cravings</h2>
<p class="background-image-content-card__copy">Maintain your healthy lifestyle</p>
</a>
<a class="background-image-content-card" href="">
{{>picture srcset=image.srcset src=image.src description=image.description className="background-image-content-card__image"}}
<h2 class="background-image-content-card__title">{{title}}</h2>
<p class="background-image-content-card__copy">{{copy}}</p>
</a>
{
"title": "Clean cravings",
"copy": "Maintain your healthy lifestyle",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
}
@import '../../theme', 'variables';
.background-image-content-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: $text-gap;
position: relative;
min-height: $min-height-mobile;
padding: $padding-mobile;
color: $color;
text-decoration: none;
@include mq(tablet) {
min-height: $min-height-desktop;
padding: $padding-desktop;
}
&:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 2;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000);
}
}
.background-image-content-card__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
img {
width: 100%;
height: 100%;
}
}
.background-image-content-card__title {
position: relative;
z-index: 3;
font-size: $title-size;
text-transform: uppercase;
font-weight: 600;
[href]:hover & {
text-decoration: underline;
}
}
.background-image-content-card__copy {
position: relative;
z-index: 3;
font-size: $copy-size;
[href]:hover & {
text-decoration: underline;
}
}
$padding-mobile: 15px;
$padding-desktop: 30px;
$min-height-mobile: 200px;
$min-height-desktop: 350px;
$text-gap: 2px;
$title-size: 18px;
$copy-size: 14px;
$color: #fff;
Card that has a background image and text overlaid
Add the front-end-copmonent library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import '../../node_modules/@verndale/front-end-components/lib/cards/background-image-content-card/styles';Copy and paste to your project any of the markup in the link variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The testimonials cards has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$padding-mobile
$padding-desktop
$min-height-mobile
$min-height-desktop
$text-gap
$title-size
$copy-size
$color;