Framework7 Content Block

by Online Tutorials Library July 14, 2022

Framework7 Content Block

Content blocks are used to add extra content with different format. It is generally used when you have a lot of content of different types and you have to put all on a page.

Example

Let’s take an example to demonstrate Framework7 content block.

  <!DOCTYPE html>  <html>     <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>Content Block</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” />     </head>     <body>        <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”>Content Block</div>                          <div class = “right”> </div>                       </div>                    </div>                    <div class = “page-content”>                       <p>This is out side of content block!!!</p>                           <div class = “content-block”>                          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium                           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis                           et quasi architecto beatae vitae dicta sunt explicabo.</p>                       </div>                       <div class = “content-block”>                          <div class = “content-block-inner”>This is another text block wrapped with “content-block-inner”</div>                       </div>                           <div class = “content-block-title”>Content Block Title</div>                             <div class = “content-block”>                          <p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur                           magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.                           Integer blandit varius nisi quis consectetur.</p>                       </div>                       <div class = “content-block-title”>This is another long content block title</div>                                  <div class = “content-block”>                          <div class = “content-block-inner”>                             <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem                              accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo                              inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>                          </div>                       </div>                                 <div class = “content-block-title”>Content Block Inset</div>                         <div class = “content-block inset”>                          <div class = “content-block-inner”>                             <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.                              Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,                              vulputate turpis vel, sagittis felis. </p>                          </div>                       </div>                                      <div class = “content-block-title”>Content Block Tablet Inset</div>                       <div class = “content-block tablet-inset”>                          <div class = “content-block-inner”>                             <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.                             Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,                              vulputate turpis vel, sagittis felis. </p>                          </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();           var mainView = myApp.addView(‘.view-main’);        </script>     </body>  </html>  

Test it Now

Next TopicFramework7 Layout Grid

Framework7 Content Block

Framework7 Content Block

Example

Income tax calculating formula in Excel

Framework7 Inline Tabs

You may also like