"Onsen-UI-Mobile-Product-Preview"
Bootstrap 3.0.0 Snippet by vara24

Post to Facebook Tweet this

<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 ----------> <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-tabbar> <ons-tab page="page.html" icon="ion-search" label="Find a place" active="true"> </ons-tab> <ons-tab page="page.html" icon="ion-star" label="Favorites"> </ons-tab> <ons-tab page="page.html" icon="ion-person" label="Profile"> </ons-tab> </ons-tabbar> <ons-template id="page.html"> <ons-page modifier="shop-details"> <ons-toolbar modifier="transparent"> <div class="right"> <ons-toolbar-button><ons-icon icon="ion-ios-chatboxes" style="color: white"></ons-icon></ons-toolbar-button> </div> <div class="left"> <ons-toolbar-button><ons-icon icon="ion-arrow-left-c" style="color: white; font-size: 28px;" fixed-width="false"></ons-icon></ons-toolbar-button> </div> </ons-toolbar> <div class="card"> <div class="card-name">Onsen Sushi</div> <div class="card-desc">Traditional Japanese Sushi<br>Open until 10:30pm</div> </div> <div class="rating"><div class="rating-num"> <ons-icon icon="fa-star" fixed-width="false"></ons-icon> <ons-icon icon="fa-star" fixed-width="false"></ons-icon> <ons-icon icon="fa-star" fixed-width="false"></ons-icon> <ons-icon icon="fa-star" fixed-width="false"></ons-icon> <ons-icon icon="fa-star-half" fixed-width="false"></ons-icon> 4.5 </div></div> <ons-list style="border-top: none"><ons-list-item style="line-height: 1; padding: 0;"> <ons-row class="action"> <ons-col class="action-col"> <div class="action-icon"><ons-icon icon="ion-ios-star-half"></ons-icon></div> <div class="action-label">Rate</div> </ons-col> <ons-col class="action-col"> <div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div> <div class="action-label">Favorite</div> </ons-col> <ons-col class="action-col"> <div class="action-icon"><ons-icon icon="ion-share"></ons-icon></div> <div class="action-label">Share</div> </ons-col> <ons-col class="action-col"> <div class="action-icon"><ons-icon icon="ion-compose"></ons-icon></div> <div class="action-label">Pre Book</div> </ons-col> </ons-row> </ons-list-item></ons-list> <ons-list style="border-top: 0;"> <ons-list-item modifier="chevron tappable"> <div class="prop-desc"> <ons-icon icon="fa-map-marker"></ons-icon> 2-15-13 Hongo Bunkyo Tokyo </div> </ons-list-item> <ons-list-item modifier="chevron tappable"> <div class="prop-desc"> <ons-icon icon="fa-mobile"></ons-icon> (111) 123-4567 </div> </ons-list-item> <ons-list-item modifier="chevron tappable"> <div class="prop-desc"> <ons-icon icon="fa-book"></ons-icon> Store Photos and Menus </div> </ons-list-item> </ons-list> <ons-button modifier="tappabl small"> <div class="prop-desc"> <ons-icon icon="fa-shopping-cart"></ons-icon> Add To Cart </div> </ons-button> <ons-button modifier="tappable small"> <div class="prop-desc"> <ons-icon icon="fa-heart"></ons-icon> Add To Wishlist </div> </ons-button> <ons-button modifier="tappable small"> <div class="prop-desc"> <ons-icon icon="fa-sort"></ons-icon> Add To Compare </div> </ons-button> </ons-page> </ons-template>
.page--shop-details__content { position: absolute; left: 0px; right: 0px; top: 0px !important; bottom: 0px; } .card { background-color: white; background-image: url(*******); background-repeat: no-repeat; background-size: cover; color: white; height: 250px; } .card-toolbar ons-back-button span { color: white; } .card-name { font-weight: 600; font-size: 20px; padding: 66px 0 8px 0; text-align: center; } .card-desc { font-size: 14px; font-weight: 400; opacity: 0.9; text-align: center; line-height: 1.4; } .rating { text-align: center; position: relative; height: 0px; } .rating-num { position: relative; top: -24px; height: 24px; color: white; line-height: 24px; font-size: 12px; font-weight: 600; text-align: center; border-radius: 4px 4px 0 0; padding: 0 6px; background-color: #eb482f; color: white; width: auto; margin: 0 auto 0 auto; display: inline-block; } .rating-num ons-icon { font-size: 11px; vertical-align: -0px; } .action-col { text-align: center; opacity: 0.4; padding: 10px 0 8px; } .action-col:active { opacity: 0.7; } .action-col ons-button { padding: 0; line-height: 1; } .action-icon { padding: 0 0 4px 0; } .action-icon ons-icon { font-size: 28px; } .action-label { font-size: 12px; } .prop-desc { font-size: 14px; opacity: 0.7; } .prop-desc ons-icon { font-size: 14px; vertical-align: -0px; opacity: 0.5; }

Related: See More

Vue Argon Design System
Bootstrap 4 and CCS3 Product Cards with Transition
BS4 Login, Register FORM + Mobile
Mobile Nav Bar

Questions / Comments: