<div class="ecl-content-item">
  <div class="ecl-content-item__container">
    <div class="ecl-content-item__image ecl-content-item__image--l"
      style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
    <article class="ecl-card ecl-content-item__card">
      <div class="ecl-card__body">
        <ul class="ecl-card__label-container">
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--highlight ecl-card__label">highlight</span>
          </li>
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--high ecl-card__label">high
              importance</span></li>
        </ul>
        <div class="ecl-card__meta"><span class="ecl-card__meta-item">PRIMARY META</span><span
            class="ecl-card__meta-item">DD Month Year</span></div>
        <h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
        <div class="ecl-card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida
          ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio
          commodo tellus</div>
        <ul class="ecl-card__info-container">
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#calendar"></use>
            </svg><span class="ecl-card__info-label">2018/10/22</span></li>
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#location"></use>
            </svg><span class="ecl-card__info-label">Luxembourg</span></li>
        </ul>
      </div>
    </article>
  </div>
  <div class="ecl-content-item__taxonomy">
    <dl class="ecl-description-list ecl-description-list--taxonomy">
      <dt class="ecl-description-list__term">Science areas</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy and transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Standards</span></dd>
      <dt class="ecl-description-list__term">Keywords</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electricity</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electromobility</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy storage</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Security</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Low carbon</span></dd>
    </dl>
  </div>
</div>

<div class="ecl-content-item ecl-content-item--image-right">
  <div class="ecl-content-item__container">
    <div class="ecl-content-item__image ecl-content-item__image--l"
      style="background-image:url(https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg)"></div>
    <article class="ecl-card ecl-content-item__card">
      <div class="ecl-card__body">
        <ul class="ecl-card__label-container">
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--highlight ecl-card__label">highlight</span>
          </li>
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--high ecl-card__label">high
              importance</span></li>
        </ul>
        <div class="ecl-card__meta"><span class="ecl-card__meta-item">PRIMARY META</span><span
            class="ecl-card__meta-item">DD Month Year</span></div>
        <h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
        <div class="ecl-card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida
          ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio
          commodo tellus</div>
        <ul class="ecl-card__info-container">
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#calendar"></use>
            </svg><span class="ecl-card__info-label">2018/10/22</span></li>
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#location"></use>
            </svg><span class="ecl-card__info-label">Luxembourg</span></li>
        </ul>
      </div>
    </article>
  </div>
  <div class="ecl-content-item__taxonomy">
    <dl class="ecl-description-list ecl-description-list--taxonomy">
      <dt class="ecl-description-list__term">Science areas</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy and transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Standards</span></dd>
      <dt class="ecl-description-list__term">Keywords</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electricity</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electromobility</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy storage</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Security</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Low carbon</span></dd>
    </dl>
  </div>
</div>

<div class="ecl-content-item ecl-content-item--event">
  <div class="ecl-content-item__container"><time class="ecl-date-block ecl-content-item__date"
      dateTime="2019-09-26"><span class="ecl-date-block__daytime">2019-09-26</span><span class="ecl-date-block__day"
        aria-hidden="true">26</span><abbr title="September" class="ecl-date-block__month"
        aria-hidden="true">Sep</abbr><span class="ecl-date-block__year" aria-hidden="true">2019</span></time>
    <article class="ecl-card ecl-content-item__card">
      <div class="ecl-card__body">
        <ul class="ecl-card__label-container">
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--highlight ecl-card__label">highlight</span>
          </li>
          <li class="ecl-card__label-item"><span class="ecl-label ecl-label--high ecl-card__label">high
              importance</span></li>
        </ul>
        <div class="ecl-card__meta"><span class="ecl-card__meta-item">PRIMARY META</span><span
            class="ecl-card__meta-item">DD Month Year</span></div>
        <h1 class="ecl-card__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
        <div class="ecl-card__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida
          ipsum ut lorem cursus, quis tincidunt sem viverra. Nunc vestibulum, mauris quis porta venenatis, justo odio
          commodo tellus</div>
        <ul class="ecl-card__info-container">
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#calendar"></use>
            </svg><span class="ecl-card__info-label">2018/10/22</span></li>
          <li class="ecl-card__info-item"><svg class="ecl-icon ecl-icon--xs" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.2936c801.svg#location"></use>
            </svg><span class="ecl-card__info-label">Luxembourg</span></li>
        </ul>
      </div>
    </article>
  </div>
  <div class="ecl-content-item__taxonomy">
    <dl class="ecl-description-list ecl-description-list--taxonomy">
      <dt class="ecl-description-list__term">Science areas</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy and transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Standards</span></dd>
      <dt class="ecl-description-list__term">Keywords</dt>
      <dd class="ecl-description-list__definition"><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electricity</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Electromobility</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Energy storage</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Security</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Transport</span><span
          class="ecl-tag ecl-tag--display ecl-description-list__tag">Low carbon</span></dd>
    </dl>
  </div>
</div>