@collab-ui/core/scss/components/alert-call/examples/device-list.html

Cisco Collab UI CSS Framework

<div class="cui-alert cui-alert--call">
  <div class="cui-alert__title">Incoming Call</div>
  <div class="cui-alert__caller">
    <div class="cui-avatar cui-avatar--xlarge" title="Jefe Guadelupe">
      <span class="cui-avatar__letter">JG</span>
    </div>
    <div class="cui-alert__caller-title">Jefe Guadelupe</div>
    <div class="cui-alert__caller-subtitle">+ 1 972-555-1212</div>
  </div>
  <div class="cui-list cui-list--vertical cui-list" role="list">
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--read-only cui-list-item-header"
      id="cui-list-item-42"
      role="listItem"
      title="Device selection">
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Device selection</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div
      aria-current="true"
      class="cui-list-item"
      id="cui-list-40__list-item"
      role="listItem" title="SJC21-Babelfish">
      <div class="cui-list-item__left">
        <i class="icon icon-spark-board_20"></i>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">SJC21-Babelfish</div>
      </div>
      <div class="cui-list-item__right">
        <i class="icon icon-check_20 cui-color--blue-base"></i>
      </div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item"
      id="cui-list-40__list-item"
      role="listItem"
      title="Use my computer">
      <div class="cui-list-item__left">
        <i class="icon icon-laptop_20"></i>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Use my computer</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
  </div>
  <div class="cui-alert--call--buttons">
    <button
      class="cui-button cui-button--circle cui-button--44 cui-button--green"
      alt="answer call with voice and video"
      type="button"
      aria-label="answer call with voice and video">
      <span class="cui-button__children">
        <i class="icon icon-camera_24"></i>
      </span>
    </button>
    <button
      class="cui-button cui-button--circle cui-button--44 cui-button--green"
      alt="answer call with voice only"
      type="button"
      aria-label="answer call with voice only">
      <span class="cui-button__children">
        <i class="icon icon-handset_24"></i>
      </span>
    </button>
    <button
      class="cui-button cui-button--circle cui-button--44 cui-button--red"
      alt="reject call"
      type="button"
      aria-label="reject call">
      <span class="cui-button__children">
        <i class="icon icon-cancel_24"></i>
      </span>
    </button>
  </div>
</div>