Collection Stable

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>
<div class="collection">
  <a href="#" class="collection__item">
    Lorem ipsum dolor sit amet
  </a>
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.
Quibusdam culpa asperiores esse quod voluptas.
Eos excepturi nam neque perspiciatis accusamus aliquam, impedit earum maxime mollitia.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
<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

Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.
Quibusdam culpa asperiores esse quod voluptas.
Eos excepturi nam neque perspiciatis accusamus aliquam, impedit earum maxime mollitia.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
<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

Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.
Quibusdam culpa asperiores esse quod voluptas.
Eos excepturi nam neque perspiciatis accusamus aliquam, impedit earum maxime mollitia.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.
<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

<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.2/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

<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.2/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>