Cards - image bottom

by kjays

HTML

<h1>
Card image alignment that follows source order (title first)
</h1>
<div class="list">
  <article>
    <header>
      <h1>
        Card title
      </h1>
    </header>
    <!-- {{ content }} start -->
    <div class="difficulty">
      Difficulty: Easy
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/200x150">
    </div>
    <!-- {{ content }} end -->
    <footer class="more">
      <a href="#">VIEW ARTICLE</a>
    </footer>
  </article>
  <article>
    <header>
      <h1>
        Long card title malesuada magna mollis euismod
      </h1>
    </header>
    <!-- {{ content }} start -->
    <div class="difficulty">
      Difficulty: Easy
    </div>
    <div class="image">
      <img src="http://via.placeholder.com/200x150">
    </div>
    <!-- {{ content }} end -->
    <footer class="more">
      <a href="#">VIEW ARTICLE</a>
    </footer>
  </article>
</div>
<h1>
Card image alignment using flexbox order to change the display order of the source code items (image displayed first)
</h1>
<div class="list image-first">
  <article>
    <header>
      <h1>
        Card title
      </h1>
    </header>
    <!-- {{ content }} start -->
    <div class="content">
      <div class="image">
        <img src="http://via.placeholder.com/200x150">
      </div>
      <div class="difficulty">
        Difficulty: Easy
      </div>
    </div>
    <!-- {{ content }} end -->
    <footer class="more">
      <a href="#">VIEW ARTICLE</a>
    </footer>
  </article>
  <article>
    <header>
      <h1>
        Long card title malesuada magna mollis euismod
      </h1>
    </header>
    <!-- {{ content }} start -->
    <div class="content">
      <div class="image">
        <img src="http://via.placeholder.com/200x150">
      </div>
      <div class="difficulty">
        Difficulty: Easy
      </div>
    </div>
    <!-- {{ content }} end -->
    <footer class="more">
      <a href="#">VIEW ARTICLE</a>
    </footer>
  </article>
</div>

CSS

* {
  box-sizing: border-box;
}
.list {
  background-color: beige;
  display: flex;
  padding: 10px;
  margin-bottom: 30px;
}
article {
  background-color: white;
  width: 31.3%;
  margin: 0 1%;
  padding: 15px;
  border: 1px solid #aaa;
  display: flex;
  flex-direction: column;
}
img {
  width: 100%;
  margin-bottom: 10px;
}
header {
  /* flex-grow this element to achieve alignment on the other fields without causing issues should the user experiment by adding or moving fields using the Manage Display settings for the card. */
  background-color: teal;
  flex-grow: 1;
}
h1 {
  margin-top: 0;
}
.difficulty {
  background-color: lightgray;
  margin-bottom: 10px;
}
.more {
  background-color: lightgray;
  
}
.image-first .content {
  order: -1;
}
.image-first header {
  flex-grow: 1;
}