Collection Stable Updated

Collections are kind of list seperated by horizontal rules. Often the Collection items are links to related content pages. The content of each collection item can contain other layout objects.

Basic

• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet
• Lorem ipsum dolor sit amet

<ul class="collection">
  <li class="collection__item">Lorem ipsum dolor sit amet</li>
</ul>

Collection as Link List

<div class="collection">
  <a href="#" class="collection__item"> Lorem ipsum dolor sit amet </a>
</div>

Collection as Link List with Indicator

<div class="collection">
  <a href="#" class="collection__item">
    <div class="collection__content">Lorem ipsum dolor sit amet</div>
    <div class="collection__additional-content">
      <i class="icon-arrow-right color-gray"></i>
    </div>
  </a>
</div>

Collection as Link List with Controls

<div class="collection">
  <div class="collection__item">
    <div class="collection__content">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div class="collection__additional-content">
      <a href="#" class="button button--control"
        ><i class="icon-arrow-right"></i
      ></a>
    </div>
  </div>
</div>

Collection full bordered

<div class="collection collection--full-bordered">
  <div class="collection__item">
    <div class="collection__content">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div class="collection__additional-content">
      <a href="#" class="button button--control"
        ><i class="icon-arrow-right"></i
      ></a>
    </div>
  </div>
</div>

Compact collection

<div class="collection collection--compact">
  <div class="collection__item">
    <div class="collection__content">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div class="collection__additional-content">
      <a href="#" class="button button--control button--small"
        ><i class="icon-arrow-right"></i
      ></a>
    </div>
  </div>
</div>

Collection with grid

Lorem ipsum dolor sit amet

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

Lorem ipsum dolor sit amet

Quibusdam culpa asperiores esse quod voluptas.

Lorem ipsum dolor sit amet

Eos excepturi nam neque perspiciatis accusamus aliquam, impedit earum maxime mollitia.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

<div class="collection">
  <a href="#" class="collection__item">
    <div class="collection__content">
      <div class="row">
        <div class="col-3 col-lg-4">
          <div class="aspect-ratio-16x9">
            <img alt="Technologies &amp; Innovations" src="/ui-marcom/version/2.4/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" />
          </div>
        </div>
        <div class="col-9 col-md-7 col-lg-6">
          <h5 class="margin-top-0">Lorem ipsum dolor sit amet</h5>
          <p class="margin-bottom-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </a>
</div>

Collection with media-object

Lorem ipsum dolor sit amet

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

Lorem ipsum dolor sit amet

Quibusdam culpa asperiores esse quod voluptas.

Lorem ipsum dolor sit amet

Eos excepturi nam neque perspiciatis accusamus aliquam, impedit earum maxime mollitia.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

<div class="collection">
  <a href="#" class="collection__item">
    <div class="collection__content">
      <div class="media-object">
        <div class="media-object__image">
          <div class="aspect-ratio-1x1 aspect-ratio--cover image-size-small">
            <img alt="Technologies &amp; Innovations" src="/ui-marcom/version/2.4/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg" />
          </div>
        </div>
        <div class="media-object__body">
          <h5>Lorem ipsum dolor sit amet</h5>
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </a>
</div>