Default card
<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="/component-library/v4.0.0-beta-1/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="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.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="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.svg#location"></use> </svg><span class="ecl-content-block__secondary-meta-label">Luxembourg</span></li> </ul> </div> </div> </article>
Try it yourself on the playground
PlaygroundCard with lists
<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="/component-library/v4.0.0-beta-1/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="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.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="/component-library/v4.0.0-beta-1/dist/media/icons.b437abae.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="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li> <li class="ecl-description-list__definition-item"><a href="/component-library/v4.0.0-beta-1/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="/component-library/v4.0.0-beta-1/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="/component-library/v4.0.0-beta-1/example" class="ecl-link ecl-link--standalone">Lorem ipsum dolor sit amet</a></li> <li class="ecl-description-list__definition-item"><a href="/component-library/v4.0.0-beta-1/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>
Try it yourself on the playground
Playground