Cards

<article class="ecl-card">
  <picture class="ecl-picture ecl-card__picture" data-ecl-picture-link><img class="ecl-card__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="card image" /></picture>
  <div class="ecl-card__body">
    <div class="ecl-content-block ecl-card__content-block" data-ecl-auto-init="ContentBlock" data-ecl-content-block>
      <ul class="ecl-content-block__label-container" aria-label="Labels">
        <li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--highlight">highlight</span></li>
        <li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--high">high importance</span></li>
      </ul>
      <ul class="ecl-content-block__primary-meta-container">
        <li class="ecl-content-block__primary-meta-item">PRIMARY META</li>
        <li class="ecl-content-block__primary-meta-item">DD Month Year</li>
      </ul>
      <div class="ecl-content-block__title" data-ecl-title-link><a href="/example"
          class="ecl-link ecl-link--standalone">Title</a></div>
      <div class="ecl-content-block__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-content-block__secondary-meta-container">
        <li class="ecl-content-block__secondary-meta-item"><svg
            class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#calendar"></use>
          </svg><span class="ecl-content-block__secondary-meta-label">2018/10/22</span></li>
        <li class="ecl-content-block__secondary-meta-item"><svg
            class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#location"></use>
          </svg><span class="ecl-content-block__secondary-meta-label">Luxembourg</span></li>
      </ul>
    </div>
  </div>
</article>

<article class="ecl-card">
  <picture class="ecl-picture ecl-card__picture" data-ecl-picture-link><img class="ecl-card__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="card image" /></picture>
  <div class="ecl-card__body">
    <div class="ecl-content-block ecl-card__content-block" data-ecl-auto-init="ContentBlock" data-ecl-content-block>
      <ul class="ecl-content-block__label-container" aria-label="Labels">
        <li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--highlight">highlight</span></li>
        <li class="ecl-content-block__label-item"><span class="ecl-label ecl-label--high">high importance</span></li>
      </ul>
      <ul class="ecl-content-block__primary-meta-container">
        <li class="ecl-content-block__primary-meta-item">PRIMARY META</li>
        <li class="ecl-content-block__primary-meta-item">DD Month Year</li>
      </ul>
      <div class="ecl-content-block__title" data-ecl-title-link><a href="/example"
          class="ecl-link ecl-link--standalone">Title</a></div>
      <div class="ecl-content-block__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-content-block__secondary-meta-container">
        <li class="ecl-content-block__secondary-meta-item"><svg
            class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#calendar"></use>
          </svg><span class="ecl-content-block__secondary-meta-label">2018/10/22</span></li>
        <li class="ecl-content-block__secondary-meta-item"><svg
            class="ecl-icon ecl-icon--s ecl-content-block__secondary-meta-icon" focusable="false" aria-hidden="true">
            <use xlink:href="/dist/media/icons.aa842b0d.svg#location"></use>
          </svg><span class="ecl-content-block__secondary-meta-label">Luxembourg</span></li>
      </ul>
      <div class="ecl-content-block__list-container">
        <dl class="ecl-description-list ecl-content-block__list">
          <dt class="ecl-description-list__term">Standalone links</dt>
          <dd class="ecl-description-list__definition ecl-description-list__definition--link">
            <ul class="ecl-description-list__definition-list">
              <li class="ecl-description-list__definition-item"><a href="/example"
                  class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li>
              <li class="ecl-description-list__definition-item"><a href="/example"
                  class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li>
            </ul>
          </dd>
          <dt class="ecl-description-list__term">Standard text</dt>
          <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
              class="ecl-link">consectetur adipiscing elit</a>.</dd>
          <dt class="ecl-description-list__term">Links inline</dt>
          <dd class="ecl-description-list__definition ecl-description-list__definition--inline">
            <ul class="ecl-description-list__definition-list">
              <li class="ecl-description-list__definition-item"><a href="/example"
                  class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li>
              <li class="ecl-description-list__definition-item"><a href="/example"
                  class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li>
            </ul>
          </dd>
          <dt class="ecl-description-list__term">Taxonomy list</dt>
          <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy">
            <ul class="ecl-description-list__definition-list">
              <li class="ecl-description-list__definition-item">Taxonomy item 1</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 2</li>
              <li class="ecl-description-list__definition-item">Taxonomy item 3</li>
            </ul>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</article>