Cards

by Venkatesh Dematti

HTML

<div class="card-container">
  <div class="card">
    <img src="https://picsum.photos/id/237/200/300" alt="Card image 1" class="card-image">
    <div class="card-content">
      <p>Card content 1</p>
      <button class="cta-button">Call to Action</button>
    </div>
  </div>
  <div class="card">
    <img src="https://picsum.photos/seed/picsum/200/300" alt="Card image 2" class="card-image">
    <div class="card-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptate ea dolor amet dignissimos totam, ut autem sit voluptas maxime quos repellendus. Maiores doloribus, laboriosam fugit ex consectetur error. Ipsum?</p>
      <button class="cta-button">Call to Action</button>
    </div>
  </div>
  <!-- Add more cards as needed -->
</div>

CSS

/* Container for multiple cards */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
}

/* Individual card styling */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

/* Card content to use available space */
.card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  flex-grow: 1;
}

/* CTA button aligned at the bottom */
.cta-button {
  align-self: flex-start;
  margin-top: auto;
}