@collab-ui/core/scss/components/lightbox/examples/default.html

Cisco Collab UI CSS Framework

  <div class="cui-lightbox__container">
    <div aria-labelledby="cui-lightbox" class="cui-lightbox" id=
    "react-aria-modal-dialog" role="dialog" tabindex="-1">
      <div class="cui-lightbox__header">
        <div class="cui-lightbox__header-item--left">
          <div class="cui-lightbox__header-meta">
            <div class="cui-lightbox__header-sharer">
              Shared by test
            </div>
            <div class="cui-lightbox__header-timestamp">
              At 4/17/2018, 10:02 AM
            </div>
          </div>
        </div>
        <div class="cui-lightbox__header-item--center">
          <div class="cui-lightbox__header-name">
            Screen Shot 2018-04-11 at 7.32.51 PM.png
          </div>
        </div>
        <div class="cui-lightbox__header-item--right">
          <span></span>
          <div class="cui-lightbox__control" role="button" tabindex="0">
            <span><i class="cui-icon icon icon-cancel_16"></i></span>
          </div>
        </div>
      </div>
      <div class="cui-lightbox__body">
        <div class="cui-lightbox__content" role="button" tabindex="0">
          <div class="cui-lightbox__viewport">
            <div class="cui-lightbox__viewport-wrapper" style=
            "width: 500px; height: 500px;"><img alt="" class=
            "cui-lightbox__viewport-image" draggable="false" src=
            "https://place-hold.it/500x500&text=Placeholder&fontsize=33"></div>
          </div>
          <div class="cui-lightbox__viewer-controls" role="button" tabindex="0">
            <div class="cui-lightbox__controls">
              <span></span>
              <div class="cui-lightbox__control" role="button" tabindex="0">
                <span><i class="cui-icon icon icon-zoom-out_16"></i></span>
              </div><span class=
              "cui-lightbox__control-value">100%</span><span></span>
              <div class="cui-lightbox__control" role="button" tabindex="0">
                <span><i class="cui-icon icon icon-zoom-out_16"></i></span>
              </div>
            </div>
            <div class="cui-lightbox__controls">
              <span class="cui-lightbox__control-value">1</span>
            </div>
            <div class="cui-lightbox__controls">
              <span class="cui-lightbox__control-value">34.4
              KB</span><span></span>
              <div class="cui-lightbox__control cui-lightbox__control-download"
              role="button" tabindex="0">
                <span><i class="cui-icon icon icon-download_16"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>