Content item with image (left)

highlight
high importance

PRIMARY META
DD Month Year

Title

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

2018/10/22
Luxembourg

Standard text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut sapien condimentum, aliquet turpis sit amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis
Standalone links: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Links inline: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Taxonomy list: Taxonomy item 1Taxonomy item 2Taxonomy item 3

Fullscreen

<article class="ecl-content-item">
  <picture class="ecl-content-item__picture ecl-content-item__picture--large ecl-content-item__picture--left">
    <source srcSet="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" media="(min-width: 480px)"
      type="image/jpg" /><img class="ecl-content-item__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Alt text of the image" />
  </picture>
  <div class="ecl-content-block ecl-content-item__content-block">
    <ul class="ecl-content-block__label-container">
      <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>
    <h1 class="ecl-content-block__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
    <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.6770a2ae.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.6770a2ae.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">Standard text</dt>
        <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
            class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit
          amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
        <dt class="ecl-description-list__term">Standalone links</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--link"><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#copy"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#download"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
        <dt class="ecl-description-list__term">Links inline</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--inline"><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
        <dt class="ecl-description-list__term">Taxonomy list</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
            class="ecl-description-list__definition-item">Taxonomy item 1</span><span
            class="ecl-description-list__definition-item">Taxonomy item 2</span><span
            class="ecl-description-list__definition-item">Taxonomy item 3</span></dd>
      </dl>
    </div>
  </div>
</article>

Try it yourself on the playground

Playground

Content item with image (right)

highlight
high importance

PRIMARY META
DD Month Year

Title

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

2018/10/22
Luxembourg

Standard text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut sapien condimentum, aliquet turpis sit amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis
Standalone links: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Links inline: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Taxonomy list: Taxonomy item 1Taxonomy item 2Taxonomy item 3

Fullscreen

<article class="ecl-content-item">
  <picture class="ecl-content-item__picture ecl-content-item__picture--large ecl-content-item__picture--right">
    <source srcSet="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" media="(min-width: 480px)"
      type="image/jpg" /><img class="ecl-content-item__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Alt text of the image" />
  </picture>
  <div class="ecl-content-block ecl-content-item__content-block">
    <ul class="ecl-content-block__label-container">
      <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>
    <h1 class="ecl-content-block__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
    <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.6770a2ae.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.6770a2ae.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">Standard text</dt>
        <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
            class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit
          amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
        <dt class="ecl-description-list__term">Standalone links</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--link"><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#copy"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#download"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
        <dt class="ecl-description-list__term">Links inline</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--inline"><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
        <dt class="ecl-description-list__term">Taxonomy list</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
            class="ecl-description-list__definition-item">Taxonomy item 1</span><span
            class="ecl-description-list__definition-item">Taxonomy item 2</span><span
            class="ecl-description-list__definition-item">Taxonomy item 3</span></dd>
      </dl>
    </div>
  </div>
</article>

Try it yourself on the playground

Playground

Event content item

2019-09-26

highlight
high importance

PRIMARY META
DD Month Year

Title

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

2018/10/22
Luxembourg

Standard text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut sapien condimentum, aliquet turpis sit amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis
Standalone links: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Links inline: Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Taxonomy list: Taxonomy item 1Taxonomy item 2Taxonomy item 3

Fullscreen

<article class="ecl-content-item ecl-content-item--inline"><time
    class="ecl-date-block ecl-date-block--ongoing 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>
  <div class="ecl-content-block ecl-content-item__content-block">
    <ul class="ecl-content-block__label-container">
      <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>
    <h1 class="ecl-content-block__title"><a href="/example" class="ecl-link ecl-link--standalone">Title</a></h1>
    <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.6770a2ae.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.6770a2ae.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">Standard text</dt>
        <dd class="ecl-description-list__definition">Lorem ipsum dolor sit amet, <a href="/example"
            class="ecl-link">consectetur adipiscing elit</a>. Suspendisse ut sapien condimentum, aliquet turpis sit
          amet, finibus purus. Donec porttitor iaculis felis ut dapibus. Sed blandit, massa ac suscipit facilisis</dd>
        <dt class="ecl-description-list__term">Standalone links</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--link"><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#copy"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a><a href="/example"
            class="ecl-link ecl-link--icon ecl-link--icon-before ecl-description-list__definition-item"><svg
              class="ecl-icon ecl-icon--s ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.6770a2ae.svg#download"></use>
            </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></dd>
        <dt class="ecl-description-list__term">Links inline</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--inline"><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a><a href="/example"
            class="ecl-link ecl-description-list__definition-item">Lorem ipsum dolor sit amet</a></dd>
        <dt class="ecl-description-list__term">Taxonomy list</dt>
        <dd class="ecl-description-list__definition ecl-description-list__definition--taxonomy"><span
            class="ecl-description-list__definition-item">Taxonomy item 1</span><span
            class="ecl-description-list__definition-item">Taxonomy item 2</span><span
            class="ecl-description-list__definition-item">Taxonomy item 3</span></dd>
      </dl>
    </div>
  </div>
</article>

Try it yourself on the playground

Playground