<main class="cards">
  <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>
   <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>
   <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>
   <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>
   <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>
   <article class="card">
  <img src="http://placeimg.com/640/480/tech/grayscale" alt="photo">
  <div class="text">
  <h3>Mi título</h3>
  <p>Lorem ipsum lorem ipsum lorem ipsum</p>
  <button>Click</button>
  </div>
  </article>


  
</main>
.cards {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.card {
flex: 0 0 200px;
margin: 10px;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
} 
.card img {
max-width: 100%;
}
.card .text {
padding: 0 20px 20px;
}
.card .text > button {
background: gray;
border: 0;
color: white;
padding: 10px;
width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.