Collection Stable Dark theme

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	–	–
theme	Set the color scheme of the component	`light`, `dark`	`light`

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>

Dark theme

Lorem ipsum dolor sit amet

<uimc-collection theme="dark">
  <uimc-collection-item url="#">
    <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.

Download

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

Download

Quibusdam culpa asperiores esse quod voluptas.

Download

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

Download

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

Download

<uimc-collection>
  <uimc-collection-item>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div slot="additional-content">
      <uimc-button type="control" icon="download">Download</uimc-button>
    </div>
  </uimc-collection-item>
</uimc-collection>

Collection full bordered

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Download

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

Download

Quibusdam culpa asperiores esse quod voluptas.

Download

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

Download

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

Download

<uimc-collection full-bordered>
  <uimc-collection-item>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div slot="additional-content">
      <uimc-button type="control" icon="download">Download</uimc-button>
    </div>
  </uimc-collection-item>
</uimc-collection>

Compact collection

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Edit

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

Edit

Quibusdam culpa asperiores esse quod voluptas.

Edit

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

Edit

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

Edit

<uimc-collection compact>
  <uimc-collection-item>
    <div class="font-size-small">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
    <div slot="additional-content">
      <uimc-button type="control" size="small" icon="edit">Edit</uimc-button>
    </div>
  </uimc-collection-item>
</uimc-collection>