@collab-ui/core/scss/components/space-list/examples/space-list-meeting.html

Cisco Collab UI CSS Framework

<div class="medium-5 columns">
  <div class="cui-list cui-list--vertical cui-list" role="list" style="background-color: rgba(40, 40, 40, 0.72);">
    <div
      aria-current="true"
      class="cui-list-item cui-list-item--space active cui-list-item--space-meeting"
      id="cui-list-465__sl-item"
      role="listItem"
      title="Attendees Prop"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="Attendees Prop">
          <span class="cui-avatar__letter">AP</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">Attendees Prop</div>
        <div class="cui-list-item__subheader">must be very long long long long long message message</div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees"
            >14
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="Now" type="button" aria-label="Now">
          <span class="cui-button__children" style="opacity: 1;">Now</span>
        </button>
      </div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--space cui-list-item--space-meeting cui-list-item--unread"
      id="cui-list-465__sl-item"
      role="listItem"
      title="isBold(true)"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="isBold(true)">
          <span class="cui-avatar__letter">i</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">isBold(true)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right"></div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--space cui-list-item--space-meeting"
      id="cui-list-465__sl-item"
      role="listItem"
      title="MeetingType(group)"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-list-item__avatar cui-avatar--group cui-avatar--medium" title="MeetingType(group)">
          <span class="cui-avatar__letter">M</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(group)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right">
        <button class="cui-button cui-button--28 cui-button--green" alt="In 5 Min" type="button" aria-label="In 5 Min">
          <span class="cui-button__children" style="opacity: 1;">In 5 Min</span>
        </button>
      </div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--space cui-list-item--space-meeting"
      id="cui-list-465__sl-item"
      role="listItem"
      title="MeetingType(number)"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-list-item__avatar cui-avatar--medium" title="#">
          <span class="cui-avatar__letter">#</span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(number)</div>
        <div class="cui-list-item__subheader">subheader</div>
      </div>
      <div class="cui-list-item__right">
        <button class="cui-button cui-button--28 cui-button--green" alt="2:25" type="button" aria-label="2:25">
          <span class="cui-button__children" style="opacity: 1;">2:25</span>
        </button>
      </div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--space cui-list-item--space-meeting"
      id="cui-list-465__sl-item"
      role="listItem"
      title="MeetingType(device)"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-list-item__avatar cui-avatar--medium">
          <span class="cui-avatar__icon">
            <i class="cui-icon icon icon-spark-board_16"></i>
          </span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">MeetingType(device)</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees"
            >3
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="30:25" type="button" aria-label="30:25">
          <span class="cui-button__children" style="opacity: 1;">30:25</span>
        </button>
      </div>
    </div>
    <div
      aria-current="false"
      class="cui-list-item cui-list-item--space cui-list-item--space-meeting"
      id="cui-list-465__sl-item"
      role="listItem"
      title="ChildrenLeft Prop"
    >
      <div class="cui-list-item__left">
        <div class="cui-avatar cui-avatar--18">
          <span class="cui-avatar__icon">
            <i class="cui-icon icon icon-mention_12"> </i>
          </span>
        </div>
      </div>
      <div class="cui-list-item__center">
        <div class="cui-list-item__header">ChildrenLeft Prop</div>
        <div class="cui-list-item__subheader"></div>
      </div>
      <div class="cui-list-item__right">
        <span>
          <span role="button" class="cui-list-item--space-meeting--attendees"
            >3
            <i class="cui-icon icon icon-people_12"></i>
          </span>
        </span>
        <button class="cui-button cui-button--28 cui-button--green" alt="30:25" type="button" aria-label="30:25">
          <span class="cui-button__children" style="opacity: 1;">30:25</span>
        </button>
      </div>
    </div>
  </div>
</div>