Onsen UI CSS Component List Item with Subtitle Last Updated : 18 Jun, 2022 Comments Improve Suggest changes Like Article Like Report Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component List Item with Subtitle is used to create the subtitle of the list item using the list-item__subtitle class. Onsen UI CSS Component List Item with Subtitle Class: list-item__subtitle: This class is used to create the subtitle of the list item. Syntax: <ul class="list"> <li class="list-item"> <div class="list-item__center"> <div class="list-item__title"> ... </div> <div class="list-item__subtitle"> ... </div> </div> </li> </ul> Example 1: The following example demonstrates the Onsen UI CSS Component List Item with Subtitle. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component List Item with Subtitle </strong> <ul class="list"> <li class="list-item"> <div class="list-item__center"> <div class="list-item__title"> GeeksforGeeks </div> <div class="list-item__subtitle"> This is subtitle </div> </div> </li> </ul> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component List Item with Subtitle. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <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> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component List Item with Subtitle </strong> <ul class="list"> <li class="list-item"> <div class="list-item__center"> <div class="list-item__title"> GFG </div> <div class="list-item__subtitle"> Java </div> </div> </li> <li class="list-item"> <div class="list-item__center"> <div class="list-item__title"> GeeksforGeeks </div> <div class="list-item__subtitle"> Python </div> </div> </li> <li class="list-item"> <div class="list-item__center"> <div class="list-item__title"> Computer Science portal </div> <div class="list-item__subtitle"> Javascript </div> </div> </li> </ul> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#list-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component List Item with Subtitle H harendra4373 Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component List Item with Thumbnail Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component List Item with Thumbnail is used to add a thumbnail along with the list item using the list-item__ 2 min read Onsen UI CSS Component List title Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component List title is used to give a title of the list. We can give the title using the list-title class. 2 min read Onsen UI CSS Component List Item with Icon Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component List Item with Icon is used to add the icon along with the list item using the list-item__icon cla 2 min read Onsen UI CSS Component Switch in List Item Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Lists are used to store data or information on web pages in ordered or unordered form. Onsen UI CSS Component Switch in L 2 min read Onsen UI CSS Component List Item with Chevron Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Onsen UI CSS Component List Item with Chevron is used to create the list items with the chevron using the list-item--chev 2 min read Like