List

  • First item
  • Second item
  • Third item
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item active">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
</ul>
  • First item
  • Second item
  • Third item
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item list-group-item-primary">First item</li>
    <li class="list-group-item list-group-item-success">Second item</li>
    <li class="list-group-item list-group-item-danger">Third item</li>
</ul>
View Code 
<div class="list-group ms-list">
    <a href="javascript:" class="list-group-item list-group-item-action">First item</a>
    <a href="javascript:" class="list-group-item list-group-item-action">Second item</a>
    <a href="javascript:" class="list-group-item list-group-item-action">Third item</a>
</div>
  • favorite Love It
  • thumb_up Like It
  • thumb_down Hate It
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">favorite</i>
        </span>
        Love It
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">thumb_up</i>
        </span>
        Like It
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">thumb_down</i>
        </span>
        Hate It
    </li>
</ul>
  • Line item Secondary text
  • Line item Secondary text
  • Line item Secondary text
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item">
        <span class="list-item">
            <span class="primary-text">Line item</span>
            <span class="secondary-text">Secondary text</span>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-item">
            <span class="primary-text">Line item</span>
            <span class="secondary-text">Secondary text</span>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-item">
            <span class="primary-text">Line item</span>
            <span class="secondary-text">Secondary text</span>
        </span>
    </li>
</ul>
  • folder Landscape 29 Aug 2018
  • folder Wildlife 18 Aug 2018
  • folder Fashion 22 Aug 2018
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Landscape</span>
            <span class="secondary-text">29 Aug 2018</span>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Wildlife</span>
            <span class="secondary-text">18 Aug 2018</span>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Fashion</span>
            <span class="secondary-text">22 Aug 2018</span>
        </span>
    </li>
</ul>
  • folder Landscape 29 Aug 2018 info
  • folder Wildlife 18 Aug 2018 info
  • folder Fashion 22 Aug 2018 info
  • folder 4K 21 Aug 2018 info
  • folder HD 15 Aug 2018 info
View Code 
<ul class="list-group ms-list">
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Landscape</span>
            <span class="secondary-text">29 Aug 2018</span>
        </span>
        <span class="list-icon-right">
            <i class="material-icons">info</i>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Wildlife</span>
            <span class="secondary-text">18 Aug 2018</span>
        </span>
        <span class="list-icon-right">
            <i class="material-icons">info</i>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">Fashion</span>
            <span class="secondary-text">22 Aug 2018</span>
        </span>
        <span class="list-icon-right">
            <i class="material-icons">info</i>
        </span>
    </li>

    <li class="list-group-item list-divider"></li>

    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">4K</span>
            <span class="secondary-text">21 Aug 2018</span>
        </span>
        <span class="list-icon-right align-middle">
            <i class="material-icons">info</i>
        </span>
    </li>
    <li class="list-group-item">
        <span class="list-icon">
            <i class="material-icons">folder</i>
        </span>
        <span class="list-item">
            <span class="primary-text">HD</span>
            <span class="secondary-text">15 Aug 2018</span>
        </span>
        <span class="list-icon-right">
            <i class="material-icons">info</i>
        </span>
    </li>
</ul>

On this page