<p>
  <button class="card-button button-load" onClick="loadContent()">Load content</button>
</p>

<ul>
  <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
  <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
    <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
    <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
    <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
    <li>
    <div class="card">
      <img width="200" height="200" class="card-image" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII" />
      <h3 class="card-title"></h3>
      <p class="card-description"></p>

      <button class="card-button">Card button</button>
    </div>
  </li>
</ul>

<script>
  function loadContent() {
    
    /* Select everything */
    
    var body = document.querySelector("body");
    var cards = document.querySelectorAll(".card");
    var loadBtn = document.querySelector(".button-load");
    var cardImages = document.querySelectorAll(".card-image");
    var cardTitles = document.querySelectorAll(".card-title");
    var cardButtons = document.querySelectorAll(".card-button");
    var cardDescriptions = document.querySelectorAll(".card-description");
    var cardVisuallyHidden = document.querySelectorAll(".visually-hidden");
    var hasLoaded = body.classList.contains("content-loaded");
    
    /* Toggle content - simulate asynchronus loading and toggle ARIA labels */
    
    function unloadContent(i) {
      cardTitles[i].innerHTML = "";
      cardDescriptions[i].innerHTML = "<br/><br/><br/>";
      cardImages[i].src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII";
      cards[i].classList.add("loading");
    }

    function loadContent(i) {
      cardTitles[i].innerHTML = "Card title";
      cardDescriptions[i].innerHTML = "This is a description text that can span three lines at most and if we add more content...";
      cardImages[i].src = "https://placekitten.com/200/200";
      cards[i].classList.remove("loading");
    }
    if (hasLoaded) {
      body.classList.remove("content-loaded");
      loadBtn.innerHTML = "Load content";
      for (let i = 0; i < cardImages.length; i++) {
        unloadContent(i);
      }
    } else {
      body.classList.add("content-loaded");
      loadBtn.innerHTML = "Unload content";
      for (let i = 0; i < cardImages.length; i++) {
        loadContent(i);
      }
    }
  }
</script>

html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing:inherit;
}

body {
  padding: 2rem;
  font-family: Arial, sans-serif;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.4;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  grid-column-gap: 1em;
}

li {
  padding: 0;
  margin: 0;
}

.card-image {
  margin-bottom: 1em;
}

.card-title {
  font-size: 1.25em;
  margin: 0;
  font-family: "Times New Roman", serif;
  text-transform: uppercase;
  border-bottom: 0.1em solid hsl(39, 100%, 50%, 0.25);
  padding-bottom: 0.25em;
}

button {
    border-width: 0;
  cursor: pointer;
  background: none;
}

.card-button {
  border-radius: 0.3em;
  border-bottom: 0.3em solid darkgoldenrod;
  background-color: orange;
  display: block;
  width: 100%;
  padding: 0.5em 1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsla(0,0%,0%,0.7);
}

.card-button:hover {
  background-color: darkorange;
}

.card {
  border-bottom: 0.2em solid goldenrod; 
  padding: 2em 0.25em;
}

.card-description {
  max-height: 4.75em;
  background-color: hsl(39, 100%, 80%);
  overflow: hidden;
  padding: 0.5em 1em;
  margin: 1.5em 0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
}

.button-load {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  max-width: 680px;
  margin: 0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.