Image Text Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1rem; /* Optional: provides spacing from the viewport edges */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === General Card Styles === */
.it-card-container {
    --it-card-padding: 1.5rem;
    --it-card-border-radius: 12px;
    --it-card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

background: #ffffff;
    border-radius: var(--it-card-border-radius);
    overflow: hidden;
    box-shadow: var(--it-card-shadow);
    transition: transform 0.2s ease-in-out;
}

.it-card-container:hover {
    transform: translateY(-5px);
}

.it-card-container a.it-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* === Card Image === */
.it-card-container .it-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* === Card Content === */
.it-card-container .it-card-content {
    padding: var(--it-card-padding);
}

.it-card-container .it-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.it-card-container .it-card-description {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    color: #4b5563; /* A muted gray */
}

/* === Optional "Read More" Button === */
.it-card-container .it-card-action {
    display: inline-block;
    background-color: #f3f4f6;
    color: #111827;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.it-card-container .it-card-action:hover {
    background-color: #e5e7eb;
}

</style>

<div class="cards-grid-container">
    
    
    <article class="it-card-container">
        <a href="#" class="it-card-link" aria-label="Read more about Majestic Morning Vista">
            
            
            <img 
                class="it-card-image" 
                src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" 
                alt="Misty morning over a mountain lake surrounded by a forest.">
            <div class="it-card-content">
                <h3 class="it-card-title">Majestic Morning Vista</h3>
                <p class="it-card-description">Discover breathtaking landscapes where tranquil waters meet towering peaks. This card showcases content with a supporting visual.</p>
                <div role="button" class="it-card-action">Read More</div>
            </div>
        </a>
    </article>
    
    
    <article class="it-card-container">
        <a href="#" class="it-card-link" aria-label="Read more about Serene Coastal Getaway">
            
            
            <img 
                class="it-card-image" 
                src="https://images.unsplash.com/photo-1733333521007-1e1d0e281465?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
                alt="View from a stunning white sand tropical beach.">
            <div class="it-card-content">
                <h3 class="it-card-title">Tropical Beach Getaway</h3>
                <p class="it-card-description">Find your inner peace with calming ocean breezes and stunning sunset views. An ideal escape from the hustle and bustle.</p>
                <div role="button" class="it-card-action">Read More</div>
            </div>
        </a>
    </article>

<article class="it-card-container">
        <a href="#" class="it-card-link" aria-label="Read more about Forest Adventure Awaits">
            
            
            <img 
                class="it-card-image" 
                src="https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=80" 
                alt="A wooden path winding through a sunlit lush green forest.">
            <div class="it-card-content">
                <h3 class="it-card-title">Forest Adventure Awaits</h3>
                <p class="it-card-description">Journey deep into the woods and explore hidden trails. Nature's playground is waiting for you to discover its secrets.</p>
                <div role="button" class="it-card-action">Read More</div>
            </div>
        </a>
    </article>
    
</div>