"Onsen-UI-Mobile-List"
Bootstrap 3.0.0 Snippet by vara24

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <script src="lib/onsen/js/onsenui.js"></script> </head> <body> <ons-page> <ons-toolbar> <div class="center">Picture List</div> </ons-toolbar> <ons-list> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="http://www.kevinandamanda.com/whatsnew/wp-content/uploads/2014/06/eiffel-tower-paris-france-26.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Eiffel Tower </div> <div class="location"> <i class="fa fa-map-marker"></i> Paris, France </div> <div class="desc"> Eiffel Tower is the symbol of Paris and named by Gustave Eiffel. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="http://www.monumentvalleysafari.com/uploads/images/home/1492971377_1.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Monument Valley </div> <div class="location"> <i class="fa fa-map-marker"></i> Utah, USA </div> <div class="desc"> Director John Ford used Monument Valley for a number of his best-known films. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="https://tripagency.online/wp-content/uploads/2016/12/fuji1-1024x698.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Mount Fuji </div> <div class="location"> <i class="fa fa-map-marker"></i> Japan </div> <div class="desc"> Mount Fuji is the highest mountain in Japan and a frequent attractive subject of Japanese art. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="http://www.gotokyo.org/en/kanko/minato/spot/images/03_12.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Tokyo Tower </div> <div class="location"> <i class="fa fa-map-marker"></i> Tokyo, Japan </div> <div class="desc"> Tokyo Tower is a communications and observation tower located in Tokyo, Japan. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> </ons-list> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="https://pbs.twimg.com/media/C7MQk-iXkAEOUUg.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Taj Mahal </div> <div class="location"> <i class="fa fa-map-marker"></i> New Delhi,India </div> <div class="desc"> Taj Mahal is a monument of LOVE located in New Delhi, India. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> </ons-list> <ons-list-item modifier="chevron" class="list-item-container"> <ons-row> <ons-col width="95px"> <img src="http://amazingindiablog.in/wp-content/uploads/2016/07/Red-Fort-Night-View.jpg" class="thumbnail"> </ons-col> <ons-col> <div class="name"> Red Fort </div> <div class="location"> <i class="fa fa-map-marker"></i> New Delhi,India </div> <div class="desc"> Red Fort is a monument of Courage located in New Delhi, India. </div> </ons-col> <ons-col width="40px"></ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </body> </html>
.list-item-container { line-height: 1; padding: 15px 0px 15px 15px; } .thumbnail { width: 80px; height: 80px; border-radius: 4px; -webkit-border-radius: 4px; } .name { font-weight: 500; line-height: 16px; font-size: 15px; margin-bottom: 6px; } .location { font-size: 14px; opacity: 0.4; margin-bottom: 6px; } .desc { line-height: 1.2; font-size: 13px; }

Related: See More


Questions / Comments: