Content

Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Content
Contents are referred to as inner layout structure. We have pre-build different inner content structures that are widely used for different web apps or even mobiles apps

Layouts:
Plain
Coverpage with parallax
Full height coverpage with parallax
Page title parallax
Column view 3:9
Column view 9:3
Column view 6:6
Plain
1
<!-- START PAGE CONTENT -->
2
<div class="content">
3
    <!-- START PAGE COVER -->
4
    <div class="container-fluid container-fixed-lg ">
5
        <ul class="breadcrumb">
6
            <li>
7
                <p>home</p>
8
            </li>
9
            <li><a href="#" class="active">Plain template</a> 
10
            </li>
11
        </ul>
12
        <!-- END BREADCRUMB -->
13
        <h3 class="page-title">Page Title</h3>
14
    </div>
15
​
16
    <div class="container-fluid container-fixed-lg">
17
​
18
          <!-- CONTENT GOES HERE-->
19
​
20
    </div>
21
</div>
22
<!-- END PAGE CONTENT -->
Copied!
Coverpage with parallax
1
<div class="content">
2
  <!-- START JUMBOTRON -->
3
  <div class="jumbotron page-cover" data-pages="parallax">
4
    <div class="container-fluid container-fixed-lg">
5
      <div class="inner">
6
        <!-- START BREADCRUMB -->
7
        <ul class="breadcrumb">
8
          <li>
9
            <p>Home</p>
10
          </li>
11
          <li>
12
            <a class="active" href="#">Parrallax</a>
13
          </li>
14
        </ul><!-- END BREADCRUMB -->
15
        <div class="container-md-height m-b-20">
16
          <div class="row row-md-height">
17
            <div class="col-lg-7 col-md-6 col-md-height col-middle bg-white">
18
              <!-- START PANEL -->
19
​
20
              <div class="full-height">
21
                <div class="panel-body text-center">
22
                
23
                </div>
24
              </div><!-- END PANEL -->
25
            </div>
26
​
27
            <div class="col-lg-5 col-md-height col-md-6 col-top">
28
              <!-- START PANEL -->
29
​
30
              <div class="panel panel-transparent">
31
                <div class="panel-heading">
32
                  <div class="panel-title">
33
                    Getting started
34
                  </div>
35
                </div>
36
​
37
                <div class="panel-body">
38
​
39
                </div>
40
              </div><!-- END PANEL -->
41
            </div>
42
          </div>
43
        </div>
44
      </div>
45
    </div>
46
  </div><!-- END JUMBOTRON -->
47
​
48
  <div class="container-fluid container-fixed-lg ">
49
​
50
  </div>
51
</div><!-- END PAGE CONTENT -->
Copied!
Full height coverpage with parallax
1
<div class="page-content-wrapper content-builder full-height">
2
  <!-- START PAGE CONTENT -->
3
  <div class="content full-height">
4
    <!-- START JUMBOTRON -->
5
    <div class="jumbotron full-height no-padding" data-pages="parallax">
6
      <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20 full-height">
7
        <div class="inner full-height">
8
          <div class="container-xs-height full-height">
9
            <div class="col-xs-height col-middle text-center">
10
              <div class="col-md-6 col-md-offset-3 text-center">
11
                <h2 class="text-center"><img alt="logo" src="assets/img/logo.png"> makes it super-easy to create your
12
                dashboard Without a designer.</h2><button class="btn btn-success btn-rounded">Live Preview</button>
13
                <button class="btn btn-link text-white">Watch Video</button>
14
              </div>
15
            </div>
16
          </div>
17
        </div>
18
      </div>
19
    </div><!-- END JUMBOTRON -->
20
​
21
    <div class="container-fluid container-fixed-lg">
22
    
23
    </div>
24
  </div>
25
</div><!-- END PAGE CONTENT -->
Copied!
Page title parallax
1
<div class="content">
2
  <!-- START JUMBOTRON -->
3
  <div class="jumbotron no-margin" data-pages="parallax">
4
    <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
5
      <div class="inner">
6
        <h3 class="">Page Title</h3>
7
      </div>
8
    </div>
9
  </div><!-- END JUMBOTRON -->
10
  <div class="container-fluid container-fixed-lg demo-container">
11
    <!-- START BREADCRUMB -->
12
    <ul class="breadcrumb">
13
      <li>
14
        <p>home</p>
15
      </li>
16
      <li>
17
        <a class="active" href="#">Parallax for page title</a>
18
      </li>
19
    </ul><!-- END BREADCRUMB -->
20
    
21
  </div>
22
</div><!-- END PAGE CONTENT -->
Copied!
Column view 3:9
1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">  
3
    <!-- START PAGE CONTENT -->
4
    <div class="content full-height">
5
        <div class="container-fluid full-height no-padding">
6
            <div class="row full-height no-margin">
7
                <div class="col-md-3 no-padding b-r b-grey sm-b-b full-height">
8
                    <div class="bg-white full-height">
9
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
                       EXAMPLE : bg-success
12
                     -->
13
                    </div>
14
                </div>
15
                <div class="col-md-9 no-padding full-height">
16
                    <div class="placeholder full-height">
17
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
                       EXAMPLE : bg-success
20
                     -->
21
                    </div>
22
                </div>
23
            </div>
24
            </div>
25
    </div>
26
    <!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Column view 9:3
1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">  
3
    <!-- START PAGE CONTENT -->
4
    <div class="content full-height">
5
        <div class="container-fluid full-height no-padding">
6
            <div class="row full-height no-margin">
7
                <div class="col-md-9 no-padding b-r b-grey sm-b-b full-height">
8
                    <div class="bg-white full-height">
9
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
                       EXAMPLE : bg-success
12
                     -->
13
                    </div>
14
                </div>
15
                <div class="col-md-3 no-padding full-height">
16
                    <div class="placeholder full-height">
17
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
                       EXAMPLE : bg-success
20
                     -->
21
                    </div>
22
                </div>
23
            </div>
24
            </div>
25
    </div>
26
    <!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Column view 6:6
1
<!-- START PAGE CONTENT WRAPPER -->
2
<div class="page-content-wrapper content-builder full-height">  
3
    <!-- START PAGE CONTENT -->
4
    <div class="content full-height">
5
        <div class="container-fluid full-height no-padding">
6
            <div class="row full-height no-margin">
7
                <div class="col-md-6 no-padding b-r b-grey sm-b-b full-height">
8
                    <div class="bg-white full-height">
9
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
10
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
11
                       EXAMPLE : bg-success
12
                     -->
13
                    </div>
14
                </div>
15
                <div class="col-md-6 no-padding full-height">
16
                    <div class="placeholder full-height">
17
                    <!-- YOU CAN REMOVE FULL-HEIGHT IN ALL PARENT ELEMENTS TO EXPEND TO CONTENT HEIGHT
18
                       YOU CAN ALSO CHANGE THE BACKGROUND COLOR BY ADDING THE BG CLASSES
19
                       EXAMPLE : bg-success
20
                     -->
21
                    </div>
22
                </div>
23
            </div>
24
            </div>
25
    </div>
26
    <!-- END PAGE CONTENT -->
27
</div>
28
<!-- END PAGE CONTENT WRAPPER -->
Copied!
Introduction - Previous
Sass
Next - Apps
Calendar
Last modified 4yr ago
Copy link
Contents
Plain
Coverpage with parallax
Full height coverpage with parallax
Page title parallax
Column view 3:9