UI MarCom 3

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.

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

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

Collection container

AttributeDescriptionValuesDefault
compactSets a more compact appereance
full-borderedAdds a border around the collection

SlotSlotted content
defaultNest some <uimc-collection-item>

Collection items

AttributeDescriptionValuesDefault
urlSets a link on the itemvalid URL

SlotSlotted content
defaultContent placed as caption
additional-contentPlace for buttons or icons on the right side

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
<uimc-collection>
  <uimc-collection-item>
    <div>Lorem ipsum dolor sit amet</div>
  </uimc-collection-item>
</uimc-collection>
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
<uimc-collection>
  <uimc-collection-item url="#">
    <div>Lorem ipsum dolor sit amet</div>
  </uimc-collection-item>
</uimc-collection>
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
<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>
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>

Collection with grid

Technologies & Innovations
Lorem ipsum dolor sit amet

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

CT Customer Information Portal
Lorem ipsum dolor sit amet

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

40 years of Siemens CT
Lorem ipsum dolor sit amet

Quibusdam culpa asperiores esse quod voluptas.

Every idea starts with a simple scribble - 10 years of Dual Source - CT without compromises
Lorem ipsum dolor sit amet

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

alt text
Lorem ipsum dolor sit amet

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

<uimc-collection>
  <uimc-collection-item url="#">
    <div>
      <div class="row">
        <div class="col-12 col-md-3 col-lg-4">
          <div class="aspect-ratio-16x9">
            <img alt="Technologies &amp; Innovations" src="/ui-marcom/version/3.2/assets/img/brandville/SH_ACUSON_Redwood_69730_IMAGE_19.jpg">
          </div>
        </div>
        <div class="col-12 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>
  </uimc-collection-item>
</uimc-collection>

Collection with media-object

Technologies & Innovations
Lorem ipsum dolor sit amet

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

CT Customer Information Portal
Lorem ipsum dolor sit amet

Beatae eveniet distinctio temporibus architecto ducimus cumque omnis dolore.

40 years of Siemens CT
Lorem ipsum dolor sit amet

Quibusdam culpa asperiores esse quod voluptas.

Every idea starts with a simple scribble - 10 years of Dual Source - CT without compromises
Lorem ipsum dolor sit amet

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

alt text
Lorem ipsum dolor sit amet

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

<uimc-collection>
  <uimc-collection-item url="#">
    <div>
      <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/3.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>
  </uimc-collection-item>
</uimc-collection>