Cards Type 2

Talha Aziz

These cards are created through “Media & Text” block

I’m growing in my career, but don’t have time to manage my finances

You’re accumulating wealth, but don’t want to make any financial mistakes that will affect your future.

You need guidance on how to manage, invest, and secure it for the future.

See How We Help

I’m a busy professional and don’t know how to balance it all

You’re extremely busy and don’t have time to manage your money or address your complex finances.

You need expert support to help grow, organize, and oversee your wealth effectively.

See How We Help

I’m close to retirement and want to make sure I’m on the right track

You’ve worked hard throughout your entire career, but you have new choices to navigate before retiring.

You’re looking to maximize your investments for a secure and comfortable future.

See How We Help

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

Pattern HTML

<!-- wp:columns {"className":"cards-boxes-section"} -->
<div class="wp-block-columns cards-boxes-section"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:media-text {"mediaId":71,"mediaLink":"https://haydenwealthplanning.com/home/group-243/","mediaType":"image","mediaWidth":45,"isStackedOnMobile":false,"verticalAlignment":"center"} -->
<div class="wp-block-media-text is-vertically-aligned-center" style="grid-template-columns:45% auto"><figure class="wp-block-media-text__media"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/Group-243.svg" alt="" class="wp-image-71 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"metadata":{"name":"Non Hover"},"className":"non-hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group non-hover-container"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p>I’m growing in my career, but don’t have time to manage my finances</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":83,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/right-arrow.svg" alt="" class="wp-image-83"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Hover"},"className":"hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-container"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>You're accumulating wealth, but don’t want to make any financial mistakes that will affect your future.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>You need guidance on how to manage, invest, and secure it for the future.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="font-style:normal;font-weight:500"><!-- wp:button {"className":"is-style-text-link","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
<div class="wp-block-button is-style-text-link"><a class="wp-block-button__link wp-element-button" href="https://haydenwealthplanning.com/what-we-do/" style="font-style:normal;font-weight:500">See How We Help</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.34%"} -->
<div class="wp-block-column" style="flex-basis:33.34%"><!-- wp:media-text {"mediaId":72,"mediaLink":"https://haydenwealthplanning.com/home/group-243-1/","mediaType":"image","mediaWidth":45,"isStackedOnMobile":false,"verticalAlignment":"center"} -->
<div class="wp-block-media-text is-vertically-aligned-center" style="grid-template-columns:45% auto"><figure class="wp-block-media-text__media"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/Group-243-1.svg" alt="" class="wp-image-72 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"metadata":{"name":"Non Hover"},"className":"non-hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group non-hover-container"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p>I’m a busy professional and don’t know how to balance it all</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":83,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/right-arrow.svg" alt="" class="wp-image-83"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Hover"},"className":"hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-container"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>You're extremely busy and don’t have time to manage your money or address your complex finances.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>You need expert support to help grow, organize, and oversee your wealth effectively.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="font-style:normal;font-weight:500"><!-- wp:button {"className":"is-style-text-link","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
<div class="wp-block-button is-style-text-link"><a class="wp-block-button__link wp-element-button" href="https://haydenwealthplanning.com/what-we-do/" style="font-style:normal;font-weight:500">See How We Help</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:media-text {"mediaId":73,"mediaLink":"https://haydenwealthplanning.com/home/group-243-2/","mediaType":"image","mediaWidth":45,"isStackedOnMobile":false,"verticalAlignment":"center"} -->
<div class="wp-block-media-text is-vertically-aligned-center" style="grid-template-columns:45% auto"><figure class="wp-block-media-text__media"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/Group-243-2.svg" alt="" class="wp-image-73 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:group {"metadata":{"name":"Non Hover"},"className":"non-hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group non-hover-container"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p>I’m close to retirement and want to make sure I’m on the right track</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":83,"sizeSlug":"large","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://haydenwealthplanning.com/wp-content/uploads/2025/01/right-arrow.svg" alt="" class="wp-image-83"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Hover"},"className":"hover-container","style":{"spacing":{"blockGap":"var:preset|spacing|15"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group hover-container"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>You’ve worked hard throughout your entire career, but you have new choices to navigate before retiring.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>You’re looking to maximize your investments for a secure and comfortable future.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-text-link","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
<div class="wp-block-button is-style-text-link"><a class="wp-block-button__link wp-element-button" href="https://haydenwealthplanning.com/what-we-do/" style="font-style:normal;font-weight:500">See How We Help</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Pattern CSS

.cards-boxes-section .wp-block-media-text {
    display: block;
    position: relative;
    padding: 47px 25px;
    background: #fff;
    min-height: 335px;
    border-bottom: 7px solid #43B678;
    border-radius: 5px;
    font-size: var(--wp--preset--font-size--large-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cards-boxes-section .wp-block-media-text__media img{
	width:fit-content;
	margin: 0 auto 20px;
    display: block;
	border-radius: 5px;
}

.cards-boxes-section .wp-block-media-text__content{
	padding:0px;
}

.cards-boxes-section .wp-block-media-text__content .wp-block-group-is-layout-constrained{
	text-align:center;
	padding: 0 20px;
}

.cards-boxes-section .wp-block-media-text:hover > figure,
.cards-boxes-section .wp-block-media-text:focus-within > figure{
	display:none;
}

 .cards-boxes-section .wp-block-media-text__content .wp-block-group-is-layout-constrained:nth-child(2){
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:9;
	opacity:0;
	font-size:var(--wp--preset--font-size--para-text);
	display:flex;
	align-items:center;
}

.cards-boxes-section .wp-block-media-text:has(.hover-container):hover,
.cards-boxes-section .wp-block-media-text:has(.hover-container):focus-within{
	background:#DBE6F1;
}

.cards-boxes-section .wp-block-media-text:has(.hover-container):hover .wp-block-media-text__content .wp-block-group-is-layout-constrained,
.cards-boxes-section .wp-block-media-text:has(.hover-container):focus-within .wp-block-media-text__content .wp-block-group-is-layout-constrained{
	opacity:0;
}

.cards-boxes-section .wp-block-media-text:has(.hover-container):hover .wp-block-media-text__content .wp-block-group-is-layout-constrained:nth-child(2),
.cards-boxes-section .wp-block-media-text:has(.hover-container):focus-within .wp-block-media-text__content .wp-block-group-is-layout-constrained:nth-child(2){
	opacity:1;
	transition: all 0.4s ease-in-out;
}

.cards-boxes-section .wp-block-button a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}