Cards Type 6

Talha Aziz

The above block is copied from the site: https://clgwmdev.wpenginepowered.com/

Pattern HTML

<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"25px"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%","style":{"typography":{"lineHeight":"1.7"}}} -->
<div class="wp-block-column" style="line-height:1.7;flex-basis:50%"><!-- wp:image {"id":343,"sizeSlug":"full","linkDestination":"none","className":"is-style-static-card","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border is-style-static-card"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/Starting-a-Family.jpg" alt="" class="wp-image-343" style="border-radius:8px"/><figcaption class="wp-element-caption">Starting a Family</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"50%","className":"static-grid-cards","style":{"spacing":{"blockGap":"24px"}}} -->
<div class="wp-block-column is-vertically-aligned-top static-grid-cards" style="flex-basis:50%"><!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"25px"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"style":{"border":{"radius":"8px"}},"backgroundColor":"two"} -->
<div class="wp-block-column has-two-background-color has-background" style="border-radius:8px"><!-- wp:image {"id":344,"sizeSlug":"full","linkDestination":"none","className":"is-style-static-card","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border is-style-static-card"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/Buying-a-House.jpg" alt="" class="wp-image-344" style="border-radius:8px"/><figcaption class="wp-element-caption">Buying a House</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"border":{"radius":"8px"}},"backgroundColor":"two"} -->
<div class="wp-block-column has-two-background-color has-background" style="border-radius:8px"><!-- wp:image {"id":345,"sizeSlug":"full","linkDestination":"none","className":"is-style-static-card","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border is-style-static-card"><img src="https://patterndev.upthinksolutions.com/wp-content/uploads/2025/06/Saving-for-College.jpg" alt="" class="wp-image-345" style="border-radius:8px"/><figcaption class="wp-element-caption">Saving for College</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Pattern CSS

.is-style-static-card {
    position: relative;
	border-radius: 10px;
    background-color: var(--wp--preset--color--two);
}

.is-style-static-card::before {
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(188deg, rgba(0, 0, 0, 0.00) 34.8%, rgba(0, 0, 0, 0.80) 81.92%);
    border-radius: 8px;
}

.is-style-static-card .wp-element-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-weight: 500;
    line-height: 32px;
    font-size: var(--wp--preset--font-size--heading-4);
    color: #ffffff;
    z-index: 999;
}