List view

  • OneNote 2013

    1 RUB

  • Excel 2013

    1 RUB

  • Word 2013

    1 RUB

  • Firefox

    Download...

    <ul class="listview">
        <li>
            <div class="icon">
                <img />
            </div>
            <div class="data">
                <h4>Title</h4>
                ...
                <p>text</p>
            </div>
        </li>
        ...
    </ul>

List view Fluid

  • OneNote 2013

    1 RUB

  • Firefox

    Free

  • Word 2013

    1 RUB

  • Excel 2013

    1 RUB

    <ul class="listview fluid">
        ...
    </ul>

ListView Image

  • This is a my face

    Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

    sergey@pimenov.com.ua
  • Bear

    Bears are mammals of the family Ursidae. Bears are classified as caniforms, or doglike carnivorans, with the pinnipeds being their closest living relatives.

  • This is a my face

    Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

    sergey@pimenov.com.ua
    <ul class="listview image">
        ...
    </ul>

ListView Image Fluid

  • This is a my face

    Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

    sergey@pimenov.com.ua
  • This is a my face

    Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

    sergey@pimenov.com.ua
  • This is a my face

    Hi! My name is Sergey Pimenov and i'm author of Metro UI CSS from Kiev, Ukraine.

    sergey@pimenov.com.ua
    <ul class="listview image fluid">
        ...
    </ul>

ListView Iconic

  • Excel 2013

  • Word 2013

  • OneNote 2013

    <ul class="listview iconic">
        ...
    </ul>

List view with badges

You can use badges with any listview type. To set background or foreground color of badge, you can use color classes.
If you want to strech the badge, you need to add the class strech to the div badge.

Classes

.strech - Strech your badge dimension
.right - Set your badge to right (default: left)
.bottom - Set your badge to bottom (default: top)


  • 1 new

    Mail from vabatta@gmail.com

    Hey Sergey, your metro UI is awesome!
    Keep up the hard work!

  • 6 new documents

    Word 2013

    1 RUB

  • 75% done

    Firefox

    Download...

    <ul class="listview">
        <li>
            <div class="badge">
                text
            </div>
            ...
        </li>
        ...
    </ul>
    <ul class="listview">
        <li>
            <div class="badge strech">
                text
            </div>
            ...
        </li>
        ...
    </ul>