<article class="card" aria-labelledby="card-title">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1920px-HTML5_logo_and_wordmark.svg.png" alt="Description of image" class="card-img">
  <div class="card-content">
    <h2 id="card-title" class="card-title">Card Title</h2>
    <p class="card-text">This is a description of the card content. It provides additional information about the card.</p>
    <a href="#" class="card-link info">Learn More</a>
  </div>
</article>
* {
  box-sizing: border-box;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    margin: 20px;
}

.card-img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-title {
    font-size: 1.5em;
    margin: 0 0 10px;
    color: #333;
}

.card-text {
    font-size: 1em;
    margin: 0 0 20px;
    color: #666;
}

.card-link {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    color: #020202;
    font-size: 16px;
    cursor: pointer;
}

.card-link:hover,
.card-link:focus {
    opacity: 0.9;
}

.info {
  background-color: #17a2b8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.