metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Metro 4 provides special object to work with browser the session storage engine. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Lists - Metro 4 :: Popular HTML, CSS and JS library</title> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-done="console.log(arguments[0])" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Lists</a></li> <li class="toc-entry"><a href="#_list_about">About</a></li> <li class="toc-entry"><a href="#_list_custom_marker">Custom marker</a></li> <li class="toc-entry"><a href="#_list_step">Step list</a></li> <li class="toc-entry"><a href="#_list_items">Items list</a></li> <li class="toc-entry"><a href="#_list_feed">Feed list</a></li> <li class="toc-entry"><a href="#_list_group">Group list</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Lists</h1> <p class="text-leader"> Metro 4 provides special classes to create any styled lists. </p>  <h3 id="_list_about">About</h3> <p> Metro 4 contains any styled lists: <code>step-list</code>, <code>items-list</code>, <code>feed-list</code>, <code>custom-marker</code>. </p> <h3 id="_list_custom_marker">Custom marker</h3> <p> You can create list with custom marker. To create it, add class <code>.custom-list-marker</code> to your list element and set attribute <code>data-marker</code> for list item. </p> <div class="example"> <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> </div> <pre><code> <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> </code></pre> <h3 id="_list_step">Step list</h3> <p> To create <code>step-list</code>, use class <code>.step-list</code>. </p> <div class="example"> <ul class="step-list"> <li> <h4>First step</h4> <p> 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. </p> </li> <li> <h4>Second step</h4> <p> 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. </p> </li> <li> <h4>Third step</h4> <p> 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. </p> </li> </ul> </div> <pre><code class="html"> <ul class="step-list"> ... </ul> </code></pre> <h3 id="_list_items">Items list</h3> <p> To create <code>items-list</code>, use class <code>.items-list</code> for your list and special items inside a list item. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <ul class="items-list"> <li> <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> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </li> <li> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> <span class="second-action mif-alarm"></span> </li> <li> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </li> <li> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </li> </ul> </div> <div class="cell-md-6"> <div class="items-list"> <div class="item"> <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> </div> <div class="item"> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </div> <div class="item"> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> <span class="second-action mif-alarm"></span> </div> <div class="item"> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </div> <div class="item"> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </div> </div> </div> </div> </div> <pre><code> <ul class="items-list"> <li> <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> </ul> or <div class="items-list"> <div class="item"> <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> </div> ... <div class="item"> <img class="avatar" src="images/me.jpg"> <span class="label">List item</span> </div> </div> </code></pre> <h3 id="_list_feed">Feed list</h3> <p> To create <code>feed-list</code>, use class <code>.feed-list</code> for your list and special items inside a list item. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <ul class="feed-list"> <li class="title">This is a title</li> <li> <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> <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> <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> <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> <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> </div> <div class="cell-md-6"> <div class="feed-list"> <div class="title">This is a title</div> <div 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> </div> <div 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> </div> <div 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> </div> <div class="title">This is a title</div> <div 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> </div> <div 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> </div> </div> </div> </div> </div> <pre><code> <ul class="feed-list"> <li class="title">This is a title</li> <li> <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> <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> <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> or <div class="feed-list"> <div class="title">This is a title</div> <div> <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> </div> ... <div 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> </div> ... <div class="title">This is a title</div> <div 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> </div> </div> </code></pre>  <h3 id="_list_group">Group list</h3> <div class="example"> <div class="row"> <div class="cell-md-6"> <ul class="group-list"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> </div> <div class="cell-md-6"> <div class="group-list"> <div class="item">First item</div> <div class="item">Second item</div> <div class="item">Third item</div> </div> </div> </div> </div> <pre><code> <ul class="group-list"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> or <div class="group-list"> <div class="item">First item</div> <div class="item">Second item</div> <div class="item">Third item</div> </div> </code></pre> <h3 id="_list_group_horizontal">Group list horizontal</h3> <div class="example"> <div class="row"> <div class="cell-md-6"> <ul class="group-list horizontal"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> </div> <div class="cell-md-6"> <div class="group-list horizontal"> <div class="item">First item</div> <div class="item">Second item</div> <div class="item">Third item</div> </div> </div> </div> </div> <pre><code> <ul class="group-list horizontal"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> or <div class="group-list horizontal"> <div class="item">First item</div> <div class="item">Second item</div> <div class="item">Third item</div> </div> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>