- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Card HTML Layout
Description
The card HTML layout contains many classes, which are listed below −
S.No | Classes & Description |
---|---|
1 | cards It is the card container. |
2 | card-header It is the optional card header that is used to display card title. |
3 | card-footer It is optional and used for specifying additional information or custom links. |
4 | card-content It is the main container for content of the card and is required. |
5 | card-content-inner It is the optional additional inner wrapper that is used for additional padding to content. |
Both the card-header and the card-footer has flexbox layout where items have center vertical alignment. If you want to order your items to top or to bottom of header/footer, then you can use valign attribute.
Example
The following example demonstrates the use of cards HTML layouts in Framework7 −
<!DOCTYPE html> <html class="with-statusbar-overlay"> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" /> <meta name = "apple-mobile-web-app-capable" content = "yes" /> <meta name = "apple-mobile-web-app-status-bar-style" content = "black" /> <title>Card HTML Layout</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" /> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" /> <link rel = "stylesheet" href = "custom.css" /> </head> <body> <style> .demo-card-header-pic .card-header { height:40vw; background-size:cover; background-position:center; } .facebook-card .card-header { display:block;padding:10px; } .facebook-card .facebook-avatar { float:left; } .facebook-card .facebook-name { margin-left:44px; font-size:14px; font-weight:500; } .facebook-card .facebook-date { margin-left:44px; font-size:13px; color:#8e8e93; } .facebook-card .card-footer { background:#fafafa; } .facebook-card .card-footer a { color:#81848b; font-weight:500; } .facebook-card .card-content img { display:block; } .facebook-card .card-content-inner { padding:15px 10px; } </style> <div class = "views"> <div class = "view view-main"> <div class = "pages"> <div data-page = "home" class = "page navbar-fixed"> <div class = "navbar"> <div class = "navbar-inner"> <div class = "left"> </div> <div class = "center">Card HTML Layout</div> <div class = "right"> </div> </div> </div> <div class = "page-content"> <div class = "content-block-title">Simple Cards</div> <div class = "card"> <div class = "card-content"> <div class = "card-content-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> </div> <div class = "card"> <div class = "card-header">Card header</div> <div class = "card-content"> <div class = "card-content-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div> <div class = "card-footer">Card Footer</div> </div> <div class = "card"> <div class = "card-content"> <div class = "card-content-inner">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class = "content-block-title">Styled Cards</div> <div class = "card demo-card-header-pic"> <div style = "background-image:url(/framework7/images/nature.jpg)" valign = "bottom" class = "card-header color-white no-border">Beautiful Mountains</div> <div class = "card-content"> <div class = "card-content-inner"> <p class = "color-gray">Posted on May 20, 2015</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class = "card-footer"><a href = "#" class = "link">Like</a><a href = "#" class = "link">Comment</a></div> </div> <div class = "card facebook-card"> <div class = "card-header"> <div class = "facebook-avatar"><img src = "/framework7/images/cat.jpg" width = "34" height = "34"></div> <div class = "facebook-name">John Doe</div> <div class = "facebook-date">Monday at 2:15 PM</div> </div> <div class = "card-content"> <div class = "card-content-inner"> <p>What a nice view!!</p> <img src = "/framework7/images/blue_hills1.jpg" width = "100%"> <p class = "color-gray">Likes: 112 Comments: 43</p> </div> </div> <div class = "card-footer"><a href = "#" class = "link">Like</a><a href = "#" class = "link">Comment</a><a href = "#" class = "link">Share</a></div> </div> <div class = "content-block-title">Cards With List View</div> <div class = "card"> <div class = "card-content"> <div class = "list-block"> <ul> <li> <a href = "#" class = "item-link item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Link 1</div> </div> </a> </li> <li> <a href = "#" class = "item-link item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Link 2</div> </div> </a> </li> <li> <a href = "#" class = "item-link item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Link 3</div> </div> </a> </li> <li> <a href = "#" class = "item-link item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Link 4</div> </div> </a> </li> <li> <a href = "#" class = "item-link item-content"> <div class = "item-media"><i class = "icon icon-form-name"></i></div> <div class = "item-inner"> <div class = "item-title">Link 5</div> </div> </a> </li> </ul> </div> </div> </div> <div class = "card"> <div class = "card-header">Albums:</div> <div class = "card-content"> <div class = "list-block media-list"> <ul> <li class = "item-content"> <div class = "item-media"><img src = "/framework7/images/pic.jpg" width = "44"></div> <div class = "item-inner"> <div class = "item-title-row"> <div class = "item-title">Cast away</div> </div> <div class = "item-subtitle">James</div> </div> </li> <li class = "item-content"> <div class = "item-media"><img src = "/framework7/images/pic3.jpg" width = "44"></div> <div class = "item-inner"> <div class = "item-title-row"> <div class = "item-title">Don't Follow me</div> </div> <div class = "item-subtitle">Rema Taylor</div> </div> </li> <li class = "item-content"> <div class = "item-media"><img src = "/framework7/images/pic2.jpg" width = "44"></div> <div class = "item-inner"> <div class = "item-title-row"> <div class = "item-title">Billion words</div> </div> <div class = "item-subtitle">Kaveen sharma</div> </div> </li> </ul> </div> </div> <div class = "card-footer"> <span>May 1, 2016</span><span>45 comments</span></div> </div> </div> </div> </div> </div> </div> <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script>var myApp = new Framework7();</script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as cards_html_layout.html file in your server root folder.
Open this HTML file as http://localhost/cards_html_layout.html and the output is displayed as shown below.
The example defines the card layout, which contains unique related data, such as photo, text, link.
To Continue Learning Please Login
Login with Google