CSS Cookbook: card component

A short heading

The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.

A short heading

Short content.

A longer heading in this card

In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a suggestion for reaching the North Pole by an aerostat.

A short heading

The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.

<div class="cards">
  <article class="card">
    <header>
      <h2>A short heading</h2>
    </header>
    <img src="balloons.jpg" alt="Hot air balloons">
    <div class="content">
      <p> The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago. </p>
    </div>

</article>

<article class="card">
    <header>
      <h2>A short heading</h2>
    </header>
    <img src="balloons2.jpg" alt="Hot air balloons">
    <div class="content">
      <p>Short content.</p>
    </div>
    <footer>I have a footer!</footer>
  </article>

<article class="card">
    <header>
      <h2>A longer heading in this card</h2>
    </header>
    <img src="balloons.jpg" alt="Hot air balloons">
    <div class="content">
      <p>In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a
         suggestion for reaching the North Pole by an aerostat.</p>
    </div>
    <footer>I have a footer!</footer>
  </article>
  <article class="card">
    <header>
      <h2>A short heading</h2>
    </header>
    <img src="balloons2.jpg" alt="Hot air balloons">
    <div class="content">
      <p> The idea of reaching the North Pole by means of balloons appears to have been entertained many
          years ago. </p>
    </div>

</article>
</div>