@momentum-ui/react-collaboration/scss/components/alert-call/examples/device-list.html

Cisco Momentum UI Framework for React Collaboration Applications

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