Lists

Metro 4 provides special classes to create any styled lists.

About

Metro 4 contains any styled lists: step-list, items-list, feed-list, custom-marker.

Custom marker

You can create list with custom marker. To create it, add class .custom-list-marker to your list element and set attribute data-marker for list item.

  • Home
  • Base
  • Widgets
  • Contacts

                    <ul class="custom-list-marker">
                        <li data-marker="★">Home</li>
                        <li data-marker="☄">Base</li>
                        <li data-marker="✓">Widgets</li>
                        <li data-marker="❤">Contacts</li>
                    </ul>
                

Step list

To create step-list, use class .step-list.

  • First step

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  • Second step

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

  • Third step

    There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.


                    <ul class="step-list">
                        ...
                    </ul>
                

Items list

To create items-list, use class .items-list for your list and special items inside a list item.

  • List item second label
  • List item
  • List item
  • List item
  • List item

                    <ul class="items-list">
                        <li class="item with-second-label">
                            <img class="avatar" src="images/me.jpg">
                            <span class="label">List item</span>
                            <span class="second-label">second label</span>
                            <span class="second-action mif-alarm fg-red"></span>
                        </li>
                        <li class="item ">
                            <img class="avatar" src="images/me.jpg">
                            <span class="label">List item</span>
                        </li>
                        <li class="item ">
                            <img class="avatar" src="images/me.jpg">
                            <span class="label">List item</span>
                            <span class="second-action mif-alarm"></span>
                        </li>
                        <li class="item ">
                            <img class="avatar" src="images/me.jpg">
                            <span class="label">List item</span>
                        </li>
                        <li class="item ">
                            <img class="avatar" src="images/me.jpg">
                            <span class="label">List item</span>
                        </li>
                    </ul>
                

Feed list

To create feed-list, use class .feed-list for your list and special items inside a list item.

  • This is a title
  • There were some sings of a calm at noon 10 min
  • There were some sings of a calm at noon 10 min
  • There were some sings of a calm at noon 10 min
  • This is a title
  • There were some sings of a calm at noon 10 min
  • There were some sings of a calm at noon 10 min

                    <ul class="feed-list">
                        <li class="title">This is a title</li>
                        <li class="item">
                            <img class="avatar" src="https://picsum.photos/96/72/?random">
                            <span class="label">There were some sings of a calm at noon</span>
                            <span class="second-label">10 min</span>
                        </li>
                        <li class="item">
                            <img class="avatar" src="https://picsum.photos/96/72/?random">
                            <span class="label">There were some sings of a calm at noon</span>
                            <span class="second-label">10 min</span>
                        </li>
                        <li class="item">
                            <img class="avatar" src="https://picsum.photos/96/72/?random">
                            <span class="label">There were some sings of a calm at noon</span>
                            <span class="second-label">10 min</span>
                        </li>
                        <li class="title">This is a title</li>
                        <li class="item">
                            <img class="avatar on-right" src="https://picsum.photos/96/72/?random">
                            <span class="label">There were some sings of a calm at noon</span>
                            <span class="second-label">10 min</span>
                        </li>
                        <li class="item">
                            <img class="avatar on-right" src="https://picsum.photos/96/72/?random">
                            <span class="label">There were some sings of a calm at noon</span>
                            <span class="second-label">10 min</span>
                        </li>
                    </ul>
                

Group list

  • First item
  • Second item
  • Third item

                    <ul class="group-list">
                        <li class="item">First item</li>
                        <li class="item">Second item</li>
                        <li class="item">Third item</li>
                    </ul>