<?php
/**
* Title: Background image cards
* Slug: background-image-cards
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Background image cards","categories":["featured"],"patternName":"wlc/background-image-cards"},"align":"full","className":"background-image-cards","layout":{"type":"default"}} -->
<section class="wp-block-group alignfull background-image-cards"><!-- wp:group {"align":"full","className":"background-image-cards__container","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull background-image-cards__container"><!-- wp:columns {"className":"background-image-cards__grid"} -->
<div class="wp-block-columns background-image-cards__grid"><!-- wp:column {"width":"100%","className":"background-image-cards__column background-image-cards__column\u002d\u002dfull","layout":{"type":"default"}} -->
<div class="wp-block-column background-image-cards__column background-image-cards__column--full" style="flex-basis:100%"><!-- wp:cover {"url":"https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-ix.png","id":368,"dimRatio":50,"customOverlayColor":"#1c1d2a","isUserOverlayColor":true,"align":"full","className":"background-image-cards__item background-image-cards__item\u002d\u002dlarge has-link","layout":{"type":"default"}} -->
<div class="wp-block-cover alignfull background-image-cards__item background-image-cards__item--large has-link"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#1c1d2a"></span><img class="wp-block-cover__image-background wp-image-368" alt="" src="https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-ix.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"left","align":"full","className":"background-image-cards__title background-image-cards__title\u002d\u002dlarge","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading alignfull has-text-align-left background-image-cards__title background-image-cards__title--large has-white-color has-text-color has-link-color">Enjoy nature sustainable travel in the BMW iX</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"background-image-cards__link-wrapper"} -->
<p class="background-image-cards__link-wrapper"><a href="#" class="background-image-cards__card-link">Link do całej karty</a></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"align":"full","className":"background-image-cards__buttons"} -->
<div class="wp-block-buttons alignfull background-image-cards__buttons"><!-- wp:button {"className":"background-image-cards__button"} -->
<div class="wp-block-button background-image-cards__button"><a class="wp-block-button__link wp-element-button" href="#">Show more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"className":"background-image-cards__grid"} -->
<div class="wp-block-columns background-image-cards__grid"><!-- wp:column {"width":"50%","className":"background-image-cards__column background-image-cards__column\u002d\u002dhalf"} -->
<div class="wp-block-column background-image-cards__column background-image-cards__column--half" style="flex-basis:50%"><!-- wp:cover {"url":"https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-m4.png","id":369,"dimRatio":50,"customOverlayColor":"#1c1d2a","isUserOverlayColor":true,"className":"background-image-cards__item background-image-cards__item\u002d\u002dmedium has-link","layout":{"type":"constrained"}} -->
<div class="wp-block-cover background-image-cards__item background-image-cards__item--medium has-link"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#1c1d2a"></span><img class="wp-block-cover__image-background wp-image-369" alt="" src="https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-m4.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"className":"background-image-cards__title","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading background-image-cards__title has-white-color has-text-color has-link-color">Enjoy nature sustainable travel in the BMW iX</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"background-image-cards__link-wrapper"} -->
<p class="background-image-cards__link-wrapper"><a href="#" class="background-image-cards__card-link">Link do całej karty</a></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"background-image-cards__buttons"} -->
<div class="wp-block-buttons background-image-cards__buttons"><!-- wp:button {"className":"background-image-cards__button"} -->
<div class="wp-block-button background-image-cards__button"><a class="wp-block-button__link wp-element-button" href="#">Show more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%","className":"background-image-cards__column background-image-cards__column\u002d\u002dhalf"} -->
<div class="wp-block-column background-image-cards__column background-image-cards__column--half" style="flex-basis:50%"><!-- wp:cover {"url":"https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-m6.png","id":370,"dimRatio":50,"customOverlayColor":"#1c1d2a","isUserOverlayColor":true,"className":"background-image-cards__item background-image-cards__item\u002d\u002dmedium has-link","layout":{"type":"constrained"}} -->
<div class="wp-block-cover background-image-cards__item background-image-cards__item--medium has-link"><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#1c1d2a"></span><img class="wp-block-cover__image-background wp-image-370" alt="" src="https://blocks-library.devel8.wlc.team/app/uploads/2025/04/bmw-m6.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"className":"background-image-cards__title","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading background-image-cards__title has-white-color has-text-color has-link-color">Enjoy nature sustainable travel in the BMW iX</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"background-image-cards__link-wrapper"} -->
<p class="background-image-cards__link-wrapper"><a href="#" class="background-image-cards__card-link">Link do całej karty</a></p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"background-image-cards__buttons"} -->
<div class="wp-block-buttons background-image-cards__buttons"><!-- wp:button {"className":"background-image-cards__button"} -->
<div class="wp-block-button background-image-cards__button"><a class="wp-block-button__link wp-element-button" href="#">Show more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->
.background-image-cards {
@apply bg-white dark:bg-gray-900;
.background-image-cards__container {
@apply py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12;
.wp-block-columns {
@apply grid;
}
& > .background-image-cards__grid {
@apply mb-2;
}
& > .wp-block-columns:last-child {
@apply grid-cols-2 gap-2;
}
.background-image-cards__column {
&.background-image-cards__column--full {
@apply col-span-2;
}
&.background-image-cards__column--half {
@apply col-span-2 md:col-span-1;
}
.background-image-cards__item {
@apply p-8 text-left h-96 bg-no-repeat bg-cover bg-center bg-gray-500 bg-blend-multiply transition-all duration-300;
&.wp-block-cover {
@apply transition-all duration-300 items-start;
.wp-block-cover__background {
@apply transition-opacity duration-300;
}
}
&.has-link:hover {
@apply bg-blend-normal;
.wp-block-cover__background {
@apply opacity-20;
}
}
.background-image-cards__title {
@apply mb-5 ml-0 max-w-xl font-extrabold tracking-tight leading-tight text-white;
&.background-image-cards__title--large {
@apply text-5xl;
}
&:not(.background-image-cards__title--large) {
@apply text-4xl;
}
}
.background-image-cards__link-wrapper {
@apply h-0 overflow-hidden m-0 p-0;
.background-image-cards__card-link {
@apply absolute inset-0 z-10 opacity-0;
}
}
.background-image-cards__buttons {
@apply relative z-20;
.background-image-cards__button {
.wp-element-button {
@apply inline-flex items-center px-4 py-2.5 font-medium text-center text-white border border-white rounded-lg hover:bg-white hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-gray-700 bg-transparent;
}
}
}
}
}
}
}
