In Article Content Module CLS POC

by Richard Hunter

HTML

<div class="container">
  <h2>Read Next</h2>
  <div class="piano-recirculation-module-container">
    <div class="cx-flex-module pulse">
      <div class="cx-item">
        <div class="cx-item-image"></div>
        <div class="cx-item-header"></div>
      </div>
      <div class="cx-item">
        <div class="cx-item-image"></div>
        <div class="cx-item-header"></div>
      </div>
      <div class="cx-item">
        <div class="cx-item-image"></div>
        <div class="cx-item-header"></div>
      </div>
    </div>
    <div id="piano-recirculation-module" class="piano-recirculation-module">
      
    </div>
  </div>
</div>
<div class="lorem">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

CSS

.container {
  margin-top: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

h2 {
  padding-top: 12px;
  line-height: 28px;
  font-weight: normal;
  font-size: 28px;
  padding-bottom: 12px;
}
.piano-recirculation-module-container {
  position: relative;
  width: 100%;
}

h2,
h3 {
  margin: 0;
}

.cx-item {
  text-decoration: none;
}

.cx-item-image {
  height: auto;
  vertical-align: middle;
  object-fit: cover;
  background: lightgrey;
}

.cx-item-header {
  height: calc(4 * 1.2 * 16px);
  font-size: 16px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: black;
  font-family: helvetica;
  font-weight: normal;
}

.piano-recirculation-module {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/*
Mobile
*/
@media (max-width: 499px) {
  .cx-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 12px;
  }

  .cx-item-image {
    width: 190px;
    aspect-ratio: 4/3;
  }

  .cx-item-header {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/*
Desktop
*/
@media (min-width: 500px) {
  .cx-flex-module {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }

  .cx-item {
    display: block;
  }

  .cx-item-image {
    width: 100%;
    aspect-ratio: 1/1;
  }

  .cx-item-header {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}

.lorem {
  padding-top: 12px;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

const pianoContentModule = `
<div class="tp-cxense-placeholder-inline tp-widget-placeholder">
        <div id="cxense-3e823a6fa982ce2fec00c6e2846c4abff3343739">
          <div data-cx_ysy9="" class="cx-flex-module">
            <a
              id="cXLinkIdm6amia25sbnmvu35"
              class="cx-item"
              href="https://www.elle.com/uk/fashion/celebrity-style/g63319684/claudia-winkleman-the-traitors-outfits/"
              target="_top"
              title="Claudia Winkleman's Chic All-Black 'The Traitors' Look Is Still In Stock"
            >
              <img
                class="cx-item-image"
                srcset="
                  http://content-thumbnail.cxpublic.com/content/dominantthumbnail/44452ebef575b7ca17b564c51045942f4926933c.jpg?679364a8                     300w,
                  https://hips.hearstapps.com/hmg-prod/images/claudia-winkleman-traitors-67935b49c694c.jpg?crop=1.00xw:0.334xh;0,0.0993xh&amp;resize=1200:* 960w
                "
                width="0"
                height="0"
                sizes="(max-width: 600px) 300px, 960px"
                src="http://content-thumbnail.cxpublic.com/content/dominantthumbnail/44452ebef575b7ca17b564c51045942f4926933c.jpg?679364a8"
                alt=""
              />
              <h3 class="cx-item-header">
                Claudia Winkleman's Chic All-Black 'The Traitors' Look Is Still
                In Stock
              </h3>
            </a>

            <a
              id="cXLinkIdm6amia2659mpz3vd"
              class="cx-item"
              href="https://www.elle.com/uk/fashion/what-to-wear/a63491095/coloured-tights-trend/"
              target="_top"
              title="Coloured Tights Are 2025's Most Divisive Trend"
            >
              <img
                class="cx-item-image"
                srcset="
                  http://content-thumbnail.cxpublic.com/content/dominantthumbnail/1f5f282f12151f1b86b18747588305f9ece2cdbb.jpg?67900e3f       300w,
          ...