ToDo: Teaser mit gleicher Höhe

index.html

<div class="wrapper">
  <div class="flexitem">
    <div class="teaser">

      <header class="teaser__header">
        <h3>Überschrift, die auch lang sein kann!</h3>
      </header>
      <div class="teaser__content">
        <p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
      </div>

      <div class="teaser__footer"><a href="#" class="teaser__footer-link">weiterlesen ...</a></div>
    </div>
  </div>

  <div class="flexitem">
    <div class="teaser">

      <header class="teaser__header">
        <h3>Überschrift</h3>
      </header>
      <div class="teaser__content teaser--bg3">
        <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. </p>
      </div>
      <div class="teaser__footer"><a href="#" class="teaser__footer-link">weiterlesen ...</a></div>
    </div>

  </div>

  <div class="flexitem">
    <div class="teaser">
      <div class="teaser__content">
        <p><img src="http://unsplash.it/300/300" class="flexible teaser__image--bordered" alt=""></p>
        <p>»Es ist ein eigentümlicher Apparat«, sagte der Offizier.
        </p>
      </div>
      <div class="teaser__footer"><a href="#" class="teaser__footer-link">zum Artikel ...</a></div>
    </div>

  </div>

  <div class="flexitem">
    <div class="teaser">

      <header class="teaser__header">
        <h3>Überschrift, die auch lang sein kann!</h3>
      </header>
      <div class="teaser__content">
        <p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
        <p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. </p>
      </div>

      <div class="teaser__footer"><a href="#" class="teaser__footer-link">weiterlesen ...</a></div>
    </div>
  </div>

  <div class="flexitem">
    <div class="teaser">

      <header class="teaser__header">
        <h3>Überschrift</h3>
      </header>
      <div class="teaser__content teaser--bg3">
        <p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. </p>
      </div>
      <div class="teaser__footer"><a href="#" class="teaser__footer-link">weiterlesen ...</a></div>
    </div>

  </div>

  <div class="flexitem">
    <div class="teaser">
      <div class="teaser__content">
        <h3>Was ne tolle Überschrift</h3>
        <p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. </p>

      </div>
      <div class="teaser__footer"><a href="#" class="teaser__footer-link">zum Artikel ...</a></div>
    </div>

  </div>
</div>

style.scss

/* Flexbox-Regeln */
.wrapper { 
  display: flex;
  flex-wrap: wrap;
}

.flexitem { 
  flex: 1 0 30%;
}

.teaser {
    display: flex;
  flex-direction: column;
}
.teaser__content {
}

@media all and (min-width: 40em) {
  .flexitem { }
}

@media all and (min-width: 60em) {
  .flexitem { }
}

/* ---- Basics und Gestaltung ---- */
* {  box-sizing: border-box;}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
.flexible {  
  width: 100%; 
  max-width: 100%; 
  height: auto;
}

h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

.flexitem { 
  padding: 0.5em;
}


/* ==== Teaser ==== */
.teaser {
  border: 1px solid #cecece;
}

.teaser__header {
  padding: 5px 10px;
}

.teaser__content {
  margin-bottom: 20px;
  padding: 10px; 
}

.teaser__footer {
  padding: 10px;
  background-color: #cecece;
  color: #a20000;
}

.teaser__footer-link { 
  color: inherit;

  &:focus, &:hover {
    color: #00695C;
  }
}

todo-teaser-mit-gleicher-hohe.markdown

ToDo: Teaser mit gleicher Höhe

A Pen by Jens Grochtdreis on CodePen.

License.