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.

Usage Code

<uimc-collection>
  <uimc-collection-item>

  </uimc-collection-item>
</uimc-collection>

Collection container

Attribute	Description	Values	Default
compact	Sets a more compact appereance	–	–
full-bordered	Adds a border around the collection	–	–

Slot	Slotted content
default	Nest some `<uimc-collection-item>`

Collection items

Attribute	Description	Values	Default
url	Sets a link on the item	valid URL	–

Slot	Slotted content
default	Content placed as caption
additional-content	Place for buttons or icons on the right side

Basic

Lorem ipsum dolor sit amet

<uimc-collection>
  <uimc-collection-item>
    <div>Lorem ipsum dolor sit amet</div>
  </uimc-collection-item>
</uimc-collection>

Collection as Link List

Lorem ipsum dolor sit amet

<uimc-collection>
  <uimc-collection-item url="#">
    <div>Lorem ipsum dolor sit amet</div>
  </uimc-collection-item>
</uimc-collection>

Collection as Link List with Indicator

Lorem ipsum dolor sit amet

<uimc-collection>
  <uimc-collection-item url="#">
    <div>Lorem ipsum dolor sit amet</div>
    <div slot="additional-content">
      <i class="icon-arrow-right color-gray"></i>
    </div>
  </uimc-collection-item>
</uimc-collection>

Collection as Link List with Controls

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.

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

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.

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

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.

<uimc-collection compact>
  <uimc-collection-item>
    <div class="font-size-small">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div slot="additional-content">
      <a href="#" class="button button--control button--small"><i class="icon-arrow-right"></i></a>
    </div>
  </uimc-collection-item>
</uimc-collection>