Framework7 - Card HTML Layout

The card HTML layout contains many classes, which are listed below −
cards
It is the card container.
card-header
It is the optional card header that is used to display card title.
card-footer
It is optional and used for specifying additional information or custom links.
card-content
It is the main container for content of the card and is required.
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.
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>
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.
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.
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.
The example defines the card layout, which contains unique related data, such as photo, text, link.
Posted on May 20, 2015
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
What a nice view!!
Likes: 112    Comments: 43




Link 1







Link 2







Link 3







Link 4







Link 5







Cast away

James






Don't Follow me

Rema Taylor






Billion words

Kaveen sharma



    7 Lectures 
     1 hours 

 Anadi Sharma

    22 Lectures 
     6 hours 

 Malhar Lathkar

    102 Lectures 
     8 hours 

 Karthikeya T

    19 Lectures 
     5 hours 

 Trevoir Williams

    20 Lectures 
     1 hours 

 John Elder

    13 Lectures 
     3 hours 

 Darwish
 Print
 Add Notes
 Bookmark this page