<!--
Office UI Fabric JS 1.5.0
The JavaScript front-end framework for building experiences for Office 365.
-->
<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!-- Top level: DetailsList -->
<div class="ms-DetailsList">
  <!-- DetailsHeader -->
  <div class="ms-DetailsHeader ms-font-m">
      <button class="ms-DetailsHeader-cell is-check">
        <svg class="ms-Check" height="20" width="20">
        <!-- <svg class="ms-Check is-checked" height="20" width="20"> -->
          <circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
          <polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
        </svg>
      </button>

      <div class="ms-DetailsHeader-cellSizeWrapper">
        <div class="ms-DetailsHeader-cellWrapper">
          <button class="ms-DetailsHeader-cell" style="width: 300px">
            <span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
              <i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
            </span>
            <span class="ms-DetailsHeader-cellText">Name</span>
          </button>
        <!-- Resizer -->
        <div class="ms-DetailsHeader-cell is-sizer"></div>
        </div>
      </div>

      <div class="ms-DetailsHeader-cellSizeWrapper">
        <div class="ms-DetailsHeader-cellWrapper">
          <button class="ms-DetailsHeader-cell" style="width: 200px">
            <span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
              <i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
            </span>
            <span class="ms-DetailsHeader-cellText">Modified date</span>
          </button>
        <!-- Resizer -->
        <div class="ms-DetailsHeader-cell is-sizer"></div>
        </div>
      </div>

      <div class="ms-DetailsHeader-cellSizeWrapper">
        <div class="ms-DetailsHeader-cellWrapper">
          <button class="ms-DetailsHeader-cell" style="width: 200px">
            <span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
              <i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
            </span>
            <span class="ms-DetailsHeader-cellText">Modified by</span>
          </button>
        <!-- Resizer -->
        <div class="ms-DetailsHeader-cell is-sizer"></div>
        </div>
      </div>

      <div class="ms-DetailsHeader-cellSizeWrapper">
        <div class="ms-DetailsHeader-cellWrapper">
          <button class="ms-DetailsHeader-cell" style="width: 200px">
            <span class="ms-DetailsHeader-sortArrow ms-Icon--arrowDown2">
              <i class="ms-DetailsHeader-filterChevron ms-Icon ms-Icon--chevronDown"></i>
            </span>
            <span class="ms-DetailsHeader-cellText">Sharing</span>
          </button>
        <!-- Resizer -->
        <div class="ms-DetailsHeader-cell is-sizer"></div>
        </div>
      </div>
    <div class="ms-DetailsHeader-sizerCover"></div>
  </div>
  <!-- /DetailsHeader -->
  
  <!-- List -->
  <div class="ms-DetailsList-list">
    <!-- DetailsRow -->
    <div class="ms-DetailsRow ms-font-m is-selected">
      <div class="ms-DetailsRow-focusBox"></div>

      <button class="ms-DetailsRow-check">
        <svg class="ms-Check" height="20" width="20">
          <circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
          <polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
        </svg>
      </button>

      <div class="ms-DetailsRow-cell is-clipped" style="width: 300px">Commissioned Research</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Yesterday, 3:34pm</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Alton Lafferty</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px"><i class="ms-DetailsRow-cellIcon ms-Icon ms-Icon--People"></i><span class="ms-DetailsRow-cellText">Editor</span></div>

      <span class="ms-DetailsRow-cell ms-DetailsRow-cellMeasurer"></span>
    </div>


    <div class="ms-DetailsRow ms-font-m">
      <div class="ms-DetailsRow-focusBox"></div>

      <button class="ms-DetailsRow-check">
        <svg class="ms-Check" height="20" width="20">
          <circle class="ms-Check-circle" cx="10" cy="10" r="9" stroke-width="1"></circle>
          <polyline class="ms-Check-check" points="6.3,10.3 9,13 13.3,7.5" stroke-width="1.5" fill="none"></polyline>
        </svg>
      </button>

      <div class="ms-DetailsRow-cell is-clipped" style="width: 300px">Commissioned Research</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Yesterday, 3:34pm</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px">Alex Darrow</div>
      <div class="ms-DetailsRow-cell is-clipped ms-fontColor-neutralSecondary" style="width: 200px"><i class="ms-DetailsRow-cellIcon ms-Icon ms-Icon--People"></i><span class="ms-DetailsRow-cellText">Editor</span></div>

      <span class="ms-DetailsRow-cell ms-DetailsRow-cellMeasurer"></span>
    </div>
    <!-- /DetailsRow -->
  </div>
</div>
