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>Collection as Link List
<div class="collection">
<a href="#" class="collection__item">
Lorem ipsum dolor sit amet
</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 & 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
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 & 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>