Content item - Components

Content item with image (left)

<article class="ecl-content-item">
  <picture
    class="ecl-content-item__picture ecl-picture ecl-content-item__picture--large ecl-content-item__picture--left"
    data-ecl-picture-link>
    <source srcset="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" media="(min-width: 480px)"
      type="image/jpg"><img class="ecl-content-item__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alt text of the image" />
  </picture>
  <div class="ecl-content-block ecl-content-item__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">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">
          <ul class="ecl-description-list__definition-list">
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#copy"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#download"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
          </ul>
        </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>
</article>

Try it yourself on the playground

Playground

Content item with image (right)

Fullscreen

<article class="ecl-content-item">
  <picture
    class="ecl-content-item__picture ecl-picture ecl-content-item__picture--large ecl-content-item__picture--right"
    data-ecl-picture-link>
    <source srcset="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" media="(min-width: 480px)"
      type="image/jpg"><img class="ecl-content-item__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alt text of the image" />
  </picture>
  <div class="ecl-content-block ecl-content-item__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">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">
          <ul class="ecl-description-list__definition-list">
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#copy"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#download"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
          </ul>
        </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>
</article>

Try it yourself on the playground

Playground

Content item with image (top)

Fullscreen

<article class="ecl-content-item ecl-content-item--stack">
  <picture class="ecl-content-item__picture ecl-picture ecl-content-item__picture--large ecl-content-item__picture--top"
    data-ecl-picture-link>
    <source srcset="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" media="(min-width: 480px)"
      type="image/jpg"><img class="ecl-content-item__image"
      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Alt text of the image" />
  </picture>
  <div class="ecl-content-block ecl-content-item__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">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">
          <ul class="ecl-description-list__definition-list">
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#copy"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#download"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
          </ul>
        </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>
</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

Links inline

Taxonomy list

Taxonomy item 1
Taxonomy item 2
Taxonomy 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" 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">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">
          <ul class="ecl-description-list__definition-list">
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#copy"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
            <li class="ecl-description-list__definition-item"><a href="/example"
                class="ecl-link ecl-link--standalone ecl-link--icon"><svg class="ecl-icon ecl-icon--s ecl-link__icon"
                  focusable="false" aria-hidden="true">
                  <use xlink:href="/dist/media/icons.aa842b0d.svg#download"></use>
                </svg><span class="ecl-link__label">Lorem ipsum dolor sit amet</span></a></li>
          </ul>
        </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>
</article>

Try it yourself on the playground

Playground